ExtJS4 Reload grid Panel in button handler

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.

Answer 2

I got this solved by following some of DmitryB's advice. I inherited this code and after some massaging I got it working as intended. Below is my final solution. In the handler function on the button you need to be sure and update the URL of the proxy defined in the store so that when you call store.load() it's correct.

Ext.require([
    'Ext.form.*',
    'Ext.grid.*',
    'Ext.data.*',
    'Ext.dd.*'
    //'extjs.SlidingPager'
]);

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


Ext.onReady(function(){

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

        defaults: {
            anchor: '100%'
        },

        fieldDefaults: {
            labelAlign: 'left',
            msgTarget: 'none'
        },

        items: [{
            xtype: 'textfield',
            name: 'jobnumber',
            fieldLabel: 'Job Number',
            allowBlank: true,
            minLength: 7,
            maxLength: 7
        }, {
            xtype: 'textfield',
            name: 'accountnumber',
            fieldLabel: 'Account Number',
            allowBlank: true,
            minLength: 6,
            maxLength: 7
        }, {
            xtype: 'textfield',
            name: 'customername',
            fieldLabel: 'Customer Name',
            allowBlank: true,
        }, {
            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: 'button',
                formBind: true,
                id: 'search',
                disabled: true,
                text: 'Search',
                width: 140,
                height: 35,
                handler: function() {
                    store.proxy.url = '/search?' + formPanel.getForm().getValues(true)
                    store.load();
                } // end button handler
            }] //end items
        }] // end dockeditems
    });

    var store = new Ext.data.Store({
        model:'job',
        pageSize:10,
        autoLoad: false,
        remoteSort:true,
        proxy:{
            type:'ajax',
            fields:['job_number', 'account_name', 'account_number', 'contract_year','program','type','version'],
            url: '',
            reader:{
                totalProperty:'totalCount',
                type: 'json',
                root: 'results'
            },
            actionMethods: 'POST'
        }, 
        sorters:[{
            property:'version',
            direction:'ASC'
        }]
    });

    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: 'userGrid',
        multiSelect: false,
        store: store,
        columns: columns,
        stripeRows: true,
        title: 'Results',
        renderTo: 'results',
        dockedItems: [{
            xtype: 'pagingtoolbar',
            store: store,
            dock: 'bottom',
            displayInfo: true
        }],
    })
});