Chargement dynamique du contenu (panneaux) dans une fenêtre Ext Js

Question

Eh bien fondamentalement je suis à la recherche de ce problème, j'ai beaucoup de composants avec des trucs dinamic qui est écrit sur le côté serveur avec PHP.

En fonction de l'utilisateur mes composants vont changer, en fonction du rôle de l'utilisateur.

J'ai donc besoin de connaître les moyens/exemples/informations sur la façon de procéder.

1- J'ai utilisé la fonction de chargement EXTJS, mais il est clair que je ne chargerai que du texte brut.

2- i utilisé eval() mais je suis un peu peur o cette approche, comme cette composante exemple de mise en page de caisse (statique)

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 

       ] 
      }) 

et mettre à jour le contenu de la mise en page des fichiers js écrits sur le serveur

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

toute autre manière pour que cela soit fait, ce que je ne veux pas faire est de faire un million de composants différents et les charger au moment de la connexion comme beaucoup de gens semblent dire

Answer 1

Pour répondre à vos questions:

1. La méthode .load chargera le script et l'évaluer une fois que le contenu a terminé le chargement, mais pour ce faire, vous devrez définir les scripts: véritable option, un exemple peut être:

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

2. Utiliser eval() est très bien ... mais vu que les scripts: véritable option de configuration ci-dessus accompl lave cela pour javascript dans le fichier source, vous ne devriez pas besoin de l'utiliser.

Hope this helps

Answer 2

Vous pouvez charger dynamiquement JavaScript en utilisant quelque chose comme comme ci-dessous - il y a une centaine de variantes sur le web. De cette façon, vous éviterez l'appel AJAX et la gestion de la réponse (et l'évaluation ultérieure).

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

Answer 3

Ce que je compris de votre question est que, vous êtes à la recherche pour chargeur de fichier JS dynamique avec un gestionnaire de rappel à savoir la fonction de rappel sera appelé uniquement lorsque le fichier est chargé complètement.J'ai aussi fait face à des problèmes similaires au début et après la recherche beaucoup et faire quelques recherches, j'ai développé le code suivant, il offre absolue fonctionnalité dynamique JS et le chargement de fichier CSS:

Classe ScriptLoader: (Mettez-le dans un fichier séparé et le charger dans un premier temps)

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

maintenant, il peut être utilisé de cette façon:

Pour les fichiers CSS chargement:

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

Que vous est juste besoin de fournir le chemin des fichiers CSS dans un tableau et passer ce tableau à la fonction loadCss() comme argument. Aucun rappel n'est requis pour les fichiers CSS.

pour le fichier JS chargement:

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

Dans ce cas, de la même façon que vous avez entré les fichiers CSS, ici il vous suffit de mettre ce tableau de fichiers JS dans l'option de scripts. La fonction de rappel est appelée uniquement lorsque tous les fichiers JS sont chargés avec succès. En outre, si dans tous les cas, les fichiers JS sont déjà chargés dans le navigateur (c'est-à-dire que ce code est déjà exécuté une fois), alors le contrôle ira automatiquement à la fonction de rappel.