Javascript 如何在表单提交时加载ExtJS4网格数据？

我是ExtJS新手

我正在开发一个页面，上面有一个表单，下面有一个网格。当用户在表单中输入搜索条件并输入Submit时，网格中必须相应地填充数据

我已经设法将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：我正在使用ExtJS4.2

更新

这是我从服务器获得的JSON更新（使用Firefox浏览器控制台捕获）

---

“

您并没有实际加载数据。您的数据存储在

响应数据中，因此您的
加载数据
调用应将该数据加载到存储中。因此，
加载数据
调用应如下所示：

grid.getStore().loadData(responseData);

请注意，这假设您的
响应数据的格式与加载到的存储区的格式正确。（还要注意，默认情况下第二个参数为false，因此在这种情况下无需包含它）
使用宽恕注释并设置自动加载：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);
            }

并且网格被正确填充。
我添加了，但网格没有变化：（因为存储配置了代理，所以可以调用
grid.getStore（）.load（）
使用代理加载数据（就像设置
自动加载：true
）。如果需要根据表单中提交的值筛选加载的数据，则应通过extjs设置筛选器（本地筛选器或远程筛选器）。按照您的建议进行了更新，但网格仍然没有填充。我在问题中添加了来自服务器的JSON响应，供您参考。得到了不同方向的答案，这是我没有预料到的。您的评论自动加载：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);
            }