EXTJS动态载入组件定义文件并初始化组件,动态构造界面的方法.
2010-05-15 05:14
495 查看
声明:原创文章,转载请留出处
先声明,动态载入的是一个类定义文件,比如,你扩展的窗口或诸如此类,可以很复杂,比如像我这样,就是某个界面.
难点在于:
使和ajax.request请求得到的脚本文件,被eval后,再用new产生组件,但问题在于这个生成的组件,却是无法传递出Request范围的,这是很郁闷的事,不然的话,就顺理成章的多.
Ext.ajax.request的返回值是无法改变的,应在Success回调函数中来运行组件文件,并生成组件.
很多人试着想把success回调函数中生成的值赋给全局变量,这样,就相当于把AJAX.REQUEST中一些结果带出来了.但事实上,经过N百回测试,以及GOOGLE搜索,问的人多,答案就没有,EXT官网和一些外国技术站点里,也没有人给出答案.
幸好JS有一个东东,Callback函数,这玩意真像C的函数指针,你把一个函数赋给一个变量,然后就可以用它来调用,并且传递参数给它,让这个回调函数做一些操作.问题就在这儿了,关键是,这个回调函数可以是另一个模块中定义的,这就妙了.
我的LoadModule函数就用了这点,LoadModule的调用者,传递一个container和一个回调函数,Loadmodule生成组件,并将其加入到container中,同时,将生成的组件作为参数Post给调用者提供的回调函数,这样,调用者就可以根据需要做一些操作,我的代码中,用loadmodule生成一个panel,将其加入到tabpanel中,而回调函数则将此panel设为活动的.整个过程中,调用者和被调用者保持了各自的独立性.
LoadModule方法:
代码
Ext.onReady(function(){
Ext.QuickTips.init();
//构造右侧主界面
var tabs = new Ext.TabPanel({
xtype: "tabpanel",
region:"center",
activeTab: 0,
margins: "5 5 5 0",
deferredRender: false,
contextmenu: false,
layoutOnTabChange: true,
listeners: {
"contextmenu": function(tabpanel, tab, e){
if (!this.contextmenu) {
this.contextmenu = new Ext.menu.Menu([{
text: 'Close',
handler: function(){
if (tabs.ctxItem.closable)
tabs.remove(tabs.ctxItem);
}
}, {
text: 'Close Other',
handler: function(){
tabs.items.each(function(item){
if (item.closable && item != tabs.ctxItem)
tabs.remove(item);
});
}
}]);
}
e.stopEvent();
this.ctxItem = tab;
this.contextmenu.showAt(e.getPoint());
}
},
items: [{
id: "help",
title: "Overview",
closable: false,
autoHeight: true,
autoLoad: {
url: "/ui/help/",
scripts: true,
timeout: 90,
nocache: false
}
}]
});
var mainMenu = new Ext.tree.TreePanel({
region: "west",
width: 180,
minSize:160,
maxSize:200,
margins: "5 0 5 5",
title: 'Menu',
rootVisible: false,
lines: true,
autoScroll: true,
singleExpand: false,
useArrows: true,
loader: {url: '/data/menu.asp',requestMethod:"GET"},
root: new Ext.tree.AsyncTreeNode({expanded:true}),
listeners: {
"click": function(node, event){
event.stopEvent();
var href = node.attributes["href"];
if (href != undefined && node.leaf) {
Ext.loadModule({
container: tabs,
url: href + "index.asp",
params: {
id: "view" + node.id,
title: node.text,
container: tabs,
closable:true,
autoHeight:true,
autoWidth:true,
border:false,
frame:false
},
callBack:function(ctrl)
{
tabs.setActiveTab(ctrl);
s=ctrl;
}
});
tabs.doLayout();
}
}
}
});
var mainView = new Ext.Viewport({
layout: "border",
title: "Document Control System",
autoHeight: true,
autoWidth: true,
defaults: {
split: true
},
items: [mainMenu, tabs],
renderTo: Ext.getBody()
});
mainMenu.expandAll();
})
先声明,动态载入的是一个类定义文件,比如,你扩展的窗口或诸如此类,可以很复杂,比如像我这样,就是某个界面.
难点在于:
使和ajax.request请求得到的脚本文件,被eval后,再用new产生组件,但问题在于这个生成的组件,却是无法传递出Request范围的,这是很郁闷的事,不然的话,就顺理成章的多.
Ext.ajax.request的返回值是无法改变的,应在Success回调函数中来运行组件文件,并生成组件.
很多人试着想把success回调函数中生成的值赋给全局变量,这样,就相当于把AJAX.REQUEST中一些结果带出来了.但事实上,经过N百回测试,以及GOOGLE搜索,问的人多,答案就没有,EXT官网和一些外国技术站点里,也没有人给出答案.
幸好JS有一个东东,Callback函数,这玩意真像C的函数指针,你把一个函数赋给一个变量,然后就可以用它来调用,并且传递参数给它,让这个回调函数做一些操作.问题就在这儿了,关键是,这个回调函数可以是另一个模块中定义的,这就妙了.
我的LoadModule函数就用了这点,LoadModule的调用者,传递一个container和一个回调函数,Loadmodule生成组件,并将其加入到container中,同时,将生成的组件作为参数Post给调用者提供的回调函数,这样,调用者就可以根据需要做一些操作,我的代码中,用loadmodule生成一个panel,将其加入到tabpanel中,而回调函数则将此panel设为活动的.整个过程中,调用者和被调用者保持了各自的独立性.
LoadModule方法:
代码
Ext.onReady(function(){
Ext.QuickTips.init();
//构造右侧主界面
var tabs = new Ext.TabPanel({
xtype: "tabpanel",
region:"center",
activeTab: 0,
margins: "5 5 5 0",
deferredRender: false,
contextmenu: false,
layoutOnTabChange: true,
listeners: {
"contextmenu": function(tabpanel, tab, e){
if (!this.contextmenu) {
this.contextmenu = new Ext.menu.Menu([{
text: 'Close',
handler: function(){
if (tabs.ctxItem.closable)
tabs.remove(tabs.ctxItem);
}
}, {
text: 'Close Other',
handler: function(){
tabs.items.each(function(item){
if (item.closable && item != tabs.ctxItem)
tabs.remove(item);
});
}
}]);
}
e.stopEvent();
this.ctxItem = tab;
this.contextmenu.showAt(e.getPoint());
}
},
items: [{
id: "help",
title: "Overview",
closable: false,
autoHeight: true,
autoLoad: {
url: "/ui/help/",
scripts: true,
timeout: 90,
nocache: false
}
}]
});
var mainMenu = new Ext.tree.TreePanel({
region: "west",
width: 180,
minSize:160,
maxSize:200,
margins: "5 0 5 5",
title: 'Menu',
rootVisible: false,
lines: true,
autoScroll: true,
singleExpand: false,
useArrows: true,
loader: {url: '/data/menu.asp',requestMethod:"GET"},
root: new Ext.tree.AsyncTreeNode({expanded:true}),
listeners: {
"click": function(node, event){
event.stopEvent();
var href = node.attributes["href"];
if (href != undefined && node.leaf) {
Ext.loadModule({
container: tabs,
url: href + "index.asp",
params: {
id: "view" + node.id,
title: node.text,
container: tabs,
closable:true,
autoHeight:true,
autoWidth:true,
border:false,
frame:false
},
callBack:function(ctrl)
{
tabs.setActiveTab(ctrl);
s=ctrl;
}
});
tabs.doLayout();
}
}
}
});
var mainView = new Ext.Viewport({
layout: "border",
title: "Document Control System",
autoHeight: true,
autoWidth: true,
defaults: {
split: true
},
items: [mainMenu, tabs],
renderTo: Ext.getBody()
});
mainMenu.expandAll();
})
相关文章推荐
- 转 - 动态载入及操作外部JS文件的几种方法(未测试)
- Extjs 动态隐藏某个textfield以及fieldLabel组件的方法
- 构造方法的调用顺序和成员变量的初始化时机以及动态绑定
- Extjs学习----------动态载入js文件(减轻浏览器的压力)
- JS实现文件动态顺序载入的方法
- PHP数组的初始化 访问数组 数组操作符 多维数组的排序 对数组重新排序 从文件载入数组的方法 数组其他有用的操作 统计数组个数 将数组转换称标量变量 extract()
- JS实现文件动态顺序载入的方法
- Spring中property资源文件动态映射xml载入方法
- 2016/1/17 矩形面积 1,构造方法初始化 长和宽 ,2, 定义成员方法求矩形面积
- 第一次载入这个grid组件时就给这个grid组件初始化数据并选中其中的某一项,但始终无法选中,经单步调试发现,选中行的方法已被执行了,只是在所有的东西都执行完后,grid又刷新了一下,导致原先选中的项
- 2016/1/18 更正补充 2016/1/17 矩形面积 1,构造方法初始化 长和宽 ,2, 定义成员方法求矩形面积
- extjs中第一次访问有效,第二次访问出现部分组件无法显示的,动态改变组件的label值的方法,ExtJs中组件最好少使用ID属性(推荐更多使用Name属性)
- 创建Employee类,在类中定义三个属性:编号,姓名,年龄,然后在构造方法里初始化这三个属性,最后载实现接口中的定义的CompareTo方法,将对象按编号升序排列。根据已有的代码,补全程序。
- 编写Java程序,模拟简单的计算器。 定义名为Number的类,其中有两个整型数据成员n1和n2,应声明为私有。 编写构造方法,用于初始化n1和n2,再为该类定义 加(addition)、 减(su
- C/C++ 二维数据 静态动态声明和初始化及访问方法实例
- 关于Highcharts图表组件动态修改属性的方法(API)总结之Series
- java File这是文件基类,抽象地代表一个文件实体,它有四个不同的构造方法:
- 嵌入式软件开发培训笔记——Java第三天(方法重载、对象的构造与初始化过程分析、封装等)
- iscsi target存储技术-多路径 udev动态管理设备文件方法 nfs
- ExtJS4组件_FieldSet配置-属性-方法详解