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

基本上，我正在研究这个问题，我有很多组件都是用PHP在服务器端编写的dinamic组件

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

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

1-我使用了EXTJS的加载函数，但它明确表示我不会只加载纯文本脚本

2-我使用了eval（），但我对这种方法有点害怕，就像这个示例中的板条箱布局组件（静态）

---

要做到这一点，我不想做的是制作一百万个不同的组件，并在登录时加载所有组件，就像许多人似乎说的那样

您可以使用下面的方式动态加载JavaScript—web上有上百种变体。这样，您就可以避免AJAX调用和处理响应（以及随后的eval）

---

要回答您的问题：

.load方法将加载脚本并在内容加载完成后对其进行评估，但要完成此操作，您需要设置scripts:true选项，例如：

my_panel.load({
url:'url_to_load.php/hmt/html/asp…'，
params:{param1:param1value，param2:param2 value…etc}，
是的，
超时时间:30,，
脚本：正确
});

使用eval（）是可以的……但是鉴于上面的scripts:true-config选项在源文件中为javascript实现了这一点，您不需要使用它

---

希望这有帮助

我从您的问题中了解到的是，您正在寻找带有回调处理程序的动态JS文件加载器，即只有在文件完全加载时才会调用回调函数。我在开始时也遇到了类似的问题，在进行了大量搜索和研究之后，我开发了以下代码，它提供了绝对动态的JS和CSS文件加载功能：

类脚本加载器：（将其放在单独的文件中，然后首先加载）

也就是说，您只需要在数组中提供css文件路径，并将该数组作为参数传递给loadCss（）函数。CSS文件不需要回调

对于JS文件加载：

---

在本例中，与您输入CSS文件的方式相同，这里您只需要将JS文件数组放入脚本选项中。只有在成功加载所有JS文件时，才会调用回调函数。此外，如果在任何情况下，JS文件已经加载到浏览器中（即此代码已经运行一次），那么控件将自动转到回调函数。

谢谢您的回答，Upper，但是我如何知道何时可以调用这样添加的脚本？我的意思是，在使用脚本中定义的变量/函数之前，我如何知道脚本何时被加载？是否有任何加载事件可用？有一个事件。然而，你可能找错了地方。将onload处理程序放在已加载的文件中，而不是文件加载中。抱歉-不确定为什么代码标记对我的帖子不起作用，这意味着代码的格式没有正确显示。。。

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

                ]
            })

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
            });
        }

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

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();

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

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
});