在 extjs 3.4 中刷新面板中的数据视图

Posted

技术标签:

【中文标题】在 extjs 3.4 中刷新面板中的数据视图【英文标题】:Refreshing a dataview in Panel in extjs 3.4 【发布时间】:2014-08-28 00:11:10 【问题描述】:

我有一个 extjs Panel 组件,其中包含一个 dataview 项目。我用它来显示来自商店的图像。它在第一次加载期间按预期工作。但后来当我用新的图像 url 重新加载 imgStore 时(当用户搜索并加载不同的城市时会发生这种情况),视图不会刷新。有人可以指出刷新关联数据存储时刷新panel/dataview 项目的最佳方式吗?

实际代码在面板中有不止一项,还有许多其他按钮和工具栏。请看下面代码的相关部分:

init: function() 

    // image store
    this.imgStore = new Ext.data.JsonStore(
        idProperty: 'imgId',
        fields: [
            name: 'imgId',
            type: 'integer',
            mapping: 'imgId'
        , 
            name: 'url',
            mapping: 'url'
        ],
        data: [],
    );

    // load images          
    Ext.each(myImgStore.data.items, function(itm, i, all) 
        this.imgStore.loadData(itm.data, true);
    );

    // add to a dataview in a panel
    this.myPanel = new Ext.Panel(
        autoScroll: true,
        items: [
            xtype: 'dataview',
            store: this.imgStore,
            autoScroll: true,
            id: 'imgList',
            tpl: new Ext.XTemplate(
                '<ul class="imgGrid">',
                '<tpl for=".">',
                '<li>',
                '<div class=\"imgThumbnail\" imgId="imgId">',
                '<img src="url"/>',
                '</div>',
                '</li>',
                '</tpl>',
                '</ul>',
                '<div class="x-clear"></div>'
            ),
            listeners: 
                afterrender: function() 
                    // do something                          
                
            
        ]
    );
    // add this to the center region of parentpanel
    Ext.getCmp('parentPanel').add([this.myPanel]);
    this.myPanel.doLayout();

每次重新加载商店时,我都希望刷新数据视图。我使用的是 extjs 3.4 版本。

谢谢!

【问题讨论】:

【参考方案1】:

您需要refresh 您的数据视图。我建议将其放入变量中。

var dataView = new Ext.DataView(
    store: this.imgStore,
    autoScroll: true,
    id: 'imgList',
    tpl: new Ext.XTemplate(
        .
        .
        .
    ),
    listeners: 
        afterrender: function() 
            // do something                          
        
    
);

然后在你的商店中添加一个监听器:

this.imgStore = new Ext.data.JsonStore(
    idProperty: 'imgId',
    fields: [
        name: 'imgId',
        type: 'integer',
        mapping: 'imgId'
    , 
        name: 'url',
        mapping: 'url'
    ],
    data: []
);

// Define your dataView here

this.imgStore.on('load', function() 
    dataView.refresh();    
);

注意:代码未经测试。

【讨论】:

是的,刷新是我正在寻找的功能。谢谢!

以上是关于在 extjs 3.4 中刷新面板中的数据视图的主要内容,如果未能解决你的问题,请参考以下文章

ExtJs 3.4,如何在 Ext.panel 中刷新 autoLoad

ExtJS 3.4 分页工具栏中的刷新完成事件

ExtJS (3.4):更新 TabPanel 中面板的工具提示

Extjs 3.4 中的日期格式不呈现和显示

ExtJs Gridpanel 存储刷新

如何在 extjs 3.4 网格面板中显示/隐藏列