Question

我正在创建一个更改日志，我决定从.html文件加载我的更改日志

我有

Ext.define('MeridianCRM.dialogs.recentСhanges.recentСhanges', {
    extend  : 'Ext.window.Window',
    title   : 'Последние изменения на сайте',
    modal   : true,
    height  : 400,
    width   : 500,
    resizable : false,
    html: 'changes.html',

    buttons: [{
        text: 'Закрыть',
        handler: function() {
            this.up('window').close();
        }
    }]
});

我怎么能解决这个问题？（html：'changes.html'）我怎么能把HTML加载到我的窗口？

Answer 1

有一个更好的解决方案，它使用面板loader config的声明：

loader: {
    url: 'changes.html',
    autoLoad: true
},

将导致此全局代码。

Ext.define('MeridianCRM.dialogs.recentСhanges.recentСhanges', {
    extend  : 'Ext.window.Window',
    title   : 'Последние изменения на сайте',
    modal   : true,
    height  : 400,
    width   : 500,
    resizable : false,
    loader: {
        url: 'changes.html',
        autoLoad: true
    },
    buttons: [{
        text: 'Закрыть',
        handler: function() {
            this.up('window').close();
        }
    }]
});

这是首选，因为我们不需要定义listener，也不需要Ext.Ajax来电。

Answer 2

您需要异步加载html，然后将其注入组件。所以：

Ext.Ajax.request({
    url: 'changes.html',
    success: function(response){
        // response.responseText will have your html content
        // you can then feed it into your component using update()
    }
});

因此，如果您使用id：

声明组件

Ext.define('MeridianCRM.dialogs.recentСhanges.recentСhanges', {
    extend  : 'Ext.window.Window',
    title   : 'Последние изменения на сайте',

    id:     : 'my-log',

    ...
});

然后你可以这样做：

Ext.Ajax.request({
    url: 'changes.html',
    success: function(response){
        Ext.getCmp('my-log').update( response.responseText );
    }
});

您可以将它“集成”到面板中，如下所示：

Ext.define('MeridianCRM.dialogs.recentСhanges.recentСhanges', {
    extend  : 'Ext.window.Window',
    title   : 'Последние изменения на сайте',

    id:     : 'my-log',

    listeners: {
        'render': function()
            {
                Ext.Ajax.request({
                    url: 'changes.html',
                    success: function(response){
                        Ext.getCmp('my-log').update( response.responseText );
                    }
                });                
            }
    }

    ...
});

请注意，如果返回的html包含<head>标记，则可能会出现问题（因为extjs页面已有）。

将服务器端html文件加载到面板的内容中

2 个答案: