1. #1
    Sencha Premium Member
    Join Date
    Sep 2012
    Posts
    91
    Answers
    6
    Vote Rating
    8
    zz9pa is on a distinguished road

      0  

    Default Unanswered: Filtering in grid

    Unanswered: Filtering in grid


    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
    Attached Files

  2. #2
    Sencha - Support Team scottmartin's Avatar
    Join Date
    Jul 2010
    Location
    Houston, Tx
    Posts
    9,078
    Answers
    674
    Vote Rating
    467
    scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future

      0  

    Default


    See if this helps:

    Code:
    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.

  3. #3
    Sencha Premium Member
    Join Date
    Sep 2012
    Posts
    91
    Answers
    6
    Vote Rating
    8
    zz9pa is on a distinguished road

      0  

    Default


    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 ?

  4. #4
    Sencha Premium Member
    Join Date
    Sep 2012
    Posts
    91
    Answers
    6
    Vote Rating
    8
    zz9pa is on a distinguished road

      0  

    Default


    Also does it if I call

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

  5. #5
    Sencha Premium Member
    Join Date
    Sep 2012
    Posts
    91
    Answers
    6
    Vote Rating
    8
    zz9pa is on a distinguished road

      0  

    Default


    nothing ?

Thread Participants: 1

Tags for this Thread