DataView里如何添加按钮?

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添加属性

获取callback 值,吧他放在handler里面就行了。

render是渲染完成执行的。那时候el对象已经创建了。
你打印看 p.el 看是object吗