我正在使用 ListFilter 插件来过滤网格面板上的结果。列定义是。
{
header: 'Provider',
filter: {
type: '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'
},
reader: {
type: 'json',
root: 'data',
successProperty: 'success',
messageProperty: 'message',
totalProperty: 'total'
},
writer: {
allowSingle: false,
type: 'json',
writeAllFields: false,
root: 'data'
}
}
});
最后模型 MyApp.model.Provider
定义为
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
})
现在这段代码不会在过滤器菜单中显示任何子菜单。它只是显示加载。查看图像。
更新
我已经使用以下过滤器配置解决了这个问题。这实际上是手动填充 options
配置。所以这里没有使用store
。
{
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
}
“id”似乎是硬编码的。 id: records[i].get('provider_id'),
看起来不太好。虽然它有效。
但我仍在寻找合适的方法。
注意:可以在 ExtJS 4.1.1
上找到预期的行为。看这个jsfiddle .我已经复制了它。但同样的事情在 ExtJS 4.0.7
最佳答案
我自己没有尝试过,但您需要使用 idField
手动设置 ID property [ExtJS4.1.3 的新功能] 默认设置为 id
。所以我想这会起作用:
{
header: 'Provider',
filter: {
type: 'list',
idField: 'provider_id',
store: Ext.getStore('MyApp.store.Provider'),
dataIndex: 'provider_id',
labelField: 'name'
}
}
更新
好的,我查看了源代码,现在我可以告诉你这就是答案。因此,要么在 4.2 发布之前继续使用您的工作环境,要么您可以对 Ext.ux.grid.menu.ListMenu
应用以下更改以使其运行:
添加具有默认值的 idField
。
在这行的构造函数中查找
case 'object': options.push([value.id, value[this.labelField]]); break;
// some more lines
fields: ['id', this.labelField],
并将其替换为
case 'object': options.push([value[me.idField], value[me.labelField]]); break;
// some more lines
fields: [me.idField, me.labelField],
并在 onLoad 函数中寻找
itemValue = records[i].get('id');
并将其替换为
itemValue = records[i].get(me.idField);
差不多就是这样。
关于javascript - 在 ExtJS 网格列标题中使用 ListFilter 进行远程过滤,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/15121355/