Filtering in grid

[zz9pa]

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


Many thanks in advance

[scottmartin]

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": "lisa@simpsons.com", "phone": "555-111-1224" },
        { 'name': 'Bart', "email": "bart@simpsons.com", "phone": "555-222-1234" },
        { 'name': 'Homer', "email": "home@simpsons.com", "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]

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]

Also does it if I call

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

[zz9pa]

nothing ?