我试图在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()); } });Classic
For classic you can do this via a loader config:
Ext.create('Ext.panel.Panel', { loader: { url: '.../locationOfHtmlFile/htmlFile.html', autoLoad: true } });This also means you can then refresh if needed too: panel.getLoader().load();
See http://docs.sencha.com/extjs/6.2.0/classic/Ext.ComponentLoader.html for more details and options.
更多推荐
发布评论