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

友情链接