无法使用 extjs4 读取和设置 Json 数据

Couldnt read and set Json data with extjs4

本文关键字：设置 Json 数据读取 extjs4 更新时间：2023-09-26

我想在extjs中读取json数据，这是我下面的代码。

我做错了什么？我在Extjs很新。

我想我无法获得 json 值，或者无法在面板上正确写下它。

提前谢谢。

Ext.require([ 'Ext.grid.*', 'Ext.data.*', 'Ext.dd.*' ]);
    var urlGetName = '${ctx}/main/list';

    Ext.define('DataObject', {
        extend : 'Ext.data.Model',
        fields : [ 'name' ]
    });

    var storeName = Ext.create('Ext.data.Store',{   
        model:'DataObject',
        autoLoad : false,
        proxy : {
            type : 'ajax',
            actionMethods: {
                read: 'GET'
            },
                reader : {
                    type : 'json',
                    root: 'data',
                },
                api : {
                     read: urlGetName
                }
        },listeners: {
            load: function(store, records) {
                        dataa =store.getAt(0).get('data');
            }
        }
    });
    Ext.onReady(function() {
        var firstGridStore = Ext.create('Ext.data.Store', {
            model : 'DataObject',
            data : dataa
        });
        var columns = [ {
            text : "Name",
            flex : 1,
            sortable : true,
            dataIndex : 'name'
        } ];
        // declare the source Grid
        var firstGrid = Ext.create('Ext.grid.Panel', {
            multiSelect : true,
            viewConfig : {
                plugins : {
                    ptype : 'gridviewdragdrop',
                    dragGroup : 'firstGridDDGroup',
                    dropGroup : 'secondGridDDGroup'
                },
                listeners : {
                    drop : function(node, data, dropRec, dropPosition) {
                        var urlL = '${ctx}/main/list';
                        var param = data; 
                        postDataAsParamsINN({param:param},urlL,function(resp){
                            var success=resp.success;
                            if(success){
                                Ext.MessageBox.alert('succes', 'bravaa');
                            }else{
                                Ext.MessageBox.alert('error','eroross' );
                            }
                        });
                    }
                }
            },
            store : firstGridStore,
            columns : columns,
            stripeRows : true,
            title : 'First Grid',
            margins : '0 2 0 0'
        });
    });

您不应该使用两个商店来填充另一个商店。删除 FirstGridStore 并改用预定义的远程存储：

// Model
Ext.define('DataObject', {
    extend : 'Ext.data.Model',
    fields : [ 'name' ],
    idProperty: 'name'
});
// Store
var storeName = Ext.create('Ext.data.Store',{   
    model:'DataObject',
    autoLoad: true,
    queryMode: local,
    proxy: {
        type: 'ajax',
        actionMethods: {
            read: 'GET'
        },
        reader: {
            type : 'json',
            root: 'data',
        },
        api: {
            read: urlGetName
        }
    }
});
// Grid
var columns = [{
    text : "Name",
    flex : 1,
    sortable : true,
    dataIndex : 'name'
}];
        // declare the source Grid
var firstGrid = Ext.create('Ext.grid.Panel', {
    multiSelect : true,
    viewConfig : {
        plugins : {
                    ptype : 'gridviewdragdrop',
                    dragGroup : 'firstGridDDGroup',
                    dropGroup : 'secondGridDDGroup'
                },
                listeners : {
                    drop : function(node, data, dropRec, dropPosition) {
                        var urlL = '${ctx}/main/list';
                        var param = data; 
                        postDataAsParamsINN({param:param},urlL,function(resp){
                            var success=resp.success;
                            if(success){
                                Ext.MessageBox.alert('succes', 'bravaa');
                            }else{
                                Ext.MessageBox.alert('error','eroross' );
                            }
                        });
                    }
                }
            },
            store : storeName, // defined store
            columns : columns,
            stripeRows : true,
            title : 'First Grid',
            margins : '0 2 0 0'
        });
    });