在Ext Js视口中动态地加载内容（面板）
基本上我正在寻找这个问题，我有许多组件与服务器端用PHP写在服务器端。在Ext Js视口中动态地加载内容（面板）
根据用户的不同，我的组件将根据用户的角色进行更改。
所以我需要知道如何做到这一点的任何方式/示例/信息。
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
});
}
任何其他方式为此做什么我不想做的就是让一百万个不同的组件，并在登录时，许多人一样加载它们都似乎说
为了解决你的问题：
- 的.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，你不需要使用它。
希望这有助于
您可能会使用类似于下面的内容来动态加载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);
感谢您的答案，上，但我怎么知道我可以调用脚本添加这样？我的意思是，我怎么知道在使用其中定义的一些变量/函数之前何时加载脚本？有没有ON LOAD事件可用？ – GumaTerror 2010-09-16 00:33:28
有一个事件。但是，您可能正在寻找错误的地方。将onload处理程序放入加载的文件中，而不是加载文件中。 – Upperstage 2010-09-16 02:39:22
我从你的问题明白那是什么，你正在寻找一个回调处理，即回调函数动态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文件已经加载到浏览器中（即已经运行了一次），那么控件将自动转到回调函数。
抱歉 - 不知道为什么代码标记不能用于我的文章，这意味着代码的格式不能正确显示...... – SW4 2010-09-16 10:15:45