Comment intégrer le résultat Json dans le panneau Extjs?

Question

J'ai quelques problèmes avec le résultat de JSON et l'incorpore dans le html du panneau d'Extjs.

Voici que j'ai réussi à aller si loin. myPanel est intégré dans un mainPanel, et j'ai quelques spectacles/masquer du myPanel entre d'autres sections de mes codes.

Ajax demande pour récupérer résultat JSON comme ceci:

Ext.Ajax.request({ 
    url: 'myStore', 
    success: function(r) { 
     var myItem = Ext.decode(r.responseText).itemName; 
    } 
}) 

Je voudrais intégrer le MyItem dans MyPanel, quelque chose comme ceci:

var myPanel = new Ext.Panel({ 
    hidden: true, 
    html:myItem 
}) 

C'est là que MyPanel est intégré à mon mainPanel:

var mainPanel = new Ext.Panel({ 
    applyTo: 'mywizard', 
    frame: true, 
    items: [{ 
     id: 'top', 
     xtype:'panel', 
     items: [ 
      topPanel1, 
      topPanel2 
     ] 
    },{ 
     id: 'middle', 
     xtype: 'panel', 
     items: [ 
      middlePanel1, 
      middlePanel2, 
      myPanel 
     ] 
    },{ 
     id: 'bottom', 
     xtype: 'panel', 
     items: [ 
      footer   
     ] 
    }); 

Actuellement, si je devais exécuter le code, j'ai obtenu un "undefined" w Dans le myPanel, j'ai supposé que myItem était hors de portée, donc pas repris par myPanel. Par conséquent, je voudrais savoir comment/que dois-je faire pour pouvoir obtenir myItem (résultat Json) reflété dans myPanel?

Merci.

Answer 1

J'ai trouvé la réponse, testé et travaillé pour moi. Pour tous les amis coincés avec ça. Ce que je dois faire est juste de mettre à jour le contenu html avec la mise à jour du corps.

Fondamentalement, prenez juste au milieu de mainPanel tel que:

var middle = new Ext.Panel({ 
    id: 'middle', 
    xtype: 'panel', 
    items: [ 
     middlePanel1, 
     middlePanel2, 
     myPanel 
    ] 
}) 

Bien sûr, vous devrez remplacer le middle de nouveau dans le mainPanel.

Ensuite, à côté est de créer les MyPanel comme norme:

var myPanel = new Ext.Panel({ 
    id: 'myPanel', 
    hidden: true, 
    html: 'empty' 
}) 

Dans la requête Ajax, vous mettez à jour

Ext.Ajax.request({ 
    url: 'myStore', 
    success: function(r) { 
     var myItem = Ext.decode(r.responseText).itemName; 
     var editmycontent = Ext.getCmp('myPanel'); 
      editmycontent.body.update(myItem); // update myItem here 
     middle.doLayout(); // refresh the changes 
    } 
}) 

Ca y est!

Answer 2

vous avez une erreur de syntaxe dans cette partie du look de code corrigé comme ceci:

var myPanel = new Ext.Panel({ 
    hidden: true, 
    html:myItem // no ; here 
}); 

aussi vous devez faire attention à problème la portée, si votre code est dans une classe que je ferais quelque chose comme ça

Ext.Ajax.request({ 
    url: 'myStore', 
    success: function(r) { 
     var myItem = Ext.decode(r.responseText).itemName; 
     var myPanel = new Ext.Panel({ 
      hidden: true, 
      html:myItem // no ; here 
     }); 
     this.parentPanel.add(myPanel); 
    } 
    ,scope: this // note the set the scope 
});