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

并正确填充网格。

如何在表单提交上加载extjs 4网格数据？

2 个答案: