作者热门文章
- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
当我尝试动态设置网格过滤器列表时遇到了一个奇怪的问题。
让我用我的代码片段来解释
我有一列过滤器列表定义为
{
text : 'Client',
dataIndex : 'topAccount',
itemId : 'exTopAccount',
filter: {
type: 'list',
options:[]
}
}
我从“viewready”中的商店初始化列表
viewready: function(cmp,eOpts){
cmp.getHeaderCt().child('#exTopAccount').initialConfig.filter.options = clientsStore.collect('topAccount');
}
===> 效果不错
现在,我必须根据用户移动到下一页时的记录构建新的客户端存储。因此,我在分页的“更改”事件中构建商店
listeners: {
'change' :function( toolbar, pageData, eOpts ) {
var store = Ext.StoreManager.get('ExceptionRecords');
clientsStore.removeAll(true);
store.each(function(record){
if(clientsStore.findRecord('topAccount',record.data.topAccount.trim()) == null ) {
clientsStore.add({topAccount: record.data.topAccount.trim()})
}
})
Ext.getCmp('exceptionGridContainer').view.refresh;
Ext.getCmp('exceptionGridContainer').view.getHeaderCt().doLayout;
console.log(clientsStore);
Ext.getCmp('exceptionGridContainer').view.getHeaderCt().child('#exTopAccount').initialConfig.filter.options = clientsStore.collect('topAccount');
}
}
我现在可以在 clientsStore 中看到新数据。但网格过滤器列表未更新。仍然显示旧数据。我尝试了刷新、布局等。没有任何帮助
任何帮助将不胜感激
谢谢塔拉汉
最佳答案
仅更改属性值不会影响组件呈现或计算状态。菜单是在列表首次初始化时创建的。第一次这样做时,它会起作用,因为那是在初始化之前,但第二次,就太晚了。
如果您可以获取对实例化 ListFilter
的引用,我认为您可以通过这种方式强制重新创建菜单:
listFilter.menu = listFilter.createMenu({
options: [ ... ] // new options
// rest of the filter config
});
因此,假设您有一个对目标 grid
的引用,您可以通过类似于此的调用更改具有 dataIndex
的“topAccount”列的选项:
var listFilter = grid
.findFeature('filters') // access filters feature of the grid
.get('topAccount'); // access the filter for column
listFilter.menu = listFilter.createMenu({
options: [ ... ] // new options
// rest of the filter config
});
--- 编辑---
好的,完整的例子。已测试,working .
Ext.widget('grid', {
renderTo: Ext.getBody()
,height: 400
,features: [{
ftype: 'filters'
,local: true
}]
,columns: [{
dataIndex: 'a'
,text: 'Column A'
,filter: {
type: 'list'
,options: ['Foo', 'Bar']
}
},{
dataIndex: 'b'
,text: 'Column B'
},{
dataIndex: 'c'
,text: 'Column C'
}]
,store: {
fields: ['a', 'b', 'c']
,autoLoad: true
,proxy: {
type: 'memory'
,reader: 'array'
,data: [
['Foo', 1, 'Bar']
,['Bar', 2, 'Baz']
,['Baz', 1, 'Bar']
,['Bat', 2, 'Baz']
]
}
}
,tbar: [{
text: 'Change list options'
,handler: function() {
var grid = this.up('grid'),
// forget about getFeature, I read the doc and found something!
filterFeature = grid.filters,
colAFilter = filterFeature.getFilter('a');
// If the filter has never been used, it won't be available
if (!colAFilter) {
// someone commented that this is the way to initialize filter
filterFeature.view.headerCt.getMenu();
colAFilter = filterFeature.getFilter('a');
}
// ok, we've got the ref, now let's try to recreate the menu
colAFilter.menu = colAFilter.createMenu({
options: ['Baz', 'Bat']
});
}
}]
});
关于javascript - 分机 JS 4 : Grid List Filter is NOT updated,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/16944017/
我是一名优秀的程序员,十分优秀!