ExtJS 4.2 业务开发(一)主页搭建
2016-09-27 23:19
288 查看
本篇开始搭建一个ExtJS 4.2单页面应用, 这里先介绍主页的搭建,内容包括:主页结构说明、扩展功能等方面。
2. 扩展功能
3. 在线演示
header:存放系统的名称、logo、用户信息等内容。
menu:菜单区域,以Tree形态展现业务入口。
tab:业务区域,具体的业务都以tab页的形式嵌入到此区域。
此方法取代了之前的Ext.onReady(),并增加了一些新的功能:创建一个viewport组件、设定应用程序的名称等等。
API:http://docs.sencha.com/extjs/4.2.1/#!/api/Ext.app.Application
第1种:点击菜单,动态加载业务文件。
第2种:业务tab页的切换,修改页面URL的值。
步骤:点击菜单 → 加载业务文件 → 在tab容器内展现此业务
代码:在tree容器添加select事件
步骤:新建或切换tab页 → 选中菜单的节点 → 修改页面URL
代码:在tab容器添加tabchange事件
End
Web开发之路系列文章
菜单加载中...
目录
1. 主页结构说明2. 扩展功能
3. 在线演示
1. 主页结构说明
1.1 主页布局
传统的ExtJS 4.2应用,基本布局如下:1.2 主页布局分析
根据上面的主页布局图,可转换具体试图结构:header:存放系统的名称、logo、用户信息等内容。
menu:菜单区域,以Tree形态展现业务入口。
tab:业务区域,具体的业务都以tab页的形式嵌入到此区域。
1.3 主页布局代码
从ExtJS 4开始,应用程序的入口点开始使用为 Ext.application。此方法取代了之前的Ext.onReady(),并增加了一些新的功能:创建一个viewport组件、设定应用程序的名称等等。
API:http://docs.sencha.com/extjs/4.2.1/#!/api/Ext.app.Application
Ext.application({ name: 'AKApp', launch: function () { // 设定Viewport Ext.create('Ext.container.Viewport', { name: 'MainFrame', layout: 'border', items: [ Ext.create('Ext.panel.Panel', { // header width: '100%', height: 50, bodyBorder: false, border: false, region: 'north', style: { background: '#739b2e' }, html: '<div id="header_content">ExtJSDemo</div>' }), Ext.create('Ext.tree.Panel', { // menu title: '目录', id: 'app_tree', rootVisible: false, lines: false, split: true, width: '20%', region: 'west', root: { expanded: true, children: [ { text: '业务', expanded: true, children: [] }, { text: 'Demo', expanded: true, children: [ { text: '创建组件', id: 'Demo.CreateCompareP', leaf: true }, { text: '查找组件', id: 'Demo.QueryCompareP', leaf: true }, ] } ] }, listeners: { select: function (thisView, thisControl) { if (thisControl.data.leaf) { // TODO:点击菜单,创建相关的Tab页 } } } }), Ext.create('Ext.tab.Panel', { // tab id: 'app_tabContainer', region: 'center', autoScroll: true, defaults: { autoScroll: true, bodyPadding: 4, closable: true //tab页的关闭按钮 } }), ] }); } });
2. 扩展功能
这里说明主页常见的2种功能:第1种:点击菜单,动态加载业务文件。
第2种:业务tab页的切换,修改页面URL的值。
2.1 点击菜单,动态加载业务文件
说明:各业务的入口都是在ExtJS tree组件的叶子节点上,系统初次加载时只展示了主页功能,并没有加载任何的业务代码。现在要求点击菜单的节点,展示业务页面。步骤:点击菜单 → 加载业务文件 → 在tab容器内展现此业务
代码:在tree容器添加select事件
Ext.create('Ext.tree.Panel', { title: '目录', root: { expanded: true, children: [ { text: '业务', expanded: true, children: [ { text: '船舶管理', id: 'ShipMgr.ShipMgrP', leaf: true }, ] } ] , listeners: { select: function (thisView, thisControl) { if (thisControl.data.leaf) { var tabId = thisControl.data.id; // 1.设置tab页的默认参数 var tabConfig = { closable: true, title: thisControl.data.text, id: tabId, bodyBorder: false, border: false, icon: 'tab.png' }; // 2.判断是否已存在此Tab,若存在就显示 var newTab = Ext.getCmp('app_tabContainer').getComponent(tabId); if (!newTab) { // 2.1 加载业务文件 var tabPath = 'app.' + tabId; // 界面路径 eg:app.ShipMgr.ShipMgrP Ext.syncRequire(tabPath, function () { newTab = Ext.create(tabId, tabConfig); Ext.getCmp('app_tabContainer').add(newTab); Ext.getCmp('app_tabContainer').setActiveTab(newTab); }); } else { // 2.2 已存在此业务的tab页就直接设置active Ext.getCmp('app_tabContainer').setActiveTab(newTab); } } } } })
2.2 业务tab页的切换,修改页面URL的值
说明:此功能主要用于根据URL直接访问具体的业务额,当然访问之前最好还要做下权限判断。步骤:新建或切换tab页 → 选中菜单的节点 → 修改页面URL
代码:在tab容器添加tabchange事件
Ext.create('Ext.tab.Panel', { id: 'app_tabContainer', region: 'center', autoScroll: true, listeners: { tabchange: function (thisControl, newCard, oldCard) { var tabId = newCard.id; // 1.选中菜单的节点 var node = Ext.getCmp('app_tree').store.getNodeById(tabId); if (node) { Ext.getCmp('app_tree').getSelectionModel().select(node); } else { Ext.getCmp('app_tree').getSelectionModel().select(0); } // 2.修改url if (oldCard) { history.pushState('', '', location.href.split('#')[0] + '#' + newCard.id); } } } }),
3. 在线演示
在线演示:http://www.akmsg.com/ExtJS/index.htmlEnd
Web开发之路系列文章
菜单加载中...
相关文章推荐
- ExtJS 4.2 业务开发(二)数据展示和查询
- [extjs] ExtJS 4.2 开发环境搭建
- ExtJS 4.2 业务开发(三)数据添加和修改
- Android SDK4.2 (API17) 开发环境的搭建
- Android SDK4.2 (API17) 开发环境的搭建 http://blog.csdn.net/teamlet/article/details/8194933
- 在AMD的WIN7上搭建IOS开发环境(mac 10.6.8 + xcode 4.2)
- Ubuntu12.04 CUDA4.2开发环境搭建
- 手把手搭建 android 开发环境||资源打包下载【更新到android 4.2】
- Android SDK4.2 (API17) 开发环境的搭建 .
- Eclipse (eclipse-jee-juno-SR1-win32-x86_64 4.2)搭建ndk开发环境
- Android SDK4.2 (API17) 开发环境的搭建
- Android 4.2(API17)下如何搭建开发环境
- Extjs之Eclipse及spket的开发环境的搭建
- ASP.NET MVC4 中整合 NHibernate3.3、Spring.NET2.0、ExtJS4 笔记二:开发环境搭建
- ubuntu 10.04(64位)下搭建android2.3/android4.2/4.1/4.0开发环境
- Extjs4开发笔记(二)&#8212;&#8212;框架的搭建
- Eclipse搭建ExtJs的开发环境
- 用Extjs框架搭建ArcGIS Server Web ADF开发环境
- 在AMD的WIN7上搭建IOS开发环境(mac 10.6.8 + xcode 4.2)
- Android SDK4.2 (API17) 开发环境的搭建