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

dav*_*oxa 6 html extjs extjs4

我正在创建一个更改日志,我决定从.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();
        }
    }]
});
Run Code Online (Sandbox Code Playgroud)

我怎么能解决这个问题?(html:'changes.html')如何将html加载到我的窗口?

Lor*_*yer 9

有一个更好的解决方案,使用面板loader配置的声明:

loader: {
    url: 'changes.html',
    autoLoad: true
},
Run Code Online (Sandbox Code Playgroud)

这将导致这个全局代码.

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();
        }
    }]
});
Run Code Online (Sandbox Code Playgroud)

这是首选,因为我们不需要定义一个listener,也不需要Ext.Ajax调用.


Izh*_*aki 4

您需要异步加载 html,然后将其注入到您的组件中。所以:

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

因此,如果您使用 id 声明组件:

\n\n
Ext.define('MeridianCRM.dialogs.recent\xd0\xa1hanges.recent\xd0\xa1hanges', {\n    extend  : 'Ext.window.Window',\n    title   : '\xd0\x9f\xd0\xbe\xd1\x81\xd0\xbb\xd0\xb5\xd0\xb4\xd0\xbd\xd0\xb8\xd0\xb5 \xd0\xb8\xd0\xb7\xd0\xbc\xd0\xb5\xd0\xbd\xd0\xb5\xd0\xbd\xd0\xb8\xd1\x8f \xd0\xbd\xd0\xb0 \xd1\x81\xd0\xb0\xd0\xb9\xd1\x82\xd0\xb5',\n\n    id:     : 'my-log',\n\n    ...\n});\n
Run Code Online (Sandbox Code Playgroud)\n\n

然后你可以这样做:

\n\n
Ext.Ajax.request({\n    url: 'changes.html',\n    success: function(response){\n        Ext.getCmp('my-log').update( response.responseText );\n    }\n});\n
Run Code Online (Sandbox Code Playgroud)\n\n

您可以将其“集成”到您的面板中,如下所示:

\n\n
Ext.define('MeridianCRM.dialogs.recent\xd0\xa1hanges.recent\xd0\xa1hanges', {\n    extend  : 'Ext.window.Window',\n    title   : '\xd0\x9f\xd0\xbe\xd1\x81\xd0\xbb\xd0\xb5\xd0\xb4\xd0\xbd\xd0\xb8\xd0\xb5 \xd0\xb8\xd0\xb7\xd0\xbc\xd0\xb5\xd0\xbd\xd0\xb5\xd0\xbd\xd0\xb8\xd1\x8f \xd0\xbd\xd0\xb0 \xd1\x81\xd0\xb0\xd0\xb9\xd1\x82\xd0\xb5',\n\n    id:     : 'my-log',\n\n    listeners: {\n        'render': function()\n            {\n                Ext.Ajax.request({\n                    url: 'changes.html',\n                    success: function(response){\n                        Ext.getCmp('my-log').update( response.responseText );\n                    }\n                });                \n            }\n    }\n\n    ...\n});\n
Run Code Online (Sandbox Code Playgroud)\n\n

但请注意,如果返回的 html 包含,您可能会遇到问题<head>标记(因为 extjs 页面已经有一个标记),您可能会遇到问题。

\n