1. #1
    Ext User
    Join Date
    Apr 2009
    Posts
    6
    Vote Rating
    0
    Qwerty123 is on a distinguished road

      0  

    Default [SOLVED]Grid is not being filtered properly by combo selection

    [SOLVED]Grid is not being filtered properly by combo selection


    Hello,

    I am new to Ext JS. I would greatly appreciate some direct help, if you would be so kind.

    The below code gives me a functioning data grid and a combo box. I am trying to use the combo box as a filter. The combo box is listing the items in the array but when I select any of the items in the combo box, the grid data goes blank. So, I assume I don't have things coded quite right and I'm asking the store to return records for some condition that does not exist or even make sense.

    Can you please take a look at this code and help me understand what I need to do to make the selection from my combo box properly filter my Grid?

    Thank you!
    Qwerty123

    Code:
    Ext.onReady(function() {
    
        var store = new Ext.data.Store({
            url: 'sample.aspx',
            reader: new Ext.data.JsonReader()
        });
    
        var grid = new Ext.grid.GridPanel({
            autoScroll: true,
            frame: true,
            style: 'margin-top: 10px',
            cls: '',
            iconCls: 'icon-grid',
            title: 'RDS Load Status and Recon',
            height: 500,
            width: 700,
            loadMask: true,
            hideBbar: false,
            tbar: {},
            plugins: searchPlugin,
            store: store,
    
            columns: [{
                header: 'mdo_id',
                dataIndex: 'MDO_ID'
            },
            {
                header: 'mdo_type_cd',
                dataIndex: 'MDO_TYPE_CD'
            },
            {
                header: 'mdo_inqry_type_cd',
                dataIndex: 'MDO_INQRY_TYPE_CD'
            },
            {
                header: 'mdo_prdctn_efctv_dt',
                dataIndex: 'MDO_PRDCTN_EFCTV_DT'
            },
            {
                header: 'mdo_prdctn_end_dt',
                dataIndex: 'MDO_PRDCTN_END_DT'
            },
            {
                header: 'mdo_nm',
                dataIndex: 'MDO_NM'
            },
            {
                header: 'mdo_imdt_ownr_nm',
                dataIndex: 'MDO_IMDT_OWNR_NM'
            }]
        });
    
        var cbArray = [['About'], ['Site Map'], ['Legal']];
    
        var cbStore = new Ext.data.SimpleStore({
            fields: ['field'],
            data: cbArray
        });
    
        var cb = new Ext.form.ComboBox({
            fieldLabel: 'Filter',
            name: 'field',
            mode: 'local',
            store: cbStore,
            valueField: 'field',
            displayField: 'field',
            triggerAction: 'all',
            listeners: {
                select: function(_this, record, index) {
                    store.filter('field', this.getValue())
                }
    
            }
        });
    
        store.on('load',
        function() {
            //console.log(store);
        });
    
        Ext.Msg.alert(cbStore);
    
        var searchPlugin = new Ext.ux.grid.Search({
            mode: 'local',
            iconCls: 'find',
            dateFormat: 'm/d/Y',
            minLength: 2,
            align: 'right',
            width: 200,
            position: 'top',
            searchText: 'Filter',
            checkIndexes: 'all',
            showSelectAll: true,
            // disableIndexes: ['ID'],
            minChars: 2,
            autoFocus: false
        });
    
        // put it in a Panel so it looks pretty
        var panel = new Ext.Panel({
            id: 'records-view',
            width: 750,
            height: 300,
            collapsible: true,
            layout: 'fit',
            title: 'Select value to filter records by:',
            items: [cb, grid] //listView
        });
        panel.render(document.body);
    
    });
    Last edited by Qwerty123; 28 Apr 2009 at 4:50 PM. Reason: Formatting the code sample, at the request of an Ext forum member, and slightly rewording title.

  2. #2
    Sencha User carol.ext's Avatar
    Join Date
    Jun 2007
    Location
    Littleton, Colorado, USA
    Posts
    698
    Vote Rating
    28
    carol.ext has a spectacular aura about carol.ext has a spectacular aura about

      0  

    Default


    Take a look at the help guide. Post your code in code tags.

    The section before that ones points out the buttons to use for code formatting. Use the preview button to verify the code is nicely formatted and readable.

  3. #3
    Ext User
    Join Date
    Apr 2009
    Posts
    6
    Vote Rating
    0
    Qwerty123 is on a distinguished road

      0  

    Default


    Sorry. I have now formatted the code. I've been looking at all kinds of examples and tutorials but I just can't seem to figure it out. I greatly appreciate your assistance.

    Thank you,
    Qwerty123

  4. #4
    Sencha User carol.ext's Avatar
    Join Date
    Jun 2007
    Location
    Littleton, Colorado, USA
    Posts
    698
    Vote Rating
    28
    carol.ext has a spectacular aura about carol.ext has a spectacular aura about

      0  

    Default


    I do not see where you have defined the fields (or record) for the grid's store reader. Perhaps you left some code out. Do you have a field called 'field' to filter on?

    Code:
        
    var store = new Ext.data.Store({
        url: 'sample.aspx',
        reader: new Ext.data.JsonReader()
    });

  5. #5
    Ext User
    Join Date
    Apr 2009
    Posts
    6
    Vote Rating
    0
    Qwerty123 is on a distinguished road

      0  

    Default


    The fields are defined under the section, "var grid = new Ext.grid.GridPanel({" in the following manner...

    Code:
     
    columns: [{
                header: 'mdo_id',
                dataIndex: 'MDO_ID'
            },
            {
    Is this what you are reffering to? Probably not... My grid populates with data just fine, so does that mean I must have defined the fields for the reader properly? You can see how new I am to this...

    And no, thanks for pointing it out, I don't have a field named "field", but I've tried referencing an actual field that exists, as in the below example, and it does not work either. "mdo_nm" is the field that contains that values you see in my array. I had it this way once before, and when it didn't work, I put it back the way you see it in my first posting, which is like the example I referencing. But it does seem that I need to have it like I show here in this post, using "mdo_nm". But I wonder why it does not work now, even though I am specifying "mdo_nm"? Any ideas of what I'm missing?

    Code:
     
    
    var cbArray = [['About'], ['Site Map'], ['Legal']]; var cbStore = new Ext.data.SimpleStore({ fields: ['mdo_nm'], data: cbArray });
    var cb = new Ext.form.ComboBox({ fieldLabel: 'Filter', name: 'mdo_nm', mode: 'local', store: cbStore, valueField: 'mdo_nm', displayField: 'mdo_nm', triggerAction: 'all', listeners: { select: function(_this, record, index) {store.filter('mdo_nm', this.getValue()) } } });

  6. #6
    Sencha - Community Support Team Condor's Avatar
    Join Date
    Mar 2007
    Location
    The Netherlands
    Posts
    24,246
    Vote Rating
    96
    Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of

      0  

    Default


    Aren't you missing:
    Code:
    var store = new Ext.data.Store({
    	url: 'sample.aspx',
    	reader: new Ext.data.JsonReader({
    		fields: [
    			'MDO_ID',
    			'MDO_TYPE_CD',
    			'MDO_INQRY_TYPE_CD',
    			'MDO_PRDCTN_EFCTV_DT',
    			'MDO_PRDCTN_END_DT',
    			'MDO_NM',
    			'MDO_IMDT_OWNR_NM'
    		]
    	})
    });
    (or are you sending metadata from the server?)

    And your field is called MDO_NM and not mdo_nm.

  7. #7
    Ext User
    Join Date
    Apr 2009
    Posts
    6
    Vote Rating
    0
    Qwerty123 is on a distinguished road

      0  

    Smile


    THANK YOU!!! Yes, I do believe I'm getting metadata from the server. I don't completely understand what that means just yet, but I seem to remember the developer who gave me the sample.aspx file said something about including metadata. Also, I just tried changing all my references to "mdo_nm" to "MDO_NM" and now the filter works! Thank you VERY much! What a great feeling to see it work.

    Carol.ext -- thank you as well. You have both helped me immensely. I hope to be as smart as you someday and help someone with Ext JS. I've got a long way to go!

    THANK YOU!
    Jim

Thread Participants: 2