How to extract the data from data.store to an array?

Question

here is my xml code:

<?xml version="1.0" encoding="UTF-8"?>
<root>
<investors>
    <investor name="Active"/>
    <investor name="Aggressive"/>
    <investor name="Conservative"/>
    <investor name="Day Trader"/>
    <investor name="Very Active"/>
</investors>    
<events>
    <event period="3 Month Expiry"/>
    <event period="LEAPS"/>
    <event period="Monthlies"/>
    <event period="Monthly Expiries"/>
    <event period="Weeklies"/>
</events>
<prices>
    <price rate="$0.5"/>
    <price rate="$0.05"/>
    <price rate="$1"/>
    <price rate="$22"/>
    <price rate="$100.34"/>
</prices>   
</root>

here is my code:

    Ext.onReady(function(){
                     var hi= [],hello = [], hey = [];
      Ext.getBody().mask(true, '<div class="demos-loading">Loading&hellip;</div>');  
    var tsstore = new Ext.data.Store({    
        url: 'xmlformat.xml',
        autoLoad: true,
        reader: new Ext.data.XmlReader({
               record: 'investor'
           }, [{name: 'name', mapping: '@name'}])
    });

   var evstore = new Ext.data.Store({    
        url: 'xmlformat.xml',
        autoLoad: true,
        reader: new Ext.data.XmlReader({
               record: 'event'
           }, [{name: 'Eve', mapping: '@period'}])
    });

   var prstore = new Ext.data.Store({    
        url: 'xmlformat.xml',
        autoLoad: true,
        reader: new Ext.data.XmlReader({
               record: 'price'
           }, [{name: 'Pri', mapping: '@rate'}])
    });
    var tsgrid = new Ext.grid.GridPanel({
        store: tsstore,
        columns: [{header: "Trading Style", dataIndex: 'name', sortable: true}],
        renderTo:'example-grid',
        width:540,
        height:200
    });
    var evgrid = new Ext.grid.GridPanel({
        store: evstore,
        columns: [{header: "Events", dataIndex: 'Eve', sortable: true}],
        renderTo:'example-gridone',
        width:540,
        height:200
    });
    var prgrid = new Ext.grid.GridPanel({
        store: prstore,
        columns: [{header: "Price", dataIndex: 'Pri', sortable: true}],
        renderTo:'example-gridtwo',
        width:540,
        height:200
    });



hello.push(tsstore.getRange());


});

the data which is stored in the "prstore",i want it to copy it into an array.

i want the output something like:

hello = {"$0.5","$0.05","$1","$22","$100.34"}

but it's not working for me please help thank you

Answer 1

getRange() ought to do it. Make sure the "R" is capitalized.

Assuming that's just a typo in your question, if getRange() isn't returning an array of records, it's likely that your store is not loading records properly. Are you sure your store is loading the records properly? Use firebug to inspect the store after load.

EDIT Looks like you're running getRange() before the store is done loading the data. You're loading the store upon creation (autoLoad:true), but then you're immediately running getRange() (while the XMLHttpRequest is still pending in the background!).

You'll need to listen for the store's load event, and have a handler to manipulate the data.

EDIT2 This Works:

Ext.onReady(function(){
        console.log('hi');
        var prstore = new Ext.data.Store({
                url: 'xmlformat.xml',
                autoLoad: true,
                reader: new Ext.data.XmlReader({
                        record: 'price'
                    }, [{name: 'Pri', mapping: '@rate'}])
            });

        prstore.on('load',function(store,records,opts){                    
                console.log(store.getRange());
            });


    });

You should be able to see an array of Ext.data.Record objects in your firebug console.