Question

I’m working with ExtJS4 and trying to build a search feature using a form. I’ve got the form displayed and a user enters one of 4 criteria and clicks Search, the grid is then built and shows the results from a JSON call.

What I’m trying to achieve is to allow the user to be able to enter different search criteria and click Search again and have the grid updated to show the new results. In my first attempt the grid is rendered for each click of Search and in my second attempt it simply pushes the results of the search into the grid without removing the previous entries.

Here’s my current setup:

Ext.define('job',{
        extend:'Ext.data.Model',
        fields:['account_name', 'account_number','job_number','contract_year','program','type', 'version']
})

Ext.onReady(function(){

    var formPanel = Ext.widget('form', {
        renderTo: 'search',
        frame: true,
        width: 350,
        bodyPadding: 5,
        bodyBorder: false,
        title: 'Search',

        defaults: {
            anchor: '100%'
        },
        {
            xtype: 'combo',
            name: 'jobyear',
            fieldLabel: 'Job Year',
            store:
                new Ext.data.SimpleStore({
                    fields: ['year'],
                    data: [
                        ['2008'],['2009'],['2010'],['2011'],['2012']
                    ] //end of data
            }),
            displayField: 'year',
            typeAhead: true,
            emptyText: 'Select a year'
        }], //end of items

        dockedItems: [{
            xtype: 'container',
            dock: 'bottom',
            layout: {
                type: 'hbox',
                align: 'middle'
            },
            padding: '10 10 5',

            items: [{
                xtype: 'component',
                id: 'formErrorState',
                baseCls: 'form-error-state',
                flex: 1
            }, {
                xtype: 'button',
                formBind: true,
                id: 'search',
                disabled: true,
                text: 'Search',
                width: 140,
                height: 35,
                handler: function() {
                    var columns = [
                     {xtype: 'rownumberer',sortable: true},
                     {text: 'School Name', sortable:true,dataIndex:'account_name'},
                     {text: 'Acct Number', sortable:true,dataIndex:'account_number'},
                     {text: 'Job Number',sortable:true,dataIndex:'job_number'},
                     {text: 'Version',sortable:true,dataIndex:'version'},
                     {text: 'Contract Year',sortable:true,dataIndex:'contract_year'},
                     {text: 'Program', sortable:true,dataIndex:'program'},
                     {text: 'Job Type', sortable:true,dataIndex:'type'}
                    ]; // end columns

                    var userGrid = new Ext.grid.Panel({
                    id: 'FOO',
                    multiSelect:true,
                    store: store,
                    columns: columns,
                    stripeRows: true,
                    title: 'Results',
                    renderTo: Ext.get('results'),
                    dockedItems: [{
                        xtype: 'pagingtoolbar',
                        store: store,
                        dock: 'bottom',
                        displayInfo: true
                    }],
                    })
                  var form = this.up('form').getForm();
                  var store = new Ext.data.Store({
                        model: 'job',
                        pageSize: 10,
                        autoLoad: true,
                        remoteSort:true,
                        proxy: {
                            actionMethods: {
                                read: 'POST'
                            },
                            type: 'ajax',
                            fields: ['job_number', 'account_name', 'account_number', 'contract_year','program','type','version'],
                            url: '/search?'+ form.getValues(true),
                            reader:{
                                type: 'json',
                                root: 'results',
                                totalProperty: 'totalCount'},
                        }, //end proxy
                        sorters:[{
                            property:'version',
                            direction:'ASC'
                        }]
                    }).on('load', function(){
                         userGrid.reconfigure(this); // ??? 
                         });
            } // end button handler
        }] //end items
    }] // end dockeditems

});
});

I’ve tried refreshing the grid and calling load() but I don’t think I’ve hit yet on the right combination. I’d like the grid contents to be replaced with those from the latest ajax call to /search.

Answer 1

You should not create a new panel and a store on each search button click, so move it out of the button handler. If you just call load({params:{search:’whatever’}}) on the store of the grid when user pushes search button you will get the new data populated in your grid automatically. You don’t need to reconfigure the grid or do anything else. Essentially the grid is bound to the store and when the store data changes the view behind the grid will automatically refresh.