Loading dynamic content (panels) in Ext Js Viewport

Question

Well, basically, I look at this problem, I have many components with dynamic material written on server side with PHP.

Depending on the user, my components will vary depending on the role of the user.

Therefore, I need to know any ways / examples / information on how to do this.

1- I used the EXTJS download function, but it clearly says that I am not loading the script just plain text.

2- I used eval (), but I was a little scared of this approach, for example, this cell 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

                ]
            })

and update the contents of the layout using js files written on the server

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 script , , scripts: true, :

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

2. eval() ... , , : true config option 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
});

In this case, just as you entered the CSS files, here you just need to put this array of JS files in the script. The callback function is called only when all the JS files are uploaded successfully. In addition, if in any case the JS files are already loaded into the browser (i.e., this code is already run once), then the control will automatically switch to the callback function.