PDA

View Full Version : Filtering in grid



zz9pa
5 Oct 2012, 6:33 AM
I'm trying to get a grid with filtering - but its eluding me...

I'm subclassing to create a new grid with some extra features - and thats most likely causing the issue

Anyway - I've tried adding the filtering to my grid - and added the filtering to the data columns - but nothing is appearing when I click on the column headers..

var filtersCfg = {
ftype: 'filters',
local: true, //only filter locally
filters : [
{dataIndex: 'AccountTypeID', type:'numeric'},
{dataIndex: 'Code', type:'string'}
]
};

...
Ext.define('Maintain.Grid', {
extend: 'Ext.grid.Panel',
alias: 'widget.MaintainGrid',


requires: [
'Ext.grid.plugin.CellEditing',
'Ext.form.field.Text',
'Ext.toolbar.TextItem'
],


initComponent: function () {
this.editing = Ext.create('Ext.grid.plugin.CellEditing', { clicksToEdit: 1 });
Ext.apply(this, {
plugins: [this.editing],
features: filtersCfg,
viewConfig: {
stripeRows: true,
autoFill: false,
forceFit: true
},
features: [ filtersCfg ]
});
this.callParent();
}


});


I've tried with putting the dataIndexes in the 'filters' and on the column definitions - but I must be doing something stupid...



I've attached an example cut from some much much larger code - but hopefully should be selfcontained except for the ext.js itself - it should be a .html - but the uploader didnt like the extension B)


Many thanks in advance

scottmartin
5 Oct 2012, 11:39 AM
See if this helps:



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'
]);

var filtersCfg = {
ftype: 'filters',
autoReload: false,
local: true,
filters: [
{ type: 'string', dataIndex: 'name' },
{ type: 'string', dataIndex: 'email' },
{ type: 'numeric', dataIndex: 'change', minValue: 1 }]
};

Ext.define('App.MyStore', {
extend: 'Ext.data.Store',
fields: ['name', 'email', 'phone'],
data: [
{ '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" }
]
});

Ext.define('App.MyGrid', {
extend: 'Ext.grid.Panel',
alias: 'widget.mygrid',
title: 'Simpsons',
width: 500,
minHeight: 50, // 50: still displays all 3 rows, 300; grid is 300px
initComponent: function () {
this.store = Ext.create('App.MyStore');
this.features = [ filtersCfg ];
this.callParent(arguments);
},
columns: [
{ header: 'Name', dataIndex: 'name' },
{ header: 'Email', dataIndex: 'email', flex: 1 },
{ header: 'Phone', dataIndex: 'phone' }
]
});

Ext.onReady(function(){

Ext.widget('mygrid', {
title: 'First Panel',
// features: [ filtersCfg ], // or you can call in instance
renderTo: Ext.getBody()
});

});


Scott.

zz9pa
8 Oct 2012, 9:35 AM
Ok - I think my original file might not be exhibiting the same problem as my actual code..
It seems in my real code - I have a function to show/hide some system columns (last updated date etc), this calls something like :

for (var a=0;a<columns.length;a++) {
if (allow(columns[a])) {
columns[a].show();
} else {
columns[a].hide();
}
}

If I comment that call out - it all seems to work...


Is it possible that that is breaking it, or is this just some random side effect ?

zz9pa
9 Oct 2012, 1:50 AM
Also does it if I call

grid.columns[a].setVisible(true);
or
grid.columns[a].setVisible(false);

zz9pa
16 Oct 2012, 9:00 AM
nothing ?