现代

Question

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

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

似乎在旧版本的Extjs或非现代版本中可以使用这种东西，但现代版本却不行。有什么想法吗？

Answer 1

您之前应该加载内容，这可能会有所帮助：

Ext.Ajax.request({
  url: '.../locationOfHtmlFile/htmlFile.html',
  success: function(response) {
    Ext.create('Ext.Panel', {
      html: response.responseText
    });
  }
});

Answer 2

现代

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

因为我们正在定义配置，并且每当网址更改时都会更新更新方法。例如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。

在Extjs6现代面板中为Html配置指定外部HTML文件

2 个答案:

现代

进一步更新

经典