yiminghe
- 浏览: 1431712 次
- 性别:
- 来自: 上海
-
文章分类
最新评论
-
luhouxiang：
写的很不错，学习了
Extjs 模块化动态加载js实践 -
kingkongtown：
如果想改成淘宝后台那样，可以在编辑器批量上传图片呢？
kissy editor 阶段体会 -
317966578：
兄弟我最近也在整jquery和caja 开放一些接口。在git ...
caja 原理 : 前端 -
liuweihug：
Javascript引擎单线程机制及setTimeout执行原 ...
setTimeout ,xhr,event 线程问题 -
辽主临轩：
怎么能让浏览器不进入 文档模式的quirks模式，进入标准的
浏览器模式与文本模式
前一段转载了一篇
透明加载外部 javascript 文件函数
挺有启发的，觉得可以套用在extjs的管理上，管理界面 两栏布局，左边栏一棵菜单树，右面一个tabpanel，菜单树的每个菜单代表一个模块，每个模块用一个js来实现，需要时载入就行了，而不需要刚开始时把所有的模块都载进入
当点击菜单树的节点时调用：
function openGetBugsPanel(name) {
var moduleId = 'BugList_tab';
//一个静态方法，表示从一个js载入了一个新的模块
Ext.ux.yiminghe.framework.core.newModule(
{
//模块的id
moduleId: moduleId,
//在哪个tabpanel新加一个模块
tabPanel: window.tabs,
//模块所在js
moduleURL: 'js/modules/Bugs.js',
//模块所需要的参数
moduleParams: {
title: name,
MYBugs: false
},
//如果该模块已经在tabpanel上了，怎么处理
existCallBack: function(panel) {
panel.setTitle(name);
panel.filters.clearFilters();
}
}
);
}
其实每个模块就是一个panel，加入到tabpanel 就行了，关键是要 动态构造这个panel
例如这个bugs.js
/**
ajax 直接返回一个类,eval ,new
**/
Ext.extend(Ext.Panel, {
initComponent: function() {
var bugsGrid_metaData = [
{
dataIndex: 'projectId',
header: '项目',
width: 70,
sortable: true,
show: true
},
{
dataIndex: 'moduleId',
header: '模块',
width: 70,
sortable: true,
show: true
},
{
dataIndex: 'bid',
header: 'Bug/Task编号',
sortable: true,
width: 100
},
{
dataIndex: 'btitle',
header: 'Bug/Task标题',
width: 250,
sortable: true,
show: true
},
{
dataIndex: 'degree',
header: '严重程度',
width: 100,
sortable: true,
show: true,
renderer: function(val) {
return '<span style="color:green">' + val + '</span> ';
}
},
{
dataIndex: 'status',
header: '状态',
width: 70,
show: true,
sortable: true,
renderer: function(val) {
return '<span style="color:red">' + val + '</span> ';
}
},
{
dataIndex: 'who',
header: '由谁创建',
width: 70,
sortable: true,
show: true
},
{
dataIndex: 'assign',
header: '指派给谁',
width: 70,
sortable: true,
show: true
},
{
dataIndex: 'resolve',
header: '由谁解决',
width: 70,
sortable: true,
show: true
},
{
dataIndex: 'moduleId',
header: 'moduleId',
sortable: true,
width: 70
},
{
dataIndex: 'method',
header: '解决方案',
width: 100,
sortable: true,
show: true
},
{
dataIndex: 'openedTime',
header: '提交时间',
width: 150,
sortable: true,
show: true,
renderer: function(val) {
var d = new Date();
d.setTime(val);
return '<span style="color:red">' + d.toLocaleString() + '</span> ';
}
}
];
Ext.grid.filter.StringFilter.prototype.icon = 'desktop/js/filter/img/find.png';
this.filters = new Ext.grid.GridFilters({
filters: [
{
type: 'list',
dataIndex: 'projectId',
single: true,
options: PROJECTS,
phpMode: true,
listeners: {
'update': function() {
var pid = this.getValue();
if (pid == '') return;
// 实例化Ext发送Ajax请求需要的Connection对象
var conn = new Ext.data.Connection();
// 发送异步请求
conn.request({
// 请求地址
url: 'bug/get_modules_ext.jsp?project_id=' + pid,
method: 'GET',
// 指定回调函数
callback: callback
});
//回调函数
function callback(options, success, response) {
if (success) {
// 如果成功则使用Ext将JSON字符串转换为JavaScript对象
var jsonObj = Ext.util.JSON.decode(response.responseText);
// 到这就可以取你想要的东东了
// 取消息id
var m_data = jsonObj.data;
filters.getFilter(1).options = m_data;
filters.getFilter(1).store.loadData(m_data);
} else {
alert(response.responseText);
}
}
}
}
},
{
type: 'list',
dataIndex: 'moduleId',
single: true,
options: [],
phpMode: true
},
{
type: 'string',
dataIndex: 'btitle'
},
{
type: 'list',
dataIndex: 'assign',
single: true,
//id:'assign_filter',
options: USERS,
phpMode: true
},
{
type: 'list',
dataIndex: 'who',
single: true,
options: USERS,
phpMode: true
},
{
type: 'list',
dataIndex: 'resolve',
single: true,
options: USERS,
phpMode: true
},
{
type: 'list',
dataIndex: 'status',
single: true,
//id:'status_filter',
options: BUGSTATUSES,
phpMode: true
}
]
});
var gridMenuDatas = [
{
text: '提交Bug/Task',
iconCls: 'badd',
handler: function() {
addBugFormPanel('提交Bug/Task');
}
},
'-',
{
text: '编辑',
iconCls: 'bedit',
handler: function() {
var record = this.getSelectionRecord();
createEditBugForm(record.get('bid'), record.get('btitle'));
}
}
,
'-',
{
text: '解决',
iconCls
:
'bok',
handler
:
function() {
var record = this.getSelectionRecord();
createResolveBugForm(record.get('bid'), record.get('btitle'), record.get('moduleId'));
}
}
,
'-',
{
text: '历史',
iconCls: 'bsearch',
handler: function() {
var record = this.getSelectionRecord();
var moduleId = 'bugHistory_Tab' + record.get('bid');
var realId = 'bugHistory_Tab' + record.get('bid');
Ext.ux.yiminghe.framework.core.newModule(
{
moduleId: moduleId,
realId: realId,
tabPanel: window.tabs,
moduleURL: 'js/modules/BugHistories.js',
moduleParams: {
bugId: record.get('bid'),
bugName: record.get('btitle'),
moduleId: record.get('moduleId')
},
existCallBack: function(panel) {
panel.bugHistoryGrid.reload();
}
}
);
}
},
{
text: '链接地址',
iconCls: 'blist',
handler: function() {
var record = this.getSelectionRecord();
if (record)
Ext.MessageBox.alert(record.get('btitle') + ' - Bug地址', BASEPATH + '/bug/BtsBugDetail.jsp?bugId=' + record.get('bid'));
}
}
];
var gridContextMenuDatas = [
gridMenuDatas[0], gridMenuDatas[2], gridMenuDatas[4], gridMenuDatas[6], gridMenuDatas[7]
];
var dbClick_g = function(record) {
var moduleId = 'bugHistory_Tab';
var realId = 'bugHistory_Tab' + record.get('bid');
Ext.ux.yiminghe.framework.core.newModule(
{
moduleId: moduleId,
realId: realId,
tabPanel: window.tabs,
moduleURL: 'js/modules/BugHistories.js',
moduleParams: {
bugId: record.get('bid'),
bugName: record.get('btitle'),
moduleId: record.get('moduleId')
},
existCallBack: function(panel) {
panel.bugHistoryGrid.reload();
}
}
);
};
this.bugsGrid = new Ext.ux.yiminghe.JsonGridPanel({
columns: bugsGrid_metaData,
pageSize: 15,
initload: true,
plugins: [this.filters],
viewConfig: {
forceFit: true,
autoFill: true
},
autoScroll: true,
sm: new Ext.grid.RowSelectionModel(
{
singleSelect: true
}),
dataSource: 'bug/BtsGetBugsDO_Ext.jsp',
tbar: gridMenuDatas,
stripeRows: true,
border: false,
bodyStyle: 'width:100%',
isGroupHeader: false,
rowcontextmenu: gridContextMenuDatas,
doubleClick: dbClick_g,
pageBarPlugins: [new Ext.ux.Andrie.pPageSize({
beforeText: '每页显示',
afterText: '条'
})]
});
if (this.MYBugs) {
this.filters.getFilter('assign').setValue(CURRENTUSERID);
this.filters.getFilter('assign').setActive(true, true);
this.filters.getFilter('status').setValue(0);
this.filters.getFilter('status').setActive(true, true);
} else {
this.filters.clearFilters();
this.bugsGrid.reload();
}
Ext.apply(this, {
title: this.title,
iconCls: 'tabs',
autoScroll: false,
id: 'BugList_tab',
layout: 'fit',
items: this.bugsGrid,
closable: true
});
//调用父类构造函数（必须）
module.superclass.initComponent.apply(this, arguments);
}
});
可以看到在这个模块中可以调用 传过来的参数
{
title:name,
MYBugs:false
}
现在关键是 newModule 的实现了 ，也很简单 ，就是 ajax把 模块类区过来 ，new 一下 就是一个新的模块了 ，不过要注意一下缓存这个模块类的定义
Ext.namespace("Ext.ux.yiminghe.framework.core");
Ext.ux.yiminghe.framework.core.newModule = function(config) {
//模块类的名字
var moduleId = config.moduleId;
//主Tab名字
var tabPanel = config.tabPanel;
//加载模块类的地址
var moduleURL = config.moduleURL;
//模块实例tab的id
var realId = config.realId || moduleId;
//缓存模块
tabPanel.uxmodules = tabPanel.uxmodules || {};
//模块实例的配置参数
var moduleParams = config.moduleParams || {};
if (tabPanel.findById(realId)) {
tabPanel.findById(realId).show();
//如果已经载入该Tab ,则调用调整函数
if (config.existCallBack)
config.existCallBack(tabPanel.findById(realId));
return;
}
if (tabPanel.uxmodules[moduleId]) {
var module = tabPanel.uxmodules[moduleId];
var moduleInstance = new module(moduleParams);
var newCmp = tabPanel.add(moduleInstance);
tabPanel.doLayout();
tabPanel.setActiveTab(newCmp);
return;
}
tabPanel.loadMask.show();
Ext.Ajax.request(
{
method: 'GET',
disableCaching: false,
//utf-8 编码
url: moduleURL,
success: function(response) {
var module = eval(response.responseText);
tabPanel.uxmodules[moduleId] = module;
var moduleInstance = new module(moduleParams);
var newCmp = tabPanel.add(moduleInstance);
tabPanel.doLayout();
tabPanel.setActiveTab(newCmp);
tabPanel.loadMask.hide();
}
}
);
}
总结一下流程：
1.请求一段 javascript 代码(定义一个Panel子类)
2.eval 出类型 T
3.得到新类型的实例 instance = new T
4.总控的tabpnel add instance 就可以了。
分享到：
评论
12 楼
luhouxiang
2015-05-13
写的很不错，学习了
11 楼
zhu2217935
2012-08-28
在使用Ext动态加载,时会出现各个模块之间相影响,导致显示不正常的问题怎么解决?
10 楼
Anthony_Zhang
2012-07-24
请问一下？ var moduleInstance = new module(moduleParams); 总是在这里退出，请问该怎么办呢，可以给个可运行的详细的例子不，谢谢了
9 楼
yiminghe
2009-12-25
88112870 写道
请问moduleURL:'js/modules/Bugs.js',这个如何改成动态的呢？
就是根据树型菜单传过来的参数动态加载，我的树ID为Int型自增，我现在是通过命名
1.js,2.js这样来动态加载，请问楼主有好的方法能任意定义文件名找到模块么？
（模块名为中文）
就是根据树型菜单传过来的参数动态加载，我的树ID为Int型自增，我现在是通过命名
1.js,2.js这样来动态加载，请问楼主有好的方法能任意定义文件名找到模块么？
（模块名为中文）
功能树可以通过后台xml配置，根据权限载入不同的菜单，每个菜单读取后台的功能js文件路径
，前台点击时载入对应功能js文件即可。
8 楼
88112870
2009-12-25
请问moduleURL:'js/modules/Bugs.js',这个如何改成动态的呢？
就是根据树型菜单传过来的参数动态加载，我的树ID为Int型自增，我现在是通过命名
1.js,2.js这样来动态加载，请问楼主有好的方法能任意定义文件名找到模块么？
（模块名为中文）
就是根据树型菜单传过来的参数动态加载，我的树ID为Int型自增，我现在是通过命名
1.js,2.js这样来动态加载，请问楼主有好的方法能任意定义文件名找到模块么？
（模块名为中文）
7 楼
javaAlpha
2009-11-17
也遇到和楼主类似的问题 因为缓存引起的
6 楼
yiminghe
2009-09-22
jacky2007 写道
我在你的基础下略修改了一下
恩，谢谢，疏忽了，当时好像也没报错。。。。
不用你那么麻烦的，函数头加上这个就行了
//缓存模块
tabPanel.uxmodules = tabPanel.uxmodules || {};
5 楼
jacky2007
2009-09-20
我在你的基础下略修改了一下
Ext.ux.newModule = function (config) {
//模块类的名字
var moduleId=config.moduleId;
//主Tab名字
var tabPanel=config.tabPanel;
//加载模块类的地址
var moduleURL=config.moduleURL;
//模块实例tab的id
var realId="tab_"+ moduleId;
//模块实例的配置参数
var moduleParams=config.moduleParams||{};
if (tabPanel.findById(realId)) {
tabPanel.findById(realId).show();
return;
}
//这里判断了uxmodules是否定义，因为我调试时会出现tabPanel.uxmodules is undefined 的错误
if(tabPanel.uxmodules!=undefined && tabPanel.uxmodules[moduleId]) {
var module =tabPanel.uxmodules[moduleId];
var moduleInstance = new module(moduleParams);
var newCmp = tabPanel.add(moduleInstance);
tabPanel.doLayout();
tabPanel.setActiveTab(newCmp);
return;
}
Ext.Ajax.request(
{
method: 'GET',
disableCaching :false,
//utf-8 编码
url: moduleURL,
success: function(response) {
var module = eval(response.responseText);
//这里定义一下tabPanel.uxmodules
if(tabPanel.uxmodules==undefined){
tabPanel.uxmodules=new Array();
}
tabPanel.uxmodules[moduleId] = module;
var moduleInstance = new module(moduleParams);
//这里设计一下module的ID，因为我的是动态的Panel，没有定义ID的
moduleInstance.id="tab_"+moduleId;
var newCmp = tabPanel.add(moduleInstance);
tabPanel.doLayout();
tabPanel.setActiveTab(newCmp);
tabPanel.loadMask.hide();
}
}
);
}
4 楼
yiminghe
2009-09-20
jacky2007 写道
if(tabPanel.uxmodules[moduleId])
请问
tabPanel.uxmodules这个方法是干嘛用的？
在哪里？我看EXTJS的API没发现有这个方法
请问
tabPanel.uxmodules这个方法是干嘛用的？
在哪里？我看EXTJS的API没发现有这个方法
自己设的属性，用于缓存模块代码，不用每次都去下载
3 楼
jacky2007
2009-09-20
if(tabPanel.uxmodules[moduleId])
请问
tabPanel.uxmodules这个方法是干嘛用的？
在哪里？我看EXTJS的API没发现有这个方法
请问
tabPanel.uxmodules这个方法是干嘛用的？
在哪里？我看EXTJS的API没发现有这个方法
2 楼
yiminghe
2009-07-27
gkuiyj 写道
不错。我正有这样的需求， 楼主有实现了的小例子吗？ 学习！····
看一下最后的 Ext.ux.yiminghe.framework.core.newModule 就行了，
很简单的，
1.请求一段 javascript 代码(定义一个Panel子类) ,
2.eval 出类型 T
3.得到新类型的实例 instance = new T
4.总控的tabpnel add instance 就可以了。
1 楼
gkuiyj
2009-07-27
不错。我正有这样的需求， 楼主有实现了的小例子吗？ 学习！····
发表评论
-
Extjs 实践细节备忘 -3
2009-04-12 20:26 23841. dragdrop 继承层次 dd - ... -
Extjs 实践细节备忘 -2
2009-04-12 05:43 27031. grid 列宽问题 可以指定 每列的宽度数值 ... -
Extjs 实践细节备忘 -1
2009-04-11 01:47 2659在使用 extjs 开发 OAOP 应用中 ，除了API文档外 ... -
长字串换行问题
2009-03-01 23:10 5692很久没用过 ，textarea ... -
Extjs portal 应用初探
2009-02-24 23:09 5950近期在研究拖放的实现 ，看了看 Extjs 的 portal ... -
Extjs 聊天窗口 -续3 用pushlet来实现
2008-12-23 22:16 15928前一篇 自己实现了http长连接 ， 很繁琐，后 ... -
Extjs 聊天窗口 -续2 - http长连接的实现
2008-12-16 00:55 13229认为长连接就是有个http请求被服务器阻塞了 ，这样的话浏览 ... -
Extjs CRUD 模板
2008-12-12 00:52 7735也算是一个总结吧，备忘，总结了一个增删改查的例子，以后要达到的 ... -
Ext 聊天窗口的实现 - 续
2008-12-02 15:13 6603<filter> <fil ... -
Ext 树操作
2008-11-10 23:21 4427后台 树 节点 定义 menu_info { ... -
Ext 一个聊天窗口的设计
2008-11-10 00:26 37231.关键是要 弹性设计，自动适应浏览器 部件要: ... -
Ext.data.Store 与 GridFilters
2008-11-03 16:12 5311Store 每次 reload 会记着上次的参数，比如 pa ... -
Ext 实现 文件上传 进度显示
2008-10-24 18:15 5122利用了 ahxu-commons-fileuploadex-b ... -
Ext official doc - class-event-observer
2008-10-23 18:20 1383....ppt -
Ext 多文件上传面板扩展
2008-10-23 16:53 8326扩展了 Ext.Panel ，加入文件框列表 ，并控制删 ... -
Ext Grid 表头显示问题
2008-09-27 23:51 3292出现问题了，当 Grid div 放在 table 布局下的话 ... -
JSON marsh && unmarsh
2008-09-23 00:46 1910Ext 端用 //Encodes an Objec ... -
[extjs] formpanel 标准提交问题
2008-09-19 02:29 3278formpanel 的 标准提交 有 bug？ var ta ... -
ComboBox 传值问题
2008-09-19 00:07 5176field -> textfield->trigg ... -
Ext 2 概述
2008-09-18 01:11 2238欢迎来到Ext 2.0。 在下列各章节中，你将会接触到E ...
相关推荐
extjs实现动态树加载菜单
AJAX： 以JSON数据格式，使用ExtJS构造动态异步加载的树。
Extjs动态菜单可添加子项和编辑子项，拖动保存、dwr实现存储数据。
extjs动态添加tabpanel标签页支持pannel嵌入 逻辑代码在 MyWindow.js里面直接调用 方法 就可以
可以动态的新增和删除Ext控件，这里支持的上传控件的新增和删除。
extjs4.0中，不想一次性加载所有...extjs4.0好像设计上是一个应用对应一个application，所以原先想通过动态加载多个application来实现上面的需求。但是那样会有其问题出现，即使解决，好像也不是很好，所以改用这种方式
Extjs4.2 动态加载项目(权限模块)，直接下载下来即可使用，数据可自动生成。
自己由于使用extjs3，开发了一个动态加载js的管理器，类似extjs4的使用方式，但实现方式完全不一样，有兴趣的朋友可以下载后使用，欢迎吐槽
NULL 博文链接：https://fxiaozj.iteye.com/blog/1174901
ExtJS 实现动态处理加载 grid 实现了CRUD还有分页功能
Extjs动态Grid的生成 htm
extjs4动态添加表头字段、删除、增加记录！
本例采用ASP.NET MVC3 +EXTJS4 MVC 框架，完美实现了EXTJS4动态加载JS文件，对ASP.NET MVC3及EXTJS4 MVC 各应用要点进行了应用。对于想采用ASP.NET MVC3 +EXTJS4 MVC 框架的学习者有很好的帮助，快速掌握MVC框架，本...
可以通过extjs3进行动态加载js,也可以直接通过原生js进行调用 拥有extjs4的动态加载功能， 可以同时加载多个js文件， 同时加载过的文件不会重复加载
一个js文件，实现动态加载js文件。在用extjs时，为了避免一次全部加载js文件而写的。
mysql的数据库 extjs 动态加载 增删改查 拖拽 Tree 绝对经典
js代码，实现了 extjs4.x tabpanel 动态加载panel和html的功能
NULL 博文链接：https://kaobian.iteye.com/blog/996146
extjs实现动态树
ExtJs可视化开发工具,或尽然拖放控件轻松实现页面布局,很好用