最近开发项目用到ext,不想使用iframe,在参考了大量文章以后使用eval的方式,来模块化js代码,实现框架页
主页面的js代码 main.js
// 页面加载开始
// 定义一个锁屏的遮罩 因为树菜单是异步读取的
var myMask_info = "加载数据中,请稍后...";
var myMask = new Ext.LoadMask(Ext.getBody(), {msg:myMask_info});
// 模块的数组 用来缓存模块function的
var moduleArray = {};
Ext.onReady( function() {
Ext.QuickTips.init();
// 加载锁屏 loadmask
myMask.show();
// 动态获取树节点 这里ajax使用的是dwr(直接输出json数据) 异步加载使用的是第三方的DWRTreeLoader
var dwrloader = new Ext.ux.DWRTreeLoader({
dwrCall:AsyncMainSev.getUserFuncTreeJSON
});
// 主页面上初始化一个Tab面板
var contentPanel = new Ext.TabPanel({
region:'center',
enableTabScroll:true,
activeTab:0,
items:[{
id:'homePage',
title:'首页',
autoScroll:true,
closable:true,
html:'<iframe id="frame_main" src="pages/main/child1.html" width="100%" height="400" frameborder="0" scrolling="auto"></iframe>'
}]
});
var _tree = new Ext.tree.TreePanel({
id:'forum-tree',
region:'west',
title:'功能菜单',
split:true,
width: 325,
minSize: 175,
maxSize: 400,
collapsible: true,
margins:'0 0 5 5',
rootVisible:false,
lines:false,
// selModel: new Ext.tree.MultiSelectionModel(),
autoScroll:true,
loader: dwrloader,
root: new Ext.tree.AsyncTreeNode({text:'root',hasChildren:true,id: '0'})
/*listeners: {
'checkchange': function(node, checked){
if(checked){
node.getUI().addClass('complete');
}else{
node.getUI().removeClass('complete');
}
}
}*/
});
//加载完成事件 隐藏掉锁屏loadmask
_tree.addListener("load",function(){myMask.hide();});
/**以下代码用来给叶子节点添加事件**/
var tree = Ext.getCmp('forum-tree');
/*
var sm = tree.getSelectionModel();
sm.on('selectionchange', function(sm, node){
//console.log(node.attributes.attributes.url);
// 测试iframe的方式 而注释掉
var n = contentPanel.getComponent(node.id);
if (!n) { ////判断是否已经打开该面板
n = contentPanel.add({
'id':node.id,
'title':node.text,
closable:true,
autoLoad:{url:node.attributes.attributes.url, scripts:true} //通过autoLoad属性载入目标页,如果要用到脚本,必须加上scripts属性
});
}
contentPanel.setActiveTab(n);
var n = contentPanel.getComponent(node.id);
if(!n){
n = contentPanel.add({
id:node.id,
title:node.text,
autoScroll:true,
closable:true,
html:'<iframe id="frame_main" src="' + node.attributes.attributes.url + '" width="100%" height="400" frameborder="0" scrolling="auto"></iframe>'
});
}
contentPanel.setActiveTab(n);
});
*/
// 10-03-02 再次修改为tree.on方法 取消原来的在selectionmodel上做
/*
tree.on('click', function(node){
// 如果是叶子节点
if ( node.isLeaf() ){
// 得到节点对象Ext.tree.TreeNode
var n = contentPanel.getComponent(node.id);
// 如果不存在 在TabPanel上添加一个tab 挂载iframe页面
if(!n){
n = contentPanel.add({
id:node.id,
title:node.text,
autoScroll:true,
closable:true,
html:'<iframe id="frame_main" src="'
+ node.attributes.attributes.url
+ '" width="100%" height="400" frameborder="0" scrolling="auto"></iframe>'
});
}
// 激活
contentPanel.setActiveTab(n);
}
});
*/
// 10-03-15 再次修改 实验性修改为之加载外部文件js 不使用框架页了
tree.on('click', function(node){
myMask.show();
var nodeattr = node.attributes.attributes;
// 如果是叶子节点
if ( node.isLeaf() ){
// 获取这个模块的id
var moduleId = nodeattr.module_name;
var n = contentPanel.getComponent(moduleId);
// 如果不存在 在TabPanel上添加一个tab id为模块的id
if(!n){
// 如果数组里初始化过此module
if( moduleArray[moduleId] != undefined ){
var module = moduleArray[moduleId];
var moduleInstance = new module();
var outCmp = contentPanel.add(moduleInstance);
contentPanel.setActiveTab(outCmp);
myMask.hide();
}else{
// ajax请求 来eval一段module的代码 并执行 然后加到tabpanel上
Ext.Ajax.request({
method: 'GET',
url: nodeattr.js_source,
success: function(response){
var module = eval(response.responseText);
moduleArray[moduleId] = module;
var moduleInstance = new module();
var outCmp = contentPanel.add(moduleInstance);
contentPanel.setActiveTab(outCmp);
myMask.hide();
}
});
}
}
// 获取js代码的绝对路径
}
});
// 开始渲染整个面板 并整合定义好的tree和TabPanel组建
var viewport = new Ext.Viewport( {
layout : 'border',
items : [ {
xtype: 'box',
region: 'north',
height: 30
},
_tree,
contentPanel
]
});
});
ajax请求的js代码的路径是写到了节点node的属性里,在初始化树节点的时候就已经动态的写好了
一个子模块的示例 用户管理
useradmin.js
// 用户管理模块
Ext.extend(Ext.Panel, {
constructor: function(config) {
// 表格模型
var cm = new Ext.grid.ColumnModel([
{
id: 'username',
header: "姓名",
dataIndex: 'username',
width: 100
},{
id: 'email',
header: "电子邮件",
dataIndex: 'email',
width: 100
},{
id: 'createdate',
header: "注册时间",
dataIndex: 'createdate',
width: 100
},{
id: 'updatedate',
header: "修改时间",
dataIndex: 'updatedate',
width: 100
}]);
//console.log(basePath+'campaign/id/review');
// 数据来源储存
var user_store = new Ext.data.Store({
url: basePath+'users/ajaxserv',
reader: new Ext.data.JsonReader({
root: 'users',
totalProperty: 'totalCount',
id: 'id'
}, [
'username', 'email', 'createdate', 'updatedate'
])
});
cm.defaultSortable = true;
user_store.load();
config = Ext.apply({
id: 'm_useradmin',
title: '用户管理',
autoScroll: true,
closable:true ,
items:[
new Ext.grid.GridPanel({
store: user_store,
cm: cm,
stripeRows: true,
height: 350,
//width: 800,
autoWidth : true,
loadMask: {msg:'正在加载数据,请稍后'},
title: '用户列表' ,
tbar: [{ text: '添加', iconCls: 'new-item', tooltip: { title:'添加用户', text:'在此系统中注册一个新的用户'} }],
bbar: new Ext.PagingToolbar({
pageSize: 25,
store: user_store,
displayInfo: true,
displayMsg: '显示记录 {0} - {1} of {2}',
emptyMsg: "没有任何记录"
})
})
]
}, config);
module.superclass.constructor.call(this, config);
}
});
分享到:
相关推荐
9.8.2 在单页面应用中使用卡片布局实现“页面”切换 / 496 9.9 本章小结 / 498 第10章 重构后的grid / 500 10.1 grid的基类及其构成 / 500 10.1.1 概述 / 500 10.1.2 表格面板的运行流程:ext.panel.table / ...
《精通JS脚本之ExtJS框架》由浅入深地讲解了ExtJS在Web开发中的相关技术。本书共分17章,分别介绍了JavaScript的对象编程、JavaScript浏览器对象模型和事件机制、ExtJS的核心类库和组件、ExtJS的事件处理方式、设计...
《精通JS脚本之ExtJS框架》由浅入深地讲解了ExtJS在Web开发中的相关技术。本书共分17章,分别介绍了JavaScript的对象编程、JavaScript浏览器对象模型和事件机制、ExtJS的核心类库和组件、ExtJS的事件处理方式、设计...
-重构了示例网站的架构,目前只有一层IFrame结构。 -为TabStrip增加EnableTabCloseMenu属性,是否启用右键菜单,可用来关闭当前Tab和所有其他Tab。 -为NumberBox增加DecimalPrecision属性,用来控制小数点后的...
6、在应用Web化的大潮中,单页面应用越来越受到追捧,如何使用Ext快速而简单地开发单页面应用? 7、Web开发中最让人头疼的是脚本调试 .如何才能很好地利用目前公认最好的调试工具FireBug发现并解决开发中遇到的各种...
它的结构遵循基本的 MVC (模型视图控制器) 模式, 以及所有可以用Pimcore 中的 Zend Framework 的 API (应用程序接口) (数据库抽象,缓存,i18n等), 模块和助手 (Zend View Helpers等)。其前端管理界面是由 Ext JS 的...
所以单另上传了.如果不需要这两万条数据的朋友可以光下该实例就好了.如果需要记录.则可以去下载记录集.(下载地址:http://download.csdn.net/source/513063) create table HUBO_MUSIC ( ID VARCHAR2(32) ...
-重构了示例网站的架构,目前只有一层IFrame结构。 -为TabStrip增加EnableTabCloseMenu属性,是否启用右键菜单,可用来关闭当前Tab和所有其他Tab。 -为NumberBox增加DecimalPrecision属性,用来控制小数点后的...
3.数据库ORM持久化框架使用Hibernate 5.4,通过加载不同的驱动程序支持MySQL、Oracle、Microsoft SQL Server等数据库。4.具有云端软件版本更新提示服务器。5.具有能提供一键式打包、解包、上传、下载、无配置式布署...
如果您想更改输入/输出位置和结构,则webpack配置也很容易自定义。 您唯一需要编辑的就是chrome扩展程序的权限,具体取决于您的需求。 declarativeContent默认情况下处于启用状态,因此演示可以正常工作(如果您在...
PrettyFaces: EL API访问PrettyContext 支持JSF 1.1 增强了错误页面和servlet重定向 PrettyFaces是一个JSF1.2和JSF2.0的扩展,用来创建便于书签收藏、漂亮的网址。 PrettyFaces优雅的解决了这个问题,包括诸如功能:...