How to embed Json result within Extjs Panel? - json

Question

I have some issues with Json result and embed it within the html of the Extjs Panel.
Here's that I have managed to get so far. myPanel is embedded within a mainPanel, and I have some shows/hide of the myPanel in between other sections of my codes.
Ajax request to retrieve Json result like so:
Ext.Ajax.request({
url: 'myStore',
success: function(r) {
var myItem = Ext.decode(r.responseText).itemName;
}
})
I would like to embed the myItem into mypanel, something like this:
var myPanel = new Ext.Panel({
hidden: true,
html:myItem
})
This is where the myPanel is embedded to my 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
]
});
Currently if I were to run the code, I got a "undefined" within the myPanel, so I supposed that myItem is out of the scope, hence not picked up by myPanel. Hence, I would like to know how/what should I do to be able to get myItem (Json result) reflected in the myPanel?
Thank you.

Answer 1

I found the answer, tested and working for me. For any friends stuck with this. What I need to do is just to update the html content with the body update.
Basically, just grab the middle out of mainPanel such that:
var middle = new Ext.Panel({
id: 'middle',
xtype: 'panel',
items: [
middlePanel1,
middlePanel2,
myPanel
]
})
Of course, you will need to replace the middle back into the mainPanel.
Then, next is to create the myPanel as norm:
var myPanel = new Ext.Panel({
id: 'myPanel',
hidden: true,
html: 'empty'
})
Inside the Ajax request, you update
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
}
})
That's it!

Answer 2

you have a syntax error in this part the corrected code look like this :
var myPanel = new Ext.Panel({
hidden: true,
html:myItem // no ; here
});
also you have to be careful about scoping issue, if your code is in a class I would do something like that
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
});