本篇开始搭建一个ExtJS 4.2单页面应用, 这里先介绍主页的搭建,内容包括:主页结构说明、扩展功能等方面。

目录

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组件、设定应用程序的名称等等。

APIhttp://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.html

End
菜单加载中...

ExtJS 4.2 业务开发(一)主页搭建的更多相关文章

  1. ExtJS 4.2 业务开发(二)数据展示和查询

    本篇开始模拟一个船舶管理系统,提供查询.添加.修改船舶的功能,这里介绍其中的数据展示和查询功能. 目录 1. 数据展示 2. 数据查询 3. 在线演示 1. 数据展示 在这里我们将模拟一个船舶管理系统 ...

  2. ExtJS 4.2 业务开发(三)数据添加和修改

    接上面的船舶管理业务,这里介绍添加和修改操作. 目录 1. 添加操作 2. 修改操作 3. 在线演示 1. 添加操作 1.1 创建AddShipWindow.js 在业务中的view目录下创建一个Ad ...

  3. EJB3.0开发环境的搭建

    EJB Container的介绍SUN公司正式推出了EJB的规范之后,在众多的公司和开发者中引起了非常大的反响.标志着用Java开发企业级应用系统将变的非常easy.很多公司都已经推出了或正打算EJB ...

  4. 【Xamarin挖墙脚系列:典型的业务程序的结构搭建】

    原文:[Xamarin挖墙脚系列:典型的业务程序的结构搭建] 其实app就是客户端.在现代的程序中,都是典型的C/S结构.当然,一些离线的小游戏,功能性应用除外,如:电话本,通信录,短信查看等等 这个 ...

  5. 百度王一男: DevOps 的前提是拆掉业务-开发-测试-运维中间的三面墙

    这是一个创建于 375 天前的主题,其中的信息可能已经有所发展或是发生改变. 由数人云.优维科技.中生代社区联合发起的 系列 Meetup < DevOps&SRE 超越传统运维之道&g ...

  6. [Abp vNext微服务实践] - 业务开发

    前几篇分别介绍了abp vNext微服务框架.开发环境搭建和vue element admin前端框架接入,在vue element admin中实现用户角色管理基本功能后就可以开始进行业务开发了,本 ...

  7. SpringCloud Alibaba实战(5:子模块基本业务开发)

    源码地址:https://gitee.com/fighter3/eshop-project.git 持续更新中-- 在上一节里,我们搭建了一个微服务项目的整体架构,并进行了版本控制. 接下来我们进一步 ...

  8. Luffy /3/ 前台主页搭建&轮播图接口

    目录 前台主页搭建 components/Homeviwe.vue components/Banner.vue components/Header.vue components/Footer.vue ...

  9. 总结:Mac前端开发环境的搭建(配置)

    新年新气象,在2016年的第一天,我入手了人生中第一台自己的电脑(大一时好友赠送的电脑在一次无意中烧坏了主板,此后便不断借用别人的或者网站的).macbook air,身上已无分文...接下来半年的房 ...

随机推荐

  1. socket读写返回值的处理

    在调用socket读写函数read(),write()时,都会有返回值.如果没有正确处理返回值,就可能引入一些问题 总结了以下几点 1当read()或者write()函数返回值大于0时,表示实际从缓冲 ...

  2. 说说Golang的使用心得

    13年上半年接触了Golang,对Golang十分喜爱.现在是2015年,离春节还有几天,从开始学习到现在的一年半时间里,前前后后也用Golang写了些代码,其中包括业余时间的,也有产品项目中的.一直 ...

  3. RxJS + Redux + React = Amazing!(译二)

    今天,我将Youtube上的<RxJS + Redux + React = Amazing!>的后半部分翻译(+机译)了下来,以供国内的同学学习,英文听力好的同学可以直接看原版视频: ht ...

  4. 神马玩意,EntityFramework Core 1.1又更新了?走,赶紧去围观

    前言 哦,不搞SQL了么,当然会继续,周末会继续更新,估计写完还得几十篇,但是我会坚持把SQL更新完毕,绝不会烂尾,后续很长一段时间没更新的话,不要想我,那说明我是学习新的技能去了,那就是学习英语,本 ...

  5. 计算机程序的思维逻辑 (54) - 剖析Collections - 设计模式

    上节我们提到,类Collections中大概有两类功能,第一类是对容器接口对象进行操作,第二类是返回一个容器接口对象,上节我们介绍了第一类,本节我们介绍第二类. 第二类方法大概可以分为两组: 接受其他 ...

  6. [算法]——快速排序(Quick Sort)

    顾名思义,快速排序(quick sort)速度十分快,时间复杂度为O(nlogn).虽然从此角度讲,也有很多排序算法如归并排序.堆排序甚至希尔排序等,都能达到如此快速,但是快速排序使用更加广泛,以至于 ...

  7. 【JS基础】正则表达式

    正则表达式的() [] {}有不同的意思. () 是为了提取匹配的字符串.表达式中有几个()就有几个相应的匹配字符串. (\s*)表示连续空格的字符串. []是定义匹配的字符范围.比如 [a-zA-Z ...

  8. Three.JS 从世界坐标系转换到屏幕坐标系

    var projector = new THREE.Projector(); var world_vector = new THREE.Vector3(0,0,1); var vector = pro ...

  9. 微信小程序的机会在于重新理解群组与二维码

    历时一年,唯一一个尚未发布就获得Pony Ma与Allen Zhang站台的产品:微信小程序,将于2017年1月9日正式上线了.我很期待.唯一要警惕的是:防止长考出臭棋. 在上线前夕,我对于如何借助小 ...

  10. Android之数据存储的五种方法

    1.Android数据存储的五种方法 (1)SharedPreferences数据存储 详情介绍:http://www.cnblogs.com/zhangmiao14/p/6201900.html 优 ...