CODEWITHSUNDEEP
extjs
sctskw
sctskw

Reputation: 1598

How to retrieve JSON Data Array from ExtJS Store

Is there a method allowing me to return my stored data in an ExtJS Grid Panel exactly the way I loaded it using:

var data = ["value1", "value2"]
Store.loadData(data);

I would like to have a user option to reload the Grid, but changes to the store need to be taken into account. The user can make changes and the grid is dynamically updated, but if I reload the grid, the data that was originally loaded is shown even though the database has been updated with the new changes. I would prefer not to reload the page and just let them reload the grid data itself with the newly changed store.

I guess I'm looking for something like this:

var data = Store.getData();
//data = ["value1", "value2"]

after its all said and done. Or is there a different way to refresh the grid with new data that I am not aware of. Even using the proxy still uses the "original" data, not the new store.

Upvotes: 39

Views: 115455

Answers (15)

M.A.K. Ripon
M.A.K. Ripon

Reputation: 2148

Try this one line code it worked for me like charm:

var data = (store.getData().getSource() || store.getData()).getRange();

Upvotes: 0

PST
PST

Reputation: 131

In my case I wanted a javascript jagged array e.g. [["row1Cell1", "row1cell2"],["row2Cell1", "row2cell2"]] based on the contents of the Ext grid store.

The javascript as below will create such an array, dropping the id key in the object which I didn't need.

var tableDataArray = [];
Ext.ComponentQuery.query('[name="table1"]')[0].store.each(function(record){
    var thisRecordArray = [];
    for (var key in record.data) {
        if (key != 'id') {
            thisRecordArray.push(record.data[key]);
        }
    }
    tableDataArray.push(thisRecordArray);
});

Upvotes: 0

Ravi MCA
Ravi MCA

Reputation: 2631

As suggested above I tried below one with fail.

store.proxy.reader.jsonData

But below one worked for me

store.proxy.reader.rawData

Upvotes: 0

Mahmoud Moravej
Mahmoud Moravej

Reputation: 9042

If you want to get the data exactly like what you get by Writer (for example ignoring fields with persist:false config), use the following code (Note: I tested it in Ext 5.1)

  var arr = [];   

    this.store.each(function (record) {
        arr.push(this.store.getProxy().getWriter().getRecordData(record))
    });

Upvotes: 0

Medini Patki
Medini Patki

Reputation: 1

proxy: {
        type: 'ajax',
        actionMethods: {
            read: 'POST',
            update: 'POST'
        },
        api: {
            read: '/bcm/rest/gcl/fetch',
            update: '/bcm/rest/gcl/save'
        },
        paramsAsJson: true,
        reader: {
            rootProperty: 'data',
            type: 'json'
        },
        writer: {
            allowSingle: false,
            writeAllFields: true,
            type: 'json'
        }
    }

Use allowSingle it will convert into array

Upvotes: 0

Automatix
Automatix

Reputation: 788

A one-line approach:

var jsonData = Ext.encode(Ext.pluck(store.data.items, 'data'));

Not very pretty, but quite short.

Upvotes: 54

PatlaDJ
PatlaDJ

Reputation: 1249

You don't need to make any loops and collect/reprocess data. The json object you need is here:

var jsonData = store.proxy.reader.jsonData;

Upvotes: 3

Rocco
Rocco

Reputation: 187

Here is another simple clean way:

var jsonArr = [];
grid.getStore().each( function (model) {
    jsonArr.push(model.data);
});

Upvotes: 2

Martin Zeitler
Martin Zeitler

Reputation: 76807

I always use store.proxy.reader.jsonData or store.proxy.reader.rawData

For example - this return the items nested into a root node called 'data':

var some_store = Ext.data.StoreManager.lookup('some_store_id');
Ext.each(some_store.proxy.reader.rawData.data, function(obj, i){
   console.info(obj);
});

This only works immediately after a store read-operation (while not been manipulated yet).

Upvotes: 0

Li0liQ
Li0liQ

Reputation: 11264

Store.getRange() seems to be exactly what you are searching for. It will return you Ext.data.Record[] - array of records. If no arguments is passed, all the records are returned.

Upvotes: 53

Yasser Farghaly
Yasser Farghaly

Reputation: 41

Try this:

myStore.each( function (model) {
    console.log( model.get('name') ); 
});

Upvotes: 4

Shashwat
Shashwat

Reputation: 2668

A simple way to do this is

var jsonArray = store.data.items

So if your JSON store is

[{"text": "ABC"}, {"text": "DEF"},{"text": "GHI"},{"text": "JKL"}]

Then you can retreive "DEF" as

jsonArray[1].data.text

In the following code, I noticed that it converts each and every character into an array item.

var jsonData = Ext.encode(Ext.pluck(store.data.items, 'data'));

Upvotes: 2

Danny
Danny

Reputation: 415

I run into my share of trouble trying to access data from store without binding it to a component, and most of it was because store was loaded trough ajax, so it took to use the load event in order to read the data. This worked:

store.load();
store.on('load', function(store, records) {
    for (var i = 0; i < records.length; i++) {
    console.log(records[i].get('name'));
    };
});

Upvotes: 0

Dexygen
Dexygen

Reputation: 12561

A better (IMO) one-line approach, works on ExtJS 4, not sure about 3:

store.proxy.reader.jsonData

Upvotes: 0

Jakofff
Jakofff

Reputation: 91

 function getJsonOfStore(store){
        var datar = new Array();
        var jsonDataEncode = "";
        var records = store.getRange();
        for (var i = 0; i < records.length; i++) {
            datar.push(records[i].data);
        }
        jsonDataEncode = Ext.util.JSON.encode(datar);

        return jsonDataEncode;
    }

Upvotes: 9

Related Questions