问题描述
这是一个后续问题，我在这里得到了回答:我如何以编程方式设置列过滤器?
This is a follow up question that I got answered here: How can I programmatically set column filters?
我有一个188行的Ext.js视图.在此视图中，我扩展了Ext.grid.Panel，并且在此网格中，我像这样设置了selModel ...
I have a 188 line Ext.js view. In this view I extend Ext.grid.Panel and in this grid I have set the selModel like so ...
selModel: {
cellSelect: false, // Only support row selection.
type: 'spreadsheet' // Use the new "spreadsheet" style grid selection model.
},
在其中一列Status列中，我以编程方式设置了过滤器，以便在页面首次呈现时仅显示Status为Ready的行.我在代码中一直在这样做:
On one of the columns, the Status column, I am programmatically setting the filter so that only rows that have the Status of Ready will appear when the page firsts renders. I have been doing this here in the code:
columns: [
...
{
text: 'Status',
dataIndex: 'status',
itemId: 'status',
renderer: function(value, metaData) {
var filter = this.up('panel').down('#status').filter;
if (!filter.menu) {
filter.createMenu();
filter.menu
.down('menuitem[value="Ready"]')
.setChecked(true);
}
metaData.tdStyle = (value == 'Ready') ?
'color:green;font-weight: bold' :
'color:red;font-style: italic'
return(value)
},
filter: 'list',
flex: 1,
},
... more columns ...
一个有帮助的SO成员指出，设置过滤器的代码并不是最有效的地方，因为将对网格中的每一行执行该代码.
A helpful SO member pointed out that is not the most efficient place for the code that sets the filter as the code will be executed for each row in the grid.
我已经尝试过添加afterrender函数，例如...
I have tried adding an afterrender function like so ...
{
text: 'Status',
dataIndex: 'status',
itemId: 'status',
renderer: function(value, metaData) {
metaData.tdStyle = (value == 'Ready') ?
'color:green;font-weight: bold' :
'color:red;font-style: italic'
return(value)
},
filter: 'list',
flex: 1,
listeners: {
afterrender: function(value) {
Ext.Msg.alert('We have been rendered value is ' + value );
var filter = this.up('panel').down('#status').filter;
if (!filter.menu) {
filter.createMenu();
filter.menu
.down('menuitem[value="Ready"]')
.setChecked(true); //Uncaught TypeError: Cannot read property 'setChecked' of null
}
}},
...，但是导致此错误消息//Uncaught TypeError: Cannot read property 'setChecked' of null.
... but that results in this error message, //Uncaught TypeError: Cannot read property 'setChecked' of null.
我在这里做错了什么?我需要listeners:吗?我是否没有传递我认为传递给afterrender函数的数据?我应该定义一个initComponent函数吗?
What am I doing wrong here? Do I need the listeners:? Am I not getting passed the data I think I am getting passed to my afterrender function? Should I defining a initComponent function?
更新:
我将代码更改为DrakeES的建议，...
UPDATE:
I changed my code to what DrakeES suggested, ...
{
text: 'Status',
dataIndex: 'status',
itemId: 'status',
renderer: function(value, metaData) {
metaData.tdStyle = (value == 'Ready') ?
'color:green;font-weight: bold' :
'color:red;font-style: italic'
return(value)
},
flex: 1,
filter: {
type: 'list',
value: 'Ready'
}
...但是结果是这样的:
... but the result is this:
动画loading图像只是坐在那里旋转.这阻止了用户能够交互地更改过滤器.我想知道我在做什么错了吗?
Where the animated loading image just sits there and spins. This prevents the user from be able to change the filter interactively. I wonder what it is I am doing wrong here?
推荐答案
有效检查过滤器复选框的方法是在商店中设置过滤器.
Setting filter on the store, however, will not send feedback to the column filter menu, so the latter will remain unchecked unless you explicitly check it. Therefore, you still need an afterrender handler on either the grid or the column to make things look in sync.
一个简单而优雅的解决方案，没有听众和东西:
A simple and elegant solution without listeners and stuff:
filter: {
type: 'list',
value: 'Ready'
}
完整的示例: https://fiddle.sencha.com/#fiddle/prp
这篇关于使用电子表格selModel时，可以在哪里以编程方式设置列过滤器?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！