在Ext Js视口中动态地加载内容（面板）

Question

基本上我正在寻找这个问题，我有许多组件与服务器端用PHP写在服务器端。

根据用户的不同，我的组件将根据用户的角色进行更改。

所以我需要知道如何做到这一点的任何方式/示例/信息。

1-我使用了加载函数EXTJS，但它清楚地表明我不会加载脚本只是纯文本。

2-我使用的eval（），但即时有点害怕O此方法中，像该例子中箱布局组件（静态）

var contentPanel = new Ext.Panel({ 
       frame: true, 
       style: {marginTop: '10px'}, 
       height: 315, 
       border: true, 
       bodyBorder: false, 
       layout: 'fit', 
       id: 'contentPanel' 
      }); 


      var mainPanel = new Ext.Panel({ 
       title: 'Panel Principal', 
       id: 'mainPanel', 
       border: true, 
       frame: true, 
       width: '50%', 
       style: {margin: '50px auto 0 auto'}, 
       height: 400, 
       renderTo: Ext.getBody(), 
       items: [ 
         { 
          html: '<a href="#" onClick="requestContent(\'panel1\');">Panel 1</a>' 
         }, 
         { 
          html: '<a href="#" onClick="requestContent(\'panel2\');">Panel 2</a>' 
         }, 
         contentPanel 

       ] 
      }) 

和更新与写在服务器上JS文件布局的内容

function receiveContent(options, success, response) 
     { 



      var respuesta = response.responseText; 

      //console.log(respuesta); 

      eval(respuesta); 

      //console.log(options.url); 

      url = options.url; 

      url = url.substring(0,(url.search(/(\.)/))); 

      var contenedor = Ext.getCmp('contentPanel'); 

      contenedor.removeAll(); 

      var contenido = Ext.getCmp(url); 

      contenedor.add(contenido); 
      contenedor.doLayout(); 
     } 

     function requestContent(panel) 
     { 
      //panel es el nombre del archivo que quiero 
      Ext.Ajax.request({ 
       url: panel+'.js', 
       callback: receiveContent 
      }); 
     } 

任何其他方式为此做什么我不想做的就是让一百万个不同的组件，并在登录时，许多人一样加载它们都似乎说

Answer 1

为了解决你的问题：

1. 的.load方法将加载脚本，一旦内容加载完成后对其进行评估，但做到这一点，你将需要设置脚本：true选项，一个例子可以是：

my_panel.load({ 
    url: 'url_to_load.php/hmt/html/asp...', 
    params: {param1: param1value, param2: param2value...etc}, 
    nocache: true, 
    timeout: 30, 
    scripts: true 
}); 

使用eval（）是细...但看到的脚本：上述accompl真配置选项在源代码文件中填写了javascript，你不需要使用它。

希望这有助于

Answer 2

您可能会使用类似于下面的内容来动态加载JavaScript - 网络上有一百个变体。这样，您将避免AJAX调用并处理响应（以及随后的eval）。

var aHeadNode = document.getElementById('head')[0]; 
var aScript = document.createElement('script'); 
aScript.type = 'text/javascript'; 
aScript.src = "someFile.js"; 
aHeadNode.appendChild(oScript); 

Answer 3

我从你的问题明白那是什么，你正在寻找一个回调处理，即回调函数动态JS文件加载器，只有当文件被完全加载就会被调用。我也面临在启动和搜索了很多，做了一些研究之后，类似的问题，我开发了下面的代码，它提供了绝对的动态JS和CSS文件加载功能：

类ScriptLoader：（把它放在一个单独的文件并在第一次加载）

ScriptLoader = function() { 
    this.timeout = 30; 
    this.scripts = []; 
    this.disableCaching = false; 
}; 

ScriptLoader.prototype = { 

    processSuccess : function(response) { 
     this.scripts[response.argument.url] = true; 
     window.execScript ? window.execScript(response.responseText) : window 
       .eval(response.responseText); 
     if (response.argument.options.scripts.length == 0) { 
     } 
     if (typeof response.argument.callback == 'function') { 
      response.argument.callback.call(response.argument.scope); 
     } 
    }, 

    processFailure : function(response) { 
     Ext.MessageBox.show({ 
        title : 'Application Error', 
        msg : 'Script library could not be loaded.', 
        closable : false, 
        icon : Ext.MessageBox.ERROR, 
        minWidth : 200 
       }); 
     setTimeout(function() { 
        Ext.MessageBox.hide(); 
       }, 3000); 
    }, 

    load : function(url, callback) { 
     var cfg, callerScope; 
     if (typeof url == 'object') { // must be config object 
      cfg = url; 
      url = cfg.url; 
      callback = callback || cfg.callback; 
      callerScope = cfg.scope; 
      if (typeof cfg.timeout != 'undefined') { 
       this.timeout = cfg.timeout; 
      } 
      if (typeof cfg.disableCaching != 'undefined') { 
       this.disableCaching = cfg.disableCaching; 
      } 
     } 

     if (this.scripts[url]) { 
      if (typeof callback == 'function') { 
       callback.call(callerScope || window); 
      } 
      return null; 
     } 

     Ext.Ajax.request({ 
        url : url, 
        success : this.processSuccess, 
        failure : this.processFailure, 
        scope : this, 
        timeout : (this.timeout * 1000), 
        disableCaching : this.disableCaching, 
        argument : { 
         'url' : url, 
         'scope' : callerScope || window, 
         'callback' : callback, 
         'options' : cfg 
        } 
       }); 

    } 

}; 

ScriptLoaderMgr = function() { 
    this.loader = new ScriptLoader(); 

    this.load = function(o) { 
     if (!Ext.isArray(o.scripts)) { 
      o.scripts = [o.scripts]; 
     } 

     o.url = o.scripts.shift(); 

     if (o.scripts.length == 0) { 
      this.loader.load(o); 
     } else { 
      o.scope = this; 
      this.loader.load(o, function() { 
         this.load(o); 
        }); 
     } 
    }; 

    this.loadCss = function(scripts) { 
     var id = ''; 
     var file; 

     if (!Ext.isArray(scripts)) { 
      scripts = [scripts]; 
     } 

     for (var i = 0; i < scripts.length; i++) { 
      file = scripts[i]; 
      id = '' + Math.floor(Math.random() * 100); 
      Ext.util.CSS.createStyleSheet('', id); 
      Ext.util.CSS.swapStyleSheet(id, file); 
     } 
    }; 

    this.addAsScript = function(o) { 
     var count = 0; 
     var script; 
     var files = o.scripts; 
     if (!Ext.isArray(files)) { 
      files = [files]; 
     } 

     var head = document.getElementsByTagName('head')[0]; 

     Ext.each(files, function(file) { 
        script = document.createElement('script'); 
        script.type = 'text/javascript'; 
        if (Ext.isFunction(o.callback)) { 
         script.onload = function() { 
          count++; 
          if (count == files.length) { 
           o.callback.call(); 
          } 
         } 
        } 
        script.src = file; 
        head.appendChild(script); 
       }); 
    } 
}; 

ScriptMgr = new ScriptLoaderMgr(); 

现在可以采用这种方式：

对于CSS文件加载：

ScriptMgr.loadCss([first.css', 'second.css']); 

也就是说，你只需要提供的css文件路径的阵列和阵列传递给loadCss（）函数作为参数。 CSS文件不需要回调。

对于JS文件加载：

ScriptMgr.load({ 
    scripts : ['lib/jquery-1.4.2.min.js','lib/jquery.touch-gallery-1.0.0.min.js'], 
    callback : function() {    
      //Here you will do those staff needed after the files get loaded 
    }, 
    scope : this 
}); 

在这种情况下，您输入CSS文件的方式，在这里你只需要提出的JS文件数组中的脚本选项。回调函数仅在所有JS文件加载成功时才被调用。另外，如果在任何情况下，JS文件已经加载到浏览器中（即已经运行了一次），那么控件将自动转到回调函数。