DataView with Extjs 3

时间:2011-11-23 13:48:52

标签: dataview extjs3

我创建了一个面板,在图像的左侧缩略图上显示我,当我点击右侧面板上显示的图像时。 它工作但我想当我打开这个页面而不点击任何拇指时,它会在右侧面板上显示一个defaut图像(此值包含默认图像的链接D.data.defaultimage)

这是此面板的代码:

var Pstore = new Ext.data.JsonStore({
        proxy: new Ext.data.HttpProxy({
            url: 'page.php?cmd=Affich',
            method: 'POST'
        }),
        root: 'images',
        fields: [ 'name', 'url', 'thumb_url' ]
    });
    Pstore.load();

    var tpl = new Ext.XTemplate(
        '<tpl for=".">',
            '<div class="thumb-wrap" id="{name}">',
            '<center><img src="{thumb_url}" title="{name}"></center>',
                '<span>{name}</span></div>',
        '</tpl>'
    );
    tplDetail = new Ext.XTemplate(
        '<div class="details">',
            '<tpl for=".">',
                '<center><img src="{url}"></center>',       
            '</tpl>',
        '</div>'
    );

    datav = new Ext.DataView({
        autoScroll  : true,
        store       : Pstore, 
        tpl         : tpl,
        autoHeight  : false,
        multiSelect : true,
        overClass   : 'x-view-over',
        itemSelector: 'div.thumb-wrap',
        emptyText   : 'No images',
        listeners: {
            click: {
                fn: function() {
                    selNode = datav.getSelectedRecords();
                    tplDetail.overwrite(panelPreview.body, selNode[0].data);
                    panelPreview.body.fadeIn('l', {duration:0.5});
                }
            }
        }
    })

    var panelLeft = new Ext.Panel({
        id          : 'images-view',
        title       : 'Pages',
        autoScroll  : true,
        region      : 'west',
        frame       : true,
        width       : 180,
        layout      : 'fit',
        items       : datav
    });
    panelPreview = new Ext.Panel({
        title       : 'Aperçu:',
        region      : 'center',
        autoScroll  : true,
        frame       : true,
        layout      : 'fit',
        id          : 'panelDetail',
        tpl         : tplDetail
    });

    Affich = new Ext.FormPanel({
        frame       : true,
        layout      : 'border',
        bodyStyle   : 'padding:5px',
        renderTo    : 'right-bottom',
        items       : [panelLeft, panelPreview]
    });

感谢您的帮助

1 个答案:

答案 0 :(得分:0)

只是一些快速(未经测试)的想法 - 您是否尝试过将panelPreview设为DataView?然后,您可以将其emptyText设置为您想要的值。或者,Panel可以应用data配置,根据文档,这是要加载到模板中的初始数据集。