woodstone2008
2010-10-13 10:25 阅读 482

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?

  • 点赞
  • 写回答
  • 关注问题
  • 收藏
  • 复制链接分享

4条回答 默认 最新

  • 已采纳
    lizhiyezi lizhiyezi 2010-10-13 19:51

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

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

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

    点赞 评论 复制链接分享
  • lizhiyezi lizhiyezi 2010-10-13 16:01

    在 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)
    }

    点赞 评论 复制链接分享
  • lizhiyezi lizhiyezi 2010-10-13 17:42

    检查 render 函数 是否有参数p,
    如果需要对应不对事件函数可以在div添加属性

    获取callback 值,吧他放在handler里面就行了。
    点赞 评论 复制链接分享
  • lizhiyezi lizhiyezi 2010-10-13 19:11

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

    点赞 评论 复制链接分享

相关推荐