Threaded View

  1. #1
    Sencha User
    Join Date
    Sep 2012
    Posts
    48
    Vote Rating
    0
    eaglefox12 is on a distinguished road

      0  

    Default Answered: Populate Grid Panel On Combobox Select

    Answered: Populate Grid Panel On Combobox Select


    I am trying to fill my grid depending on values selected on combobox on ext 4.1. But I can't get it to work. My combobox has list of States. and depending of which state user chooses, the grid displays more information of that state, like full name, capital, population. This is the store for my grid
    Code:
            var store = Ext.create('Ext.data.Store', {
                autoLoad: true,
                id: 'OurData',
                pageSize: 20,
                pageNumber: 1,
                remoteSort: true,
                fields: [
            { name: 'States' },
            { name: 'FullName' },
            { name: 'Capital' },
            { name: 'Population' }
            ],
                proxy: {
                    type: 'ajax',
                    url: 'GetState/getS',
                    reader: {
                        type: 'json',
                        root: 'myTable',
                       idProperty: 'States',
                        totalProperty: '@count'
                    }
                }
            });
            store.loadPage(1);
    this is my grid
    Code:
            var grid = Ext.create('Ext.grid.Panel', {
                autoScroll: true,
                border: 0,
                store: store,
                columnLines: true,
                //loadMask: true,
                flex: 1,
                layout: {
                    align: 'stretch',
                    align: 'center',
                    type: 'hbox'
                },
                //renderTo: Ext.getBody(),
                columns: [
    
                { header: 'States',
                    sortable: true, dataIndex: 'States', flex: 0.3
                },
                { header: 'Full Name',
                    sortable: true, dataIndex: 'FullName', flex: 0.7
                },
                { header: 'Capital',
                    sortable: true, dataIndex: 'Capital', flex: 0.3
                },
                { header: 'Population', flex: 1,
                    sortable: true, dataIndex: 'Population'
                }
            ],
                renderTo: Ext.getBody(),
                viewConfig: {
                    stripeRows: true
                },
                bbar: Ext.create('Ext.PagingToolbar', {
                    style: 'border:0',
                    store: store,
                    displayInfo: true,
                    preprendButtons: true,
                    displayMsg: 'Displaying Data {0} - {1} of {2}',
                    emptyMsg: "No Data to display"
                })
            });
    and this is my combobox
    Code:
    items: [{                     xtype: 'combo',                     id: 'iccombo',                     scope: this,                     store: combostore,                     mode: 'remote',                     minChars: 0,                     fieldLabel: 'Short State',                     displayField: 'States',                     valueField: 'States',                     typeAhead: true,                     name: 'States',                     labelWidth: 125,                     anchor: '95%',
                        listeners: {
                                scope: this,
                                select: function (combo) {
                                    combo.store.filterBy(function (record) {
                                        return true;
                                    })
                                }
                            }                 },
    and the store for combobox
    Code:
    var combostore = Ext.create('Ext.data.Store', {         autoLoad: true,         id: 'OurData',         scope: this,         fields: [{ name: 'States' }],         proxy: {             type: 'ajax',             url: 'GetState/getS',             reader: {                 type: 'json',                 root: 'myTable'                 idProperty: 'States'             }         }     });

  2. Looking at your code, I saw you do the filtering on combobox store, not grid store. Also, you do the filtering with a function that always return true with every record in store so infact, it will filter nothing.
    Code:
    items: [{
        xtype: 'combo',
        ....
        listeners: {
            scope: this,
            select: function (combo) {
                combo.store.filterBy(function (record) { // <- do the filtering on combobox store, not grid store
                    return true; // <- nothing will be filtered out.
                })
            }
        }
    },
    Try to fix your code as below:
    Code:
       ...
       select: function (combo) {
           store.filter('States', combo.getValue()); // do the filtering on grid store
       }
       ...

Thread Participants: 1

Tags for this Thread

Turkiyenin en sevilen filmlerinin yer aldigi xnxx internet sitemiz olan ve porn sex tarzi bir site olan mobil porno izle sitemiz gercekten dillere destan bir durumda herkesin sevdigi bir site olarak tarihe gececege benziyor. Sitenin en belirgin ozelliklerinden birisi de Turkiyede gercekten kaliteli ve muntazam, duzenli porno izle siteleri olmamasidir. Bu yuzden iste. Ayrica en net goruntu kalitesine sahip adresinde yayinlanmaktadir. Mesela diğer sitelerimizden bahsedecek olursak, en iyi hd porno video arşivine sahip bir siteyiz. "The Best anal porn videos and slut anus, big asses movies set..." hd porno faketaxi