PDA

View Full Version : Why done my Filter now showing up in the column hedder ?



iflow
21 Mar 2012, 12:16 PM
I have added



filters:[{ type:'list',
dataIndex:'phone',
options:['extra small', 'small', 'medium', 'large', 'extra large'
]
}]


But still it does not show up, may be I am adding at the wrong place ?






Ext.application({
name:'Hello Filter',

launch:function () {

Ext.create('Ext.data.Store', {
storeId:'simpsonsStore',
fields:['name', 'email', 'phone'],
data:{'items':[
{ 'name': 'Lisa', "email":"[email protected]", "phone":"555-111-1224" },
{ 'name': 'Bart', "email":"[email protected]", "phone":"555-222-1234" },
{ 'name': 'Homer', "email":"[email protected]", "phone":"555-222-1244" },
{ 'name': 'Marge', "email":"[email protected]", "phone":"555-222-1254" }
]},
proxy: {
type: 'memory',
reader: {
type: 'json',
root: 'items'
}
}
});

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:'Phone', dataIndex:'phone', filterable:true,
filters:[
{ type:'list',
dataIndex:'phone',
options:['extra small', 'small', 'medium', 'large', 'extra large'
]
}
]
}
],
height:200,
width:400,
renderTo:Ext.getBody()
});
}
});

ErnestoR
21 Mar 2012, 1:31 PM
It should look something like this..



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:'Phone', dataIndex:'phone', filterable:true}
],
features: [{
ftype: 'filters',
// Filters are most naturally placed in the column definition, but can also be
// added here.
filters: [
{
type:'list',
dataIndex:'phone',
options:[
'extra small',
'small',
'medium',
'large',
'extra large'
]
}
]
}],
height:200,
width:400,
renderTo:Ext.getBody()
});

iflow
22 Mar 2012, 11:26 AM
That did not work. I keep getting

filters.js not found

Jay

ErnestoR
22 Mar 2012, 2:15 PM
Filter.js is a UX (custom component) it is not loaded by default by the framework!!

If you see the example you'll see that its located in examples/ux/grid/ you need to load those files including the css.

There is two ways of achieving this:
Method 1:
Load the filter.js and depending js in your html with script tags.

Method 2:
Configure your Ext.Loader with a path
Example:
Ext.Loader.setPath('Ext.ux', '../ext/src/ux');

Hope this helps!!
Cheers