How to delay the display until the data is parsed?

i'm facing a small problem in parsing the data to the panel, here is my code:

Ext.onReady(function(){   

var stockings = [],i=0;
Ext.regModel('Carding', {fields: ['price'] });
var Detailsstore = new Ext.data.Store({
           model: 'Carding',
           proxy: {
               type: 'ajax',
               url: 'http://192.168.1.92/testapp/websample%20backup/sample/assets/www/XMLS/xmlformatses.xml',
               reader: {
                   type: 'xml',
                   record: 'root'
                }
            },
            listeners: {
                single: true,
                datachanged: function(){
                  Detailsstore.each(function(r){
     stockings[i++]=r.get('price');
                    });
                alert(stockings[3]);//This alert works f开发者_C百科ine
                }
            }    
        });

 Detailsstore.read();

    alert(stockings[3]);//this alert even being placed after the Detailsstore it shows undefined . . . . .

  var showdetails = new Ext.Panel({
     scroll :'vertical',
     flex:7,
     renderTo: 'bubbleCt',
     baseCls: 'kiran',
     stretchX: true,
     html: '<span style="color:#fff; font-size:20px;"><span style="font-size:25px; font-weight: bold;">' + stockings[2] + '</span><br/><br/><span style="font-weight:bold;">Trading Action Plan :</span><br/>&bull; Buy Price: 1 <br/>&bull; Sell Price:2<br/>&bull; Stop Price 80 cents<br/>&bull; Rule: Sell 50% on double <br/>&bull; 6% Trailing Stop Loss on stock<br/><br/><span style="font-weight:bold;">Volatility Analysis:</span><br/>&bull; <br/>&bull; <br/>&bull; <br/><br/><span style="font-weight:bold;">Techincal  Analysis:</span><br/>&bull; <br/>&bull; <br/>&bull; <br/><br/><span style="font-weight:bold;">Fundamental Analysis:</span><br/>&bull; <br/>&bull; <br/>&bull; <br/></span>',
           });

    var detailspanel = new Ext.Panel({
                fullscreen: true,
             padding:1,
             layout: {
                      type: 'vbox',
                      pack: 'center',
                      align: 'stretch'
                  },
                items: [showdetails]
             });
    });

The problem above is that wen i try to run the code first the second alert is taking place and showing the undefined.........

my goal is to parse the data and show it into the panel .

But i think the problem is that the panel is being displayed even before the the store completes it's operation the first alert is working fine and displaying the value in it but that operation is happening after the panel is displayed already

please help

Thank you . . . ..

Your Ext.data.Store is being loaded up by an asynchronous request to your server. It doesn't block the execution of JavaScript, so it makes the request, but doesn't wait for the data to get back before continuing on to the rest of your script (i.e. the alert, your panel, etc).

When the store loads, it will fire the event 'load'. When you get this event, THAT's when you want to make your panels, etc.

   Detailsstore.on('load', function() {
       // do everything here.
       // var showdetails = new Ext.Panel({ ...
       // var detailspanel = new Ext.Panel({ ...
    });
    Detailsstore.read(); // <-- fire off the request for data AFTER you set up your 'load' handler

an ext store fires a 'load' event when its data has loaded.

add a load listener to your store and display your data once the load event fires.

http://dev.sencha.com/deploy/dev/docs/?class=Ext.data.Store

You should check out using templates if you want to bind a data store or a model instance to a panel - that way you don't have to detect the datachanged and just use .update() on the component.

Also: stores have an autoLoad flag that will avoid you having to do the read() explicitly.