如何在表單提交上加載extjs 4網格數據？

Question

我是ExtJS的新手。

我正在開發一個頁面，其頂部有一個表格，下面有一個網格。 當用戶在表單中輸入搜索條件並輸入提交時，網格必須相應地填充數據。

我已設法從服務器獲取JSON數據到客戶端

console.log('response.responseText');

正確打印數據，但無法將其分配給網格。

這是我的代碼

Ext.define('colModel', {
    extend: 'Ext.data.ColumnModel',
    fields: [
             'personId',
             'country',
             'idType',
             'idValue'
             ]
});

// create the data store
var store = Ext.create('Ext.data.ArrayStore', {
    model: 'colModel',
    fields: [
       {name: 'personId'},
       {name: 'country'},
       {name: 'idType'},
       {name: 'idValue'}
    ],
    proxy: {
        type: 'ajax',
        reader: {
            type: 'json',
            root: 'person'
        }
    },

    autoLoad: false,

});
 // create the Grid
var grid = Ext.create('Ext.grid.Panel', {
    store: store,
    stateful: true,
    id: 'myGrid',
    stateId: 'stateGrid',
    columns: [
        {
            text     : 'Person Id',
            flex     : 1,
            sortable : false,
            dataIndex: 'personId'
        },
        {
            text     : 'Country',
            width    : 75,
            sortable : true,               
            dataIndex: 'country'
        },
        {
            text     : 'ID Type',
            width    : 75,
            sortable : true,
            dataIndex: 'idType'
        },
        {
            text     : 'Id Value',
            width    : 75,
            sortable : true,
            dataIndex: 'idValue'
        },            
    ],        
    height: 350,
    title: 'Array Grid',
    renderTo: 'bottom',
    viewConfig: {
        stripeRows: true,
        ForceFit: true,
        loadMask:false
    }
});

從表單提交和從服務器返回響應后調用此函數

displayGrid : function(response, opts) {
                    //Received response from the server
                    console.log('On Success');
                    responseData = Ext.decode(response.responseText);
                    console.log('response success ',responseData);
                    console.log(Ext.getCmp('myGrid').getStore());
                    grid.getStore().loadData('colModel',false);
            }

我已設法使用以下代碼在頁面加載上填充網格數據

var store = Ext.create('Ext.data.ArrayStore', {
                        model: 'colModel',

                        proxy: {
                            type: 'rest',
                            url : 'PersonSearch',
                            reader: {
                                type: 'json',
                                root: 'person'
                            }
                        },
                        autoLoad: true                       
                    });

但無法在表單提交時加載網格數據。

請幫忙。 提前致謝。

PS：我使用的是ExtJS 4.2

更新

這是JSON更新，我從服務器獲取（使用Firefox瀏覽器控制台捕獲）

 "{"person":[{"personId":"1","country":"country 1","idType":"idType 1","idValue":"idValue 1"},{"personId":"2","country":"country 2","idType":"idType 2","idValue":"idValue 2"},{"personId":"3","country":"country 3","idType":"idType 3","idValue":"idValue 3"},{"personId":"4","country":"country 4","idType":"idType 4","idValue":"idValue 4"},{"personId":"5","country":"country 5","idType":"idType 5","idValue":"idValue 5"}]}

“

Answer 1

您實際上並未加載數據。 您的數據存儲在responseData ，因此您的loadData調用應該將該數據加載到存儲中。 因此，您的loadData調用應如下所示：

grid.getStore().loadData(responseData);

請注意，這假定您的responseData的格式正是您要加載的商店的格式。 （另請注意，默認情況下第二個參數為false，因此在這種情況下不必包含它）

Answer 2

使用forgivenson注釋並設置autoLoad：true

和

更新了displayGrid方法，如下所示

displayGrid : function(response, opts) {
                    //Received response from the server
                    console.log('On Success');
                    responseData = Ext.decode(response.responseText,false);
                    console.log(response.responseText);
                    grid.getStore().loadData(responseData.person);
            }

並且網格正確填充。