PDA

View Full Version : Remote Filtering with ListFilter in ExtJS Grid Column Header



shiplu
27 Feb 2013, 12:32 PM
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.http://i.stack.imgur.com/fVYQm.png
It just stuck there and does not load anything by ajax. How to make it load from store?

mitchellsimoens
1 Mar 2013, 8:01 AM
So the store isn't loading?

shiplu
1 Mar 2013, 9:29 AM
So the store isn't loading?
Either its not loading (as onLoad function on ListMenu is not called) or the loaded data can not be parsed by ListFilter.

I am using following filter as workaround.


{
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
}
But still this does not solve the problem. Is there any standard way (without populating 'options' manually by Ajax) ?

mitchellsimoens
1 Mar 2013, 10:32 AM
You can tell if the request is sent to load the store via the developer tools in the browser, the network tab will show all requests.

shiplu
1 Mar 2013, 11:23 PM
You can tell if the request is sent to load the store via the developer tools in the browser, the network tab will show all requests.
No there is not activity on network tab. No new ajax request is sent.

mitchellsimoens
2 Mar 2013, 8:30 AM
No there is not activity on network tab. No new ajax request is sent.

Ok, so that means the store is not being loaded. Try loading the store to see if that fixes the problem.

shiplu
2 Mar 2013, 11:16 AM
Ok, so that means the store is not being loaded. Try loading the store to see if that fixes the problem.
I have set autoLoad to true on store. Store gets loaded but menu is not populated.