PDA

View Full Version : Help FilterFeatures (MVC) Breaking View!



jakejamessteele
27 May 2013, 9:41 AM
Application.js:


Ext.Loader.setConfig({ enabled: true,
paths: {
'Ext.ux': '/Scripts/ux',
...
}
});


Ext.require([
...
'Ext.ux.grid.FiltersFeature',
...
]);

View:

features: [
{
...
},
{ ftype: 'filters',
autoReload: true,
local: true
}
],


and in columns



{
xtype: 'datecolumn',
//xtype: 'monthfield',
dataIndex: 'contractDate',
...
filter: {type: 'date'},
format: 'M Y',
...
},


But now that view won't even load. I have the filterfeatures grid folder in the correct path.

What am I doing wrong?

jakejamessteele
27 May 2013, 9:52 AM
Ok now I have switched to the version listed on the API documention.

At the bottom of the view .js I added:


var filtersCfg = {
ftype: 'filters',
autoReload: true, //don't reload automatically
local: true, //only filter locally
// filters may be configured through the plugin,
// or in the column definition within the headers configuration
filters: [{
type: 'date',
dataIndex: 'dateExecuted'
},
{
type: 'date',
dataIndex: 'contractDate'
},
]
};





And then before columns in the view added:


filters: [filtersCfg],

it doesn't break the view, however no filter options show up!?

scottmartin
27 May 2013, 10:53 AM
Please post your questions in Q&A. Plugins is for release notifications.

Try the following:



Ext.Loader.setConfig({
enabled: true
});
Ext.Loader.setPath('Ext.ux', '../../extjs4/examples/ux');

Ext.require([
'Ext.grid.*',
'Ext.data.*',
'Ext.ux.grid.FiltersFeature',
'Ext.toolbar.Paging'
]);

Ext.onReady(function(){

Ext.create('Ext.data.Store', {
storeId : 'simpsonsStore',
fields : ['name', 'email', 'dateExecuted'],
data : {'items' : [
{ 'name' : 'Lisa', 'email' : 'lisa@simpsons.com', 'dateExecuted' : '2013-05-27' },
{ 'name' : 'Bart', 'email' : 'bart@simpsons.com', 'dateExecuted' : '2013-05-27' },
{ 'name' : 'Homer', 'email' : 'home@simpsons.com', 'dateExecuted' : '2013-05-26' },
{ 'name' : 'Marge', 'email' : 'marge@simpsons.com', 'dateExecuted' : '2013-05-25' }
]},
proxy : {
type : 'memory',
reader : {
type : 'json',
root : 'items'
}
}
});

var filtersCfg = {
ftype: 'filters',
autoReload: true,
local: true,
filters: [{
type: 'date',
dataIndex: 'dateExecuted'
}
]
};

Ext.create('Ext.grid.Panel', {
title : 'Simpsons',
store : Ext.data.StoreManager.lookup('simpsonsStore'),
columns : [
{ header : 'Name', dataIndex : 'name' },
{ header : 'Email', dataIndex : 'email', flex : 1 },
{ header : 'Executed', dataIndex : 'dateExecuted'}
],
height : 200,
width : 400,

features: [filtersCfg], // not filters: []

renderTo : Ext.getBody()
});

});


Regards,
Scott.

jakejamessteele
27 May 2013, 10:55 AM
Thanks, I managed to fix it by switching to the grid folder from 4.1.1a apparently my project was on a lower version of extjs then is currently offered and the 4.2 filterfeatures is not compatible.