DataView里如何添加按钮?

Question

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?

Answer 1

因为你使用的是ajax加载数据，在render执行的时候查找不到相应dom对象，

你吧render 里面代码写在 store load 之后。或者别的地方试试。

如果测试添加按钮，你不要store ajax加载数据。直接使用data：【】 可以测试看效果