Search code examples
jsonextjsextjs4

Appending JSON array to existing Extjs datastore grid panel


I need a simple example to reload the datastore of the Extjs grid, the basic requirement is to append Extjs json data store with another json array. please help me to complete this code to load the data2 (json object) in the Extjs Grid panel.

        Ext.onReady(function () {
            var store = Ext.create('Ext.data.Store', {
                storeId: 'employeeStore',
                fields: ['name', 'seniority', 'department'],
                groupField: 'department',
                data: {
                    'employees': [{
                        "name": "Michael Scott",
                        "seniority": 7,
                        "department": "Management"
                    }, {
                        "name": "Dwight Schrute",
                        "seniority": 2,
                        "department": "Sales"
                    }, {
                        "name": "Jim Halpert",
                        "seniority": 3,
                        "department": "Sales"
                    }, {
                        "name": "Kevin Malone",
                        "seniority": 4,
                        "department": "Accounting"
                    }, {
                        "name": "Angela Martin",
                        "seniority": 5,
                        "department": "Accounting"
                    }, {
                        "name": "Angela Martin",
                        "seniority": 5,
                        "department": "Accounting"
                    }]
                },
                proxy: {
                    type: 'memory',
                    reader: {
                        type: 'json',
                        root: 'employees'
                    }
                }
            });
            Ext.create('Ext.grid.Panel', {
                title: 'Employees',
                store: Ext.data.StoreManager.lookup('employeeStore'),
                columns: [{
                    text: 'Name',
                    dataIndex: 'name'
                }, {
                    text: 'Seniority',
                    dataIndex: 'seniority'
                }, {
                    text: 'department',
                    dataIndex: 'department'
                }],

                width: 520,
                height: 275,
                renderTo: Ext.getBody()
            });

            var data2 = {
                'employees': [{
                    "name": "User1",
                    "seniority": 7,
                    "department": "Management"
                },{
                    "name": "User2",
                    "seniority": 7,
                    "department": "Management"
                }]
            };

        });

Solution

  • Ext.getStore('employeeStore').add(data2.employees);
    

    Check Ext.data.Store#add documentation for more info.

    Note: Ext.getStore() is a shortcut to Ext.data.StoreManager.lookup().