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