脚本宝典收集整理的这篇文章主要介绍了javascript代码实例教程-ExtJs4实战流量统计系统----主框架搭建（三），脚本宝典觉得挺不错的，现在分享给大家，也给大家做个参考。小宝典致力于为广大程序猿（媛）提供高品质的代码服务，请大家多多光顾小站，小宝典在此谢过。 用ExtJs做前端框架，一般而言，主框架基本都会使用Border布局。
大概布局就像这个样子。
顶部左侧一般显示系统名称，右侧用户姓名。
左侧是一个手风琴（Accordion），或者其他的，比如Tree，用以实现导航或功能菜单。
中间就是主内容了，Tab选项卡的形式，以轻松支持多功能，同时可轻松切换，若是整个界面只支持最多一个页面的话，对于一个后台系统来说，确实不太方便。
当然，也可以多加几个模块，如顶部加一个用户信息及常用操作的工具条。
=========================分隔线====================================
如果只是简单的实现这样的布局，那么代码可以很简单。
复制代码
VAR vp = Ext.create('Ext.Viewport', {
layout: 'border',
ITems: [
{
xtyPE: 'panel',
region: 'north',
height: 60
},
{
xtype: 'panel',
region: 'west',
width: 200
},
{
xtype:'panel',
region:'center'
}
]
});
复制代码
定义布局为border，再定义三个内容块，分别为顶部，左侧和中间。
在实际项目中，直接这么简单的定义各块内容行吗？行，没问题，肯定能跑起来。
但对于后期代码阅读、维护、扩展等，那问题就来了。
为什么？因为各模块的内容远不只这么简单，比如左侧模块，简单一些，可能就是一个Tree空间，甚至更简单一些，只是几个固定的项，那么，负责一些呢。
以此系统来说，左侧包含三块内容：栏目列表、功能菜单、系统设置，这三块内容内部各包含一个Tree。
如果代码全部写在内容的Items里的话，层层嵌套，最终会导致单个文件过于庞大，难于阅读及维护。
=========================分隔线====================================
所以，还是建议以ExtJs官方推荐的方式编写脚本，就是以定义（Ext.define）的方式实现各模块，再通过动态加载按需加载所需要的文件。
且按功能分类的将脚本写在不同的文件中，可以看下此系统的所有js文件：
Common：存放在些比较通用的东西，比如数据的Model，一些工具方法等；
Function：对应左侧模块的功能菜单，所有功能菜单里的功能都放在这；
Main：主框架文件夹，图片上有几个是没用的，暂时还没删。Center是中间主内容，LeftPanel是左侧模块，LeftTree是栏目树，SysSetTree是功能菜单树及洗头系统设置树。
Show：前端流量数据展示的一些功能；
Sys：系统设置相关功能文件。
=========================分隔线====================================
好了，说说主框架的搭建吧。
复制代码
Ext.define("Yiqi.Main.Main", {
extend: 'Ext.container.Viewport',
requires: ['Yiqi.Main.Center', 'Yiqi.Main.LeftPanel', 'Yiqi.COMmon.Tools'],
initcomponent: function () {
this.buildTop();
this.buildLeft();
this.buildCenter();
Ext.apply(this, {
layout: 'border',
items: [
this.topPart,
this.leftPart,
this.centerPart
]
});
this.callParent(arguments);
},
buildTop: function () {
// 头部
this.topPart = Ext.create('Ext.panel.Panel', {
region: 'north',
margin: '5 5 0 5',
header: false,
split: true,
collapsible: true,
hideCollapseTool: true,
contentEl: 'top_box',
height: 45
});
},
buildLeft: function () {
//左侧菜单
this.leftPart = Ext.create('Yiqi.Main.LeftPanel', {
region: 'west',
//flex:1,
title: '功能菜单'
});
},
buildCenter: function () {
//主体内容
this.centerPart = Ext.create('Yiqi.Main.Center', {
region: 'center'
//flex:4
});
}
});
复制代码
Ext.define的方式，定义整个主框架。内部各模块组件化，这样代码看上去，简洁多了。
=========================分隔线====================================
因为我需要自定义功能菜单是以Tab选项卡的形式打开还是弹出window的形式打开，所以，整个主框架，也就这一块花了点心思。
先看下功能菜单是怎么样的。
功能地址，就是功能所在的文件路径&文件名，也是模块的类名。
比如：用户管理，它的功能地址是Yiqi.Sys.Security.UserList，Yiqi是定义的动态加载根路径，
所以，这块功能的JS文件路径实际是：/Sys/Security/UserList.js。
功能类的定义：
Ext.define('Yiqi.Sys.Security.UserList',{
extend:'xxxxxx',
//.............TODO
});
这也是使用ExtJs的一大好处，功能菜单，可以随意的定义功能地址、打开方式等等，而不需要改任何代码，当然，你得先把功能做好。
而打开方式的实现过程，也比较简单，定义树中node的单击事件，判断单击的node，有无定义功能地址，如果有，再判断打开方式，如果是弹出窗，则以window的形式打开；如果是选项卡，则以选项卡的方式打开。
复制代码
onItemClick: function (view, rec, item, idx, e) {
var path = rec.get("LoadPath"); //--功能地址
var openType = rec.get("OpenType"); //--打开方式
var me = this;
if (!Ext.Object.isEmpty(path) && !Ext.Object.isEmpty(openType)) {if (openType == "window") {
var win_id = 'syswin_' + rec.get("id");
var win = Ext.WindowManager.get(win_id);
if (win) {
Ext.WindowManager.bringToFront(win);
}
else {
win = Ext.create(path, {
title: rec.get("text"),
iconCls: rec.get("iconCls"),
id: win_id
});
win.show();
}
}
else if (openType == "tab") {
//--选项卡方式打开，先判断当前功能是否已经打开，如果已打开，则无需新建，直接将该功能设为活动选项卡就行了。
//--me.ownerCt.ownerCt.centerPart是主框架的中间内容模块。
var tab = me.ownerCt.ownerCt.centerPart.getComponent('tab_sys_' + rec.get('id'));
if (!tab) {
var newitem = Ext.create(path, {});
tab = Ext.create('Ext.panel.Panel', {
title: rec.get('text'),
itemId: 'tab_sys_' + rec.get('id'),
layout: 'fit',
closable: true,
iconCls: rec.get('iconCls') || 'icon_preview',
items: newitem
});
me.ownerCt.ownerCt.centerPart.add(tab);
}
//--设为活动选项卡
me.ownerCt.ownerCt.centerPart.setActiveTab(tab);
}
}
}
复制代码
觉得可用，就经常来吧！ 脚本宝典 欢迎评论哦！ js脚本，巧夺天工，精雕玉琢。小宝典献丑了！
以上是脚本宝典为你收集整理的javascript代码实例教程-ExtJs4实战流量统计系统----主框架搭建（三）全部内容，希望文章能够帮你解决javascript代码实例教程-ExtJs4实战流量统计系统----主框架搭建（三）所遇到的问题。
本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。