How to retrieve JSON Data Array from ExtJS Store

Question

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.

all of these solutions have one basic problem in EXTjs5 http://www.sencha.com/forum/showthread.php?290444-store.getData%28%29-returns-quot-id-quot-elment-in-model-data-bug&p=1061271 still dont know if it is bug or feature — mcmatak, Aug 20 '14 at 19:48

score 54 · Answer 1 · edited Oct 06 '14 at 06:11

54

A one-line approach:

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

Not very pretty, but quite short.

edited Oct 06 '14 at 06:11

Navnath Godse

2,233
2
23
32

answered Apr 18 '11 at 21:23

Automatix

789
7
7

it working for 3.3.1 as well - is in documentation - I since I found this post I use it with full success and consider it pretty – bensiu Sep 19 '11 at 02:46
This method has been DEPRECTED since 4.0.0 – Darin Kolev May 22 '14 at 15:36
If you are using a version >= 4.0.0 you have to use Ext.Array.pluck http://docs.sencha.com/extjs/4.2.2/#!/api/Ext.Array-method-pluck – monstergold Jun 03 '14 at 14:39

Li0liQ · Accepted Answer · 2013-05-22T20:10:12.750

53

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.

edited May 22 '13 at 20:10

answered Mar 26 '10 at 21:20

Li0liQ

11,158
35
52

7

I was looking for Store.getRange().json – sctskw Mar 29 '10 at 14:03
4

@user291928 : Honestly, you did not specify the format in which you needed the data and this answer seems to have helped. I suggest you select an answer. – Keylan Apr 19 '11 at 19:25
3

+1 Also, old link is dead. For others' conveneince: http://docs.sencha.com/extjs/4.2.0/#!/api/Ext.data.Store-method-getRange – msanford May 22 '13 at 15:11
1

Jesus! Why `getRange()` ? Why ? – Magno C Feb 06 '17 at 10:43
ok, so you want a 'range' of records, then it returns a 'range' of items... what's not to understand? – Dawesi Sep 29 '18 at 13:08

score 9 · Answer 3 · answered Jul 14 '10 at 20:57

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

score 4 · Answer 4 · edited Nov 19 '12 at 12:08

4

Try this:

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

edited Nov 19 '12 at 12:08

Bruno Vieira

3,884
1
23
35

answered Jun 16 '11 at 23:53

Yasser Farghaly

41
2

1

you rewrote the 'pluck' function? – Dawesi Sep 29 '18 at 13:09

score 3 · Answer 5 · answered Apr 09 '14 at 12:42

3

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;

answered Apr 09 '14 at 12:42

PatlaDJ

1,226
2
17
31

1

this will get the original store data, not the updated store data that could have been modified since – xblitz Jan 20 '15 at 14:49

score 2 · Answer 6 · answered Apr 25 '12 at 09:27

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

score 2 · Answer 7 · answered Nov 07 '13 at 15:32

2

Here is another simple clean way:

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

answered Nov 07 '13 at 15:32

Rocco

187
1
4

Martin Zeitler · Answer 8 · 2013-05-26T06:55:37.293

0

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).

edited May 26 '13 at 06:55

answered May 25 '13 at 15:34

Martin Zeitler

1
19
155
216

A bit of sample code, or a link to an example, would be even better! – Neil Townsend May 25 '13 at 15:55
should use getters instead of direct references, so above example (already given!?) is best practice. – Dawesi Sep 30 '18 at 14:15
@Dawesi the above example implies loading the store (which makes it's proxy load) - vs. accessing the JSON array of any store's proxy, after it had been loaded. best practice still is to read the question, before down-voting correct answers. the store's model and the proxy's JSON array are not the same. – Martin Zeitler Sep 30 '18 at 16:54
just so you know: best practice is the use the getters and setters: `some_store.getProxy().getReader().rawData` https://docs.sencha.com/extjs/6.5.3/modern/Ext.data.reader.Json.html#property-rawData – Dawesi Dec 04 '19 at 08:06

score 0 · Answer 9 · edited Jun 16 '16 at 08:17

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

score 0 · Answer 10 · answered Sep 28 '16 at 09:54

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

score 0 · Answer 11 · answered Sep 18 '17 at 05:51

0

As suggested above I tried below one with fail.

store.proxy.reader.jsonData

But below one worked for me

store.proxy.reader.rawData

answered Sep 18 '17 at 05:51

Ravi MCA

2,491
4
20
30

score 0 · Answer 12 · answered Oct 18 '17 at 11:53

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

score 0 · Answer 13 · answered Nov 17 '19 at 11:45

0

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

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

answered Nov 17 '19 at 11:45

M.A.K. Ripon

2,070
3
29
47

score 0 · Answer 14 · answered Sep 01 '11 at 21:16

0

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

store.proxy.reader.jsonData

answered Sep 01 '11 at 21:16

Dexygen

12,287
13
80
147

Well crap the docs say the above is deprecated, though rawData instead (listed immediately below jsonData) might work, but I've not tested it http://docs.sencha.com/ext-js/4-0/#!/api/Ext.data.reader.Json-property-jsonData – Dexygen Sep 02 '11 at 17:06

score 0 · Answer 15 · answered Apr 02 '12 at 21:33

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

How to retrieve JSON Data Array from ExtJS Store

15 Answers15

Linked