EXT如何在模板中加入自定义的方法

最新推荐文章于 2020-10-02 17:01:13 发布

iteye_1952

最新推荐文章于 2020-10-02 17:01:13 发布

阅读量430

点赞数

分类专栏： EXT 文章标签： EXT Ajax XML HTML

EXT 专栏收录该内容

1 篇文章

订阅专栏

本文介绍如何使用ExtJS中的DataView组件显示图片列表，并实现点击图片下方的文字链接来执行不同操作，如广播和删除等。文章还提供了解决链接点击无反应及自定义方法未定义问题的具体代码实例。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

这个应该算新手帖吧。。呵呵
最近在做一个项目，用到DataView显示图片列表，每张图片下面有文字链接，在做的过程中遇到两个问题

1.点击文字链接没反应。
2.链接中 onClick调用自定义方法，提示function not defined

在lizhi92574热心帮助下解决了
简单帖下代码。。


 		window.delPic = function(id) {
			var url = "delPic.action?id=" + id;
			Ext.Ajax.request({
						url : url,
						success : function() {

						},
						failure : function() {

						}
					});

		}

		var picPs = new Ext.data.JsonStore({
					url : "getPic.action" + "?programInstanceId=" + node.id,
					root : 'images',
					fields : ['name', 'url', 'state', 'id', {
								name : 'size',
								type : 'float'
							}]
				});
		picPs.load();

		var tpl = new Ext.XTemplate(
				'<tpl for=".">',
				'<div class="thumb-wrap" id="{url}">',
				'<div class="thumb"><img src="{url}" title="{name}"></div>',
				'<tpl if="this.isTrue(state)==true">',
				'<span >正在广播    <a href="">取消</a></span></div>',
				'</tpl>',
				'<tpl if="this.isTrue(state)==false">',
				'<span><a href="baidu.com" target="_blank">广播</a>    <a href="JavaScript:void(0);" onClick="delPic({id})">删除</a></span></div>',
				'</tpl>', '</tpl>',

				{
					isTrue : function(state) {
						return state == true;
					}
				}

		);

		var picPanel = new Ext.Panel({
			id : 'images-view',
			frame : true,
			width : 410,
			height : 270,
			collapsible : true,
			layout : 'fit',
			title : '图片',
			tbar : [{
				text : '上传',
				iconCls : 'db-icn-upload',
				handler : function() {
					var dialog = new Ext.Window({
								title : '多文件上传',
								name : 'dialog',
								width : 500,
								height : 500,
								itemId : node.id,
								resizable : false,
								layout : 'fit',
								items : [{
											xtype : 'uploadpanel',
											uploadUrl : 'uploadFiles.action',
											filePostName : 'myUpload', // 这里很重要，默认值为'fileData',这里匹配action中的setMyUpload属性
											flashUrl : 'ExtJs/swfupload/swfupload.swf',
											fileSize : '500 MB',
											height : 400,
											border : false,
											fileTypes : '*.*', // 在这里限制文件类型:'*.jpg,*.png,*.gif'
											fileTypesDescription : '图片或XML文件',
											postParams : {
												path : node.text + '\\', // 上传到服务器的files目录下面
												programInstanceId : node.id
											}
										}],
								listeners : {
									"close" : function() {										picPs.reload();
										picPanel.view.refresh();

									}
								},
								bbar : ['fm1039.com']
							});

					dialog.show();
				},
				scope : this
			}],
			items : new Ext.DataView({
				store : picPs,
				tpl : tpl,
				height : 270,
				id : node.id + 'pic',
				multiSelect : true,
				overClass : 'x-view-over',
				itemSelector : 'div.thumb-wrap',
				emptyText : 'No images to display',
				listeners : {
					beforeclick : function(d, i, item, e) {
						if (String(e.getTarget().nodeName).toUpperCase() == 'A') { // 如果点击的是a标签，不进行处理。
							return false;
						}
					},
					dblclick : {
						fn : function(dv, nodes) {
							var cn = dv.getSelectedNodes()[0];
							var showPic = new Ext.Window({
										layout : 'fit',
										title : '图片',
										width : 240,
										height : 320,
										// autoHight:false,
										modal : true,
										html : "<img src='" + cn.id + "'>",
										closeAction : 'hide'
									});
							showPic.show();
						}
					}

				}
			})
		});