在 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