Question

基本上我正在研究这个问题，我有许多组件与dinamic的东西，用PHP编写在服务器端。

取决于用户，我的组件将根据用户的角色进行更改。

因此，我需要了解有关如何执行此操作的任何方式/示例/信息。

1-我使用了EXTJS的加载功能，但它清楚地说我不会只加载脚本纯文本。

2-我使用了eval（），但我有点害怕这种方法，就像这个例子crate layout component（static）

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

解决您的问题：

.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（）很好......但是看作脚本：上面的true config选项在源文件中为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文件已经在浏览器中加载（即已经运行了一次此代码），则控件将自动转到回调函数。

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

3 个答案: