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

Could not load the grid with ajax post request

本文关键字：请求加载网格 post ajax 更新时间：2023-09-26

我需要通过发出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) {
        }
    }
});

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

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

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

我对extjs很陌生，提前谢谢。

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

此小提琴演示了一个使用 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()
        });
    }
});

将商店绑定到网格

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