开发者

Extjs Load panel content from ajax

开发者 https://www.devze.com 2023-01-31 22:42 出处:网络
I have an Ext.Panel with a listener set to \'afterrend开发者_JS百科er\'. The callback function is a small ajax code which checks an url, grabs it\'s contents and add it to the panel. Problem is, the c

I have an Ext.Panel with a listener set to 'afterrend开发者_JS百科er'. The callback function is a small ajax code which checks an url, grabs it's contents and add it to the panel. Problem is, the content does not get insterted. If I use the same insert code right above the ajax call, it works. Here's my callback function:

Not working:

function afterrenderCallback () {
    //  This does not work
    var logPanel = Ext.getCmp('aP_ServerLogs');
    Ext.Ajax.request({
        url: AP_ROOT_URL + '/index.php?r=server/logs',
        success: function (r) {
                logPanel.add({
                        html: 'dummy html i don\'t care about the response'
                });
        }
    });
}

Working:

function afterrenderCallback () {
    //  This does work
    var logPanel = Ext.getCmp('aP_ServerLogs');
    logPanel.add({
          html: 'dummy html i don\'t care about the response'
    });
}


You might need to call doLayout() on the panel. However check out Ext.Updater:

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

Panels have this automatically such as:

var panel = new Ext.Panel({

});

panel.body.load(...);
panel.body.update(...);


I'd suspect the callback isn't getting called. You could add a failure case with a simple alert call to check it's not going down that path.

However probably better, similar to what @Lloyd said, you should look at the autoLoad config property.


The autoLoad config is what you want, as mentioned. I wanted to add that doing a logPanel.add({...}) just to insert markup is not appropriate, even though it "works". There is no reason to nest a panel within a panel for this. If you are loading HTML content like this you'd preferably do logPanel.body.update('content');.


As @bmoeskau says, the autoLoad config is what we need. It took me quite a while to find the correct syntax though. So here is an example on how to define such a panel with ajax content:

Ext.define('MyApp.view.aP_ServerLogs', {
    extend  : 'Ext.panel.Panel',
    id: 'aP_ServerLogs',
    loader: {
        url: AP_ROOT_URL + '/index.php?r=server/logs',
        autoLoad: true
    }
});
0

精彩评论

暂无评论...
验证码 换一张
取 消