Ext.onReady(function(){
var xd = Ext.data;
var store = new Ext.data.JsonStore({
url: 'get-images.php',
root: 'images',
fields: ['name', 'url', {name:'size', type: 'float'}, {name:'lastmod', type:'date', dateFormat:'timestamp'}]
});
store.load();
var tpl = new Ext.XTemplate(
'<tpl for=".">',
'<div class="thumb-wrap" id="{name}">',
'<div class="thumb"><img src="{url}" title="{name}"></div>',
'<span class="x-editable">{shortName}</span></div>',
'</tpl>',
'<div class="x-clear"></div>'
);
var panel = new Ext.Panel({
id:'images-view',
frame:true,
width:535,
autoHeight:true,
collapsible:true,
layout:'fit',
title:'Simple DataView (0 items selected)',
items: new Ext.DataView({
store: store,
tpl: tpl,
autoHeight:true,
multiSelect: true,
overClass:'x-view-over',
itemSelector:'div.thumb-wrap',
emptyText: 'No images to display',
plugins: [
new Ext.DataView.DragSelector(),
new Ext.DataView.LabelEditor({dataIndex: 'name'})
],
prepareData: function(data){
data.shortName = Ext.util.Format.ellipsis(data.name, 15);
data.sizeString = Ext.util.Format.fileSize(data.size);
data.dateString = data.lastmod.format("m/d/Y g:i a");
return data;
},
listeners: {
selectionchange: {
fn: function(dv,nodes){
var l = nodes.length;
var s = l != 1 ? 's' : '';
panel.setTitle('Simple DataView ('+l+' item'+s+' selected)');
}
}
}
})
});
panel.render(document.body);
});
我想在模板里加上一个按钮,请问该怎么重写tpl?
因为你使用的是ajax加载数据,在render执行的时候查找不到相应dom对象,
你吧render 里面代码写在 store load 之后。或者别的地方试试。
如果测试添加按钮,你不要store ajax加载数据。直接使用data:【】 可以测试看效果
在 XTemplate 里,先把div添加好。
在DataView render事件里面查找相应div吧按钮渲染上去即可.
XTemplate 添加
render : function(p) {
(function() {
var btns = Ext.DomQuery.select('div.test_btn', p.el.dom); //查找需要渲染 div
Ext.each(btns, function(btn) { //遍历div 添加按钮渲染
var btn = new Ext.Button({
renderTo : btn,
text : 'dd'
})
})
}).defer(2)
}
检查 render 函数 是否有参数p,
如果需要对应不对事件函数可以在div添加属性
render是渲染完成执行的。那时候el对象已经创建了。
你打印看 p.el 看是object吗