Couldnt read and set Json data with extjs4

Question

I want to read json data in extjs here is my code below.

What i'm doing wrong ? I'm pretty new at Extjs.

I think i couldn't get the json value, or couldn't properly write it down on panel.

Thanks in advance.

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

Answer 1

You shouldn't use two stores to fill the one with the other. Delete the FirstGridStore and use the predefined remote store instead:

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