如何在表单提交时加载 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

使用宽恕注释并设置自动加载：true

和

更新了显示网格方法，如下所示

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);
            }

并且网格得到正确填充。