ExtJS4 Обновить сетку Панель в обработчике кнопок - PullRequest
Новая
       5

ExtJS4 Обновить сетку Панель в обработчике кнопок

1 голос
/ 13 марта 2012

Я работаю с ExtJS4 и пытаюсь создать функцию поиска, используя форму.У меня отображается форма, и пользователь вводит один из 4 критериев и нажимает кнопку Поиск, затем строится сетка и отображаются результаты вызова JSON.

Я пытаюсь добиться того, чтобыПользователь может ввести другие критерии поиска и снова щелкнуть Поиск, чтобы обновить сетку, чтобы показать новые результаты.В моей первой попытке сетка отображается для каждого клика Поиск, а во второй - просто помещает результаты поиска в сетку, не удаляя предыдущие записи.

Вот мои текущие настройки: 

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

});
});

Я пытался обновить сетку и вызывать load (), но я не думаю, что я выбрал правильную комбинацию.Я бы хотел, чтобы содержимое сетки было заменено на содержимое последнего вызова ajax в /search.

Ответы [ 2 ]

2 голосов
/ 13 марта 2012

Не следует создавать новую панель и хранилище при каждом нажатии кнопки поиска, поэтому уберите ее из обработчика кнопок. Если вы просто вызовите load ({params: {search: 'what'}}) в хранилище сетки, когда пользователь нажмет кнопку поиска, вы получите новые данные, заполненные в вашей сетке автоматически. Вам не нужно перенастраивать сетку или делать что-то еще. По сути, сетка привязана к хранилищу, и когда данные хранилища изменятся, представление за сеткой автоматически обновится.

0 голосов
/ 13 марта 2012

Я решил это, следуя некоторым советам DmitryB.Я унаследовал этот код и после некоторого массажа я получил его работать как задумано.Ниже мое окончательное решение.В функции обработчика на кнопке вы должны быть уверены и обновлять URL прокси, определенного в хранилище, чтобы при вызове store.load () он был корректным. 

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
        }],
    })
});
...