无法使用ajax post请求加载网格

时间:2015-01-22 07:51:25

标签: javascript ajax extjs extjs4

我需要获取一些数据来制作 ajax 请求并使用此数据加载网格(首先是空的),但即使我得到的数据也无法加载到网格。 我做错了什么?

这是我的网格:

               var gridFlightForms = Ext.create('Ext.grid.Panel', {
                id : 'gridFlightForms',
                store : storeFlightFormList,
                width : '100%',
                height : 300,
                collapsible : false,
                multiSelect : false,
                autoScroll : true,
                disableSelection : false,
                monitorWindowResize : true,
                viewConfig : {
                    stripeRows : true,
                    enableTextSelection : true
                },
                title : 'Flight Forms ',
                bbar : Ext.create('Ext.ux.statusbar.StatusBar', {
                    id : 'gridData-statusbar',
                    defaultText : '',
                    defaultIconCls : 'default-icon',
                }),
                verticalScroller : {
                    xtype : 'paginggridscroller',
                },
                columns : [ {
                    text : '<fmt:message key="common.number.text" />',
                    xtype : 'rownumberer',
                    width : 40,
                    sortable : false
                }, {
                    text : 'Form Id',
                    menuDisabled : true,
                    dataIndex : 'formId',
                    width : 150,
                }, {
                    text : 'Form no',
                    menuDisabled : true,
                    dataIndex : 'formNo',
                    width : 150,
                }, {
                    text : 'Form Type',
                    menuDisabled : true,
                    dataIndex : 'formType',
                    width : 150,
                }, {
                    text : 'Flight Id',
                    menuDisabled : true,
                    dataIndex : 'flightId',
                    width : 150,
                }, {
                    text : 'Revision',
                    menuDisabled : true,
                    dataIndex : 'revision',
                    width : 150,
                }, {
                    text : 'IsLiex',
                    menuDisabled : true,
                    dataIndex : 'isLiex',
                    width : 150,
                }, {
                    text : 'IsPrimary',
                    menuDisabled : true,
                    dataIndex : 'isPrimary',
                    width : 150,
                }, {
                    text : 'Step Number',
                    menuDisabled : true,
                    dataIndex : 'stepNumber',
                    width : 150,
                } ]
            });

和我的商店:

  var storeFlightFormList = Ext.create('Ext.data.Store', {
    model : flightListModelName,
    autoLoad : false,
    proxy : {
        type : 'ajax',
        actionMethods : {
            read : 'POST'
        },
        reader : {
            type : 'json',
            root : 'data'
        },
        api : {
            read : flightFormListUrl
        }
    },
    listeners : {
        load : function(store, records) {
        }
    }
});

该部分正在发布并尝试将数据加载到网格。我认为这部分是错误的。

实际上,当我调试它时,我可以在 resp.data 中看到数据,但我不能像之前提到的那样存储它。

postDataAsParamsINN(
                                                                            {flightId : flightId},flightFormListUrl,function(resp) {
                                                                                gridFlightForms.setLoading(true,true);
                                                                                storeFlightFormList.loadRawData(resp.data,false);
                                                                             });                                                                                                                                        
                                                                    Ext.getCmp('gridFlightForms').getStore().load();

我非常擅长extjs,提前谢谢。

1 个答案:

答案 0 :(得分:0)

我不太确定postDataAsParamsINN应该做什么,你不应该自己加载数据。

fiddle演示了一个使用JSON存储的工作网格。

以下是代码:

Ext.application({
    name: 'Fiddle',

    launch: function() {
        var store = Ext.create('Ext.data.JsonStore', {
            storeId: 'simpsonsStore',
            fields: ['name', 'email', 'phone'],
            autoLoad: true,
            proxy: {
                type: 'ajax',
                url: 'data1.json',
                reader: {
                    type: 'json',
                    rootProperty: 'characters'
                }
            },
            listeners: {
                load: function() {
                    console.log(this);
                }
            }
        });

        Ext.create('Ext.grid.Panel', {
            title: 'Simpsons',
            store: store,
            columns: [{
                text: 'Name',
                dataIndex: 'name'
            }, {
                text: 'Email',
                dataIndex: 'email',
                flex: 1
            }, {
                text: 'Phone',
                dataIndex: 'phone'
            }],
            height: 200,
            width: 400,
            renderTo: Ext.getBody()
        });
    }
}); 

将商店绑定到网格后,它会自动使用加载到商店中的任何信息填充网格,并在商店更新时刷新。