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

这个应该算新手帖吧。。呵呵
最近在做一个项目，用到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();
						}
					}

				}
			})
		});

评论

1 楼 yefansiping 2012-02-15  

解决了，非常感谢，之前钻牛角尖了，谢谢