Comment retarder l'affichage jusqu'à ce que les données sont analysées?

Question

Je suis face à un petit problème dans l'analyse des données sur le panneau, voici mon 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 fine
                }
            }    
        });

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

Le problème ci-dessus est que wen je tente d'exécuter le code d'abord la seconde alerte est en cours et montrant la non définie .........

mon but est d'analyser les données et le montrer dans le panneau.

Mais je pense que le problème est que le panneau est affiché avant même le magasin de fin de l'opération, il la première alerte fonctionne bien et d'afficher la valeur mais cette opération se produit après que le panneau est déjà affiché

S'il vous plaît help

Merci. . . ..

Answer 1

Votre Ext.data.Store est chargée par une requête asynchrone sur votre serveur. Il ne bloque pas l'exécution de JavaScript, il fait la demande, mais n'attend pas les données pour revenir avant de continuer sur le reste de votre script (c.-à l'alerte, panneau, etc.).

Lorsque les charges du magasin, il va déclencher l'événement « charge ». Lorsque vous obtenez cet événement, qui est quand vous voulez faire vos panneaux, 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

Answer 2

un magasin de poste déclenche un événement de « charge » lorsque ses données a été chargé.

ajouter un écouteur de charge à votre magasin et afficher vos données une fois l'événement se déclenche de charge.

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

Answer 3

Vous devriez vérifier à l'aide de modèles si vous voulez lier un magasin de données ou une instance de modèle à un groupe -. De cette façon vous ne devez pas détecter l'utilisation dataChanged et juste .update () sur le composant

Aussi: les magasins ont un drapeau autoLoad qui vous évitera d'avoir à faire la lecture () explicitement

.