How to embed Json result within Extjs Panel?

Question

Hi,

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

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

Answer 2

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!