Javascript 在extjs 3.4中刷新面板中的dataview

我有一个extjs

面板

组件，其中包含一个

数据视图

项。我用它来显示商店里的图像。在第一次加载期间，它按预期工作。但稍后，当我使用新的图像url重新加载

imgStore

时（当用户搜索并加载其他城市时发生），视图不会刷新。有人能告诉我在刷新相关数据存储时刷新

面板/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();
}

init:function（）{
//图像存储
this.imgStore=new Ext.data.JsonStore({
idProperty:“imgId”，
字段：[{
名称：“imgId”，
键入：“整数”，
映射：“imgId”
}, {
名称：“url”，
映射：“url”
}],
数据：[]，
});
//加载图像
Ext.each（myImgStore.data.items、function（itm、i、all）{
this.imgStore.loadData（itm.data，true）；
});
//添加到面板中的数据视图
this.myPanel=新的外部面板({
autoScroll：是的，
项目：[{
xtype:“数据视图”，
商店：this.imgStore，
autoScroll：是的，
id:“imgList”，
tpl：新Ext.XTemplate(
“
”，
'',
“
”，
'',
'',
'',
“
”，
'',
“
”，
''
),
听众：{
afterrender:function（）{
//做点什么
}
}
}]
});
//将其添加到parentpanel的中心区域
Ext.getCmp（'parentPanel'）.add（[this.myPanel]）；
this.myPanel.doLayout（）；
}

每次重新加载存储时，我都希望刷新dataview。我使用的是ExtJS3.4版本

---

谢谢

您需要刷新数据视图。我建议把它放到一个变量中

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();    
});

---

注意：代码未经测试。

Yep refresh是我正在寻找的函数。谢谢