40

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.

1
  • all of these solutions have one basic problem in EXTjs5 sencha.com/forum/… still dont know if it is bug or feature Commented Aug 20, 2014 at 19:48

15 Answers 15

54

A one-line approach:

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

Not very pretty, but quite short.

Sign up to request clarification or add additional context in comments.

3 Comments

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
This method has been DEPRECTED since 4.0.0
If you are using a version >= 4.0.0 you have to use Ext.Array.pluck docs.sencha.com/extjs/4.2.2/#!/api/Ext.Array-method-pluck
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.

5 Comments

I was looking for Store.getRange().json
@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.
+1 Also, old link is dead. For others' conveneince: docs.sencha.com/extjs/4.2.0/#!/api/…
Jesus! Why getRange() ? Why ?
ok, so you want a 'range' of records, then it returns a 'range' of items... what's not to understand?
9
 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;
    }

Comments

4

Try this:

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

1 Comment

you rewrote the 'pluck' function?
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;

1 Comment

this will get the original store data, not the updated store data that could have been modified since
2

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

Comments

2

Here is another simple clean way:

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

Comments

0

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

store.proxy.reader.jsonData

1 Comment

Well crap the docs say the above is deprecated, though rawData instead (listed immediately below jsonData) might work, but I've not tested it docs.sencha.com/ext-js/4-0/#!/api/…
0

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

Comments

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

4 Comments

A bit of sample code, or a link to an example, would be even better!
should use getters instead of direct references, so above example (already given!?) is best practice.
@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.
just so you know: best practice is the use the getters and setters: some_store.getProxy().getReader().rawData docs.sencha.com/extjs/6.5.3/modern/…
0
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

Comments

0

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

Comments

0

As suggested above I tried below one with fail.

store.proxy.reader.jsonData

But below one worked for me

store.proxy.reader.rawData

Comments

0

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

Comments

0

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

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

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.