使用ExtJS网格列标题中的ListFilter进行远程过滤 [英] Remote Filtering with ListFilter in ExtJS Grid Column Header
问题描述
我正在使用ListFilter插件来过滤网格面板上的结果。列定义是。
{
标题：'提供者'，
过滤器：{
类型：'list'，
store：Ext.getStore（'MyApp.store.Provider'），
dataIndex：'provider_id'，
labelField：'name'
}
}
MyApp.store.Provider 被创建为
Ext.create（'Ext.data.Store'，{
storeId：'MyApp .store.Provider'，
autoDestroy：true，
autoLoad：{start：0，limit：50}，
autoSync：true，
model：'MyApp.model.Provider '，
pageSize：50，
proxy：{
type：'ajax'，
api：{
create：'proxy / provider / create'，
read：'proxy / provider / read'，
update：'proxy / provider / update'，
destroy：'proxy / provider / destroy'
} $ $ $ $ $ $ $ $ $ $ $
$成功属性$' b $ b totalProperty：'total'
}，
writer：{
allowSingle：false，
type：'json'，
writeAllFields：false，
root：'data'
}
}
}）;
最后模型 MyApp.model.Provider 被定义为
Ext.define（'MyApp.model.Provider'，{
extends：'Ext.data ，
{name：'create_time'，
{name：'provider_id' 'date'，dateFormat：appDateFormat}，
{name：'status'，type：'int'}
]，
idProperty：'provider_id'，
displayProperty：'name '//用于动态使用属性显示
}的自定义属性
现在此代码在过滤器菜单中不显示任何子菜单。它只显示加载。查看图片
更新
使用以下过滤器配置。这实际上手动填充选项配置。所以在这里没有使用 store 。
{
type ：'list'，
labelField：'name'，
options：（function（）{
var opts = [];
fS.load（function（records，operation，成功）{
for（var i = 0; i< records.length; i ++）{
var ar = {
id：records [i] .get（'provider_id'
名称：记录[i] .get（'name'）
};
opts.push（ar）;
}
}）;
return opts;
}）（），
single：true
}
似乎id是硬编码的。 id：records [i] .get（'provider_id'），看起来不太好。虽然它有效
但我仍然在寻找一种正确的方法。
注意：可以在 ExtJS 4.1.1 上找到预期的行为。请参阅此 jsfiddle 。我已经转载了。但是这个相同的东西在 ExtJS 4.0.7
我没有自己尝试过，但是您需要使用 idField 属性 [新的ExtJS4.1.3 ]其默认设置为 id 。所以我想这将工作：
{
标题：'提供者'，
过滤器：{
type：'list'，
idField：'provider_id'，
store：Ext.getStore（'MyApp.store.Provider'），
dataIndex：'provider_id'，
labelField：'name'
}
}
好的，我看着这个消息来源，现在我可以告诉你，这是答案。因此，直到4.2出来才能生效，或者您可以对
应用以下更改，使其运行： / p>
添加一个默认值 idField
在这个行的构造函数中查看
case'object'：options.push（[value.id，value [this.labelField ]]）;打破;
//更多行
字段：['id'，this.labelField]，
并将其替换为
case'object'：options.push（[value [me.idField]，value [me.labelField]]）;打破;
//更多行
字段：[me.idField，me.labelField]，
并且在onLoad函数中查找
itemValue = records [i] .get（'id'）;
并将其替换为
itemValue = records [i] .get（me.idField）;
几乎是这样。
I am using ListFilter plugin to filter results on a Grid panel. The column definition is.
{
header: 'Provider',
filter: {
type: 'list',
store: Ext.getStore('MyApp.store.Provider'),
dataIndex: 'provider_id',
labelField: 'name'
}
}
MyApp.store.Provider is created as
Ext.create('Ext.data.Store', {
storeId: 'MyApp.store.Provider',
autoDestroy: true,
autoLoad: {start: 0, limit: 50},
autoSync: true,
model: 'MyApp.model.Provider',
pageSize: 50,
proxy: {
type: 'ajax',
api: {
create: 'proxy/provider/create',
read: 'proxy/provider/read',
update: 'proxy/provider/update',
destroy: 'proxy/provider/destroy'
},
reader: {
type: 'json',
root: 'data',
successProperty: 'success',
messageProperty: 'message',
totalProperty: 'total'
},
writer: {
allowSingle: false,
type: 'json',
writeAllFields: false,
root: 'data'
}
}
});
And lastly model MyApp.model.Provider is defined as
Ext.define('MyApp.model.Provider', {
extend: 'Ext.data.Model',
fields: [
{ name: 'provider_id', type: 'int'},
'name',
{ name: 'create_time', type: 'date', dateFormat: appDateFormat },
{ name: 'status', type: 'int'}
],
idProperty: 'provider_id',
displayProperty: 'name' // A custom property used for dynamically use the property to display
})
Now this code does not show any sub-menu in the filter menu. It just shows loading. See the image.
Update
I have solved it using following filter config. This actually populates options config manually. So no store is used here.
{
type: 'list',
labelField: 'name',
options: (function () {
var opts = [];
fS.load(function (records, operation, success) {
for (var i = 0; i < records.length; i++) {
var ar = {
id: records[i].get('provider_id'),
name: records[i].get('name')
};
opts.push(ar);
}
});
return opts;
})(),
single: true
}
It seems 'id' is hard-coded. id: records[i].get('provider_id'), does not look good. Though it works.
But I am still looking for a proper way to do it.
Note: The expected behavior can be found on ExtJS 4.1.1. See this jsfiddle. I have reproduced it. But this very same thing does not work on ExtJS 4.0.7
解决方案 I didn't tried this myself but you need to set the ID manually with the idField property [new to ExtJS4.1.3] which is per default set to id. So I guess this will work:
{
header: 'Provider',
filter: {
type: 'list',
idField: 'provider_id',
store: Ext.getStore('MyApp.store.Provider'),
dataIndex: 'provider_id',
labelField: 'name'
}
}
Update
OK, I looked at the source and I can now tell you that this is the answer. So will have to either live with your workarround until 4.2 is out or you can apply the following changes to your Ext.ux.grid.menu.ListMenu to make it run:
add the idField with a default value.
look within the constructor for this lines
case 'object': options.push([value.id, value[this.labelField]]); break;
// some more lines
fields: ['id', this.labelField],
and replace it with
case 'object': options.push([value[me.idField], value[me.labelField]]); break;
// some more lines
fields: [me.idField, me.labelField],
and within the onLoad function look for
itemValue = records[i].get('id');
and replace it with
itemValue = records[i].get(me.idField);
and that pretty much is it.
这篇关于使用ExtJS网格列标题中的ListFilter进行远程过滤的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
