在Extjs6现代面板中为Html配置指定外部HTML文件(Specify external HTML file for Html config in Extjs6 modern panel)

我试图在Extjs6现代面板中使用html配置来加载外部HTML文件，如下所示：

Ext.create('Ext.Panel', { html: '.../locationOfHtmlFile/htmlFile.html" })

看起来这种事情在旧版本的Extjs或非现代版本中是可能的，但在现代版本中则不然。有任何想法吗？

I am trying to use the html config in an Extjs6 modern panel to load up an external HTML file, like this:

Ext.create('Ext.Panel', { html: '.../locationOfHtmlFile/htmlFile.html" })

It seems like this sort of thing was possible in older versions of Extjs, or the non-modern version, but not in modern. Any ideas?

最满意答案

现代

对于Modern，我认为最好的方法是使用url config创建一个新类：

Ext.define('MyApp.LoadablePanel', { extend: 'Ext.Panel', config:{ url:false }, updateUrl:function(url){ if(url){ Ext.Ajax.request({ url: url, scope:this, success: function(response) { this.setHtml(response.responseText); } }); } } });

然后你这样创建：

Ext.create('Ext.panel.Panel', { url: '.../locationOfHtmlFile/htmlFile.html' });

因为我们正在定义配置，并且每当URL更改时都会更新更新方法。例如panel.setUrl('newUrl.html');

我们还可以添加一个重载方法来刷新：

Ext.define('MyApp.LoadablePanel', { extend: 'Ext.Panel', config:{ url:false }, updateUrl:function(url){ if(url){ Ext.Ajax.request({ url: url, scope:this, success: function(response) { this.setHtml(response.responseText); } }); } }, reload:function(){ //just fire our update method with the current url. this.updateUrl(this.getUrl()); } });

进一步更新

似乎合乎逻辑的进一步更新是添加加载掩码......

Ext.define('MyApp.LoadablePanel', { extend: 'Ext.Panel', config:{ url:false }, updateUrl:function(url){ if(url){ this.setMasked({ xtype:'loadmask',message:'Loading...' }); Ext.Ajax.request({ url: url, scope:this, success: function(response) { this.setHtml(response.responseText); this.setMasked(false); } }); } }, reload:function(){ //just fire our update method with the current url. this.updateUrl(this.getUrl()); } });

经典

对于经典，您可以通过加载程序配置执行此操作：

Ext.create('Ext.panel.Panel', { loader: { url: '.../locationOfHtmlFile/htmlFile.html', autoLoad: true } });

这也意味着您可以根据需要进行刷新： panel.getLoader().load();

有关更多详细信息和选项，请参阅http://docs.sencha.com/extjs/6.2.0/classic/Ext.ComponentLoader.html 。

Modern

For Modern I think the neatest way to do this is by creating a new class with a url config:

Ext.define('MyApp.LoadablePanel', { extend: 'Ext.Panel', config:{ url:false }, updateUrl:function(url){ if(url){ Ext.Ajax.request({ url: url, scope:this, success: function(response) { this.setHtml(response.responseText); } }); } } });

Then you create like so:

Ext.create('Ext.panel.Panel', { url: '.../locationOfHtmlFile/htmlFile.html' });

Because we are defining a config, and an update method whenever the url changes it would update. e.g. panel.setUrl('newUrl.html');

We could also add a reload method to make it possible to refresh:

Ext.define('MyApp.LoadablePanel', { extend: 'Ext.Panel', config:{ url:false }, updateUrl:function(url){ if(url){ Ext.Ajax.request({ url: url, scope:this, success: function(response) { this.setHtml(response.responseText); } }); } }, reload:function(){ //just fire our update method with the current url. this.updateUrl(this.getUrl()); } });

Further update

A further update that seems logical is to add a loading mask...

Ext.define('MyApp.LoadablePanel', { extend: 'Ext.Panel', config:{ url:false }, updateUrl:function(url){ if(url){ this.setMasked({ xtype:'loadmask',message:'Loading...' }); Ext.Ajax.request({ url: url, scope:this, success: function(response) { this.setHtml(response.responseText); this.setMasked(false); } }); } }, reload:function(){ //just fire our update method with the current url. this.updateUrl(this.getUrl()); } });