CODEWITHSUNDEEP
extjsgrid
insanity
insanity

Reputation: 1178

How to find grid array in the browser ExtJs

Suppose if i have created a grid store like this 

var store = Ext.create('Ext.data.ArrayStore', {
fields:['id','title', 'director', 'released', 'genre','tagline', 'price', 'available'],
data: [
        [
            1,
            "Office Space",
            "Mike Judge",
            "1999-02-19",
            1,
            "Work Sucks",
            "19.95",
            1
        ],
        [
            3,
            "Super Troopers",
            "Jay Chandrasekhar",
            "2002-02-15",
            1,
            "Altered State Police",
            "14.95",
            1
        ]
    ]
});

when i run it on browser i could not see anything because it has already been saved in the browser's memory , we need to display it to the the grid to see those data.

if i am editing the grid in the browser using editors plugin, so how can i see the changes made to the grid store? how to see it ?

Upvotes: 1

Views: 100

Answers (2)

Alexander.Berg
Alexander.Berg

Reputation: 2245

  1. You can add storeId to the store and then you can use the following global function: Ext.StoreManager.lookup('storeId'); with this function you can always get the store from anywhere.

  2. the gridpanel has the edit( editor, e, eOpts ) event which can be used after editing is complete.

Example:

var store = Ext.create('Ext.data.ArrayStore', {
    storeId: 'gridStore',
    (...)
});

var grid = Ext.create('Ext.grid.Panel', {
    store: store,
    (...),  
    listeners: {
        edit: function(editing, e, eOpts) {
            var record = e.record;
            console.log('Changes on this record: ', e.record.getChanges());         
            console.log('Original value: ', (editing.ptype == 'cellediting' ? e.originalValue : e.originalValues));
            console.log('New value: ', (editing.ptype == 'cellediting' ? e.value : e.newValues));           
        }
    }

});

//for save on a toolbar
var button = Ext.create('Ext.button.Button', {
    text: 'Save',
    (...),
    handler: function() {
        var gridStore = Ext.StoreManager.lookup('gridStore');
        console.log('all added, but not synchronized records: ', gridStore.getNewRecords());
        console.log('all edited, but not synchronized records: ', gridStore.getUpdatedRecords());
        console.log('all modified(added and edited), but not synchronized records:', gridStore.getModifiedRecords());
        console.log('all removed, but not synchronized records:', gridStore.getRemovedRecords());
    }
});

Upvotes: 1

ImShogun
ImShogun

Reputation: 72

I'd say it depend.

First, to display you store in a grid, it should be something like this (simplified), following your code:

var grid = Ext.create('Ext.grid.Panel', {
    title: 'Test',
    store: store,
    columns: [
        { text: 'title',  dataIndex: 'title' },
        { text: 'director', dataIndex: 'director', flex: 1 }
    ],
    height: 200,
    width: 400
});
var MyWindow = Ext.create('widget.window',{width:400,height:200,items:[grid]});
MyWindow.show();

You assigned your store to a local variable "store". Normaly, if you use that store in a grid, and you make changes in that grid, it should reflect in the store.

When you make it editable with the editable grid plugin, changes are directly writen in the store, so this should work:

var currentStoreContent = store.data.items;

or, from the grid:

var currentStoreContent = grid.getStore().data.items

Upvotes: 1

Related Questions