Question

我有一个Ext.Panel，侦听器设置为'afterrender'。回调函数是一个小的ajax代码，它检查一个url，抓取它的内容并将其添加到面板中。问题是，内容没有得到改进。如果我在ajax调用之上使用相同的插入代码，它就可以工作。这是我的回调函数：

不工作：

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

工作：

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

Answer 1

您可能需要在面板上调用doLayout（）。但是请查看Ext.Updater：

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

小组会自动执行此操作，例如：

var panel = new Ext.Panel({

});

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

Answer 2

我怀疑回调没有被调用。您可以添加一个failure案例，并通过一个简单的警报调用来检查它是不是沿着那条路走下去。

然而可能更好，类似于@Lloyd所说，你应该看看autoLoad config property。

Answer 3

如上所述，autoLoad配置就是您想要的。我想补充说，只是为了插入标记而做logPanel.add({...})是不合适的，即使它“有效”。为此，没有理由在面板中嵌套面板。如果您要加载此类HTML内容，则最好执行logPanel.body.update('content');。

Answer 4

正如@bmoeskau所说，autoLoad配置是我们所需要的。我花了很长时间才找到正确的语法。所以这里有一个关于如何使用ajax内容定义这样一个面板的例子：

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

Extjs从ajax加载面板内容

4 个答案: