我有一个 extjs Panel
组件,其中包含 dataview
项。我用它来显示商店中的图像。它在第一次加载期间按预期工作。但稍后,当我使用新的图像 url 重新加载 imgStore
时(当用户搜索并加载不同的城市时会发生这种情况), View 不会刷新。有人可以告诉我刷新关联数据存储时刷新 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();
}
每次重新加载商店时,我希望刷新数据 View 。我使用的是 extjs 3.4 版本。
谢谢!
最佳答案
您需要刷新
您的数据 View 。我建议将其放入变量中。
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();
});
注意:代码未经测试。
关于javascript - 在 extjs 3.4 中刷新面板中的数据 View ,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/25538851/