这一节为主界面加一个顶部区域和底部区域。一个管理系统的界面可以粗分为顶部标题部分、中间数据展示和处理的部分、底部备注和状态部分。

在增加这二个区域之前,我们先在MainModel.js中加入一些数据。

Ext.define('app.view.main.MainModel', {
extend: 'Ext.app.ViewModel', alias: 'viewmodel.main', data: {
name: 'app', // 系统信息
system: {
name: '工程项目合同及资金管理系统',
version: '5.2014.06.60',
iconUrl: ''
}, // 用户单位信息和用户信息
user: {
company: '武当太极公司',
department: '工程部',
name: '张三丰'
}, // 服务单位和服务人员信息
service: {
company: '无锡熙旺公司',
name: '蒋锋',
phonenumber: '1320528----',
qq: '78580822',
email: 'jfok1972@qq.com',
copyright: '熙旺公司'
}
}
// TODO - add data, formulas and/or methods to support your view
});

在上面的代码中,在data中增加了三个类型的数据,下面分别有些属性。这些值和属性以后可以从后台获得。比如说后台的系统名称改过了,前台刷新一下界面,就能展示新的system.name。这也符合我这个系统的开发宗旨,能够动态的信息尽量动态化,修改的时候只要在前台配置就可以,不要去修改后台的js或java代码。

下面在main的目录下加入二个文件,分别为Top.js和Bottom.js。目录结构如下:

Top.js定义了一个类,其类名为‘app.view.main.region.Top’,注意其类名的前面和其路径是一致的。extjs的类加载机制就是根据类名来找到具体的类文件在哪里的。

/**
* 系统主页的顶部区域,主要放置系统名称,菜单,和一些快捷按钮
*/
Ext.define('app.view.main.region.Top', {

    extend: 'Ext.toolbar.Toolbar',

    alias: 'widget.maintop', // 定义了这个组件的xtype类型为maintop

    items: [{
xtype: 'image',
bind: { // 数据绑定到MainModel中data的ystem.iconUrl
hidden: '{!system.iconUrl}', // 如果system.iconUrl未设置,则此image不显示
src: '{system.iconUrl}' // 根据system.iconUrl的设置来加载图片
}
}, {
xtype: 'label',
bind: {
text: '{system.name}' // text值绑定到system.name
},
style: 'font-size : 20px; color : blue;'
}, {
xtype: 'label',
bind: {
text: '{system.version}'
}
}, '->', {
text: '菜单',
menu: [{
text: '工程管理',
menu: [{
text: '工程项目'
}, {
text: '工程标段'
}]
}]
}, ' ', ' ', {
text: '主页'
}, {
text: '帮助'
}, {
text: '关于'
}, {
text: '注销'
}, '->', '->', {
text: '设置'
}] });

上面是Top.js类的定义,这是一个toolbar控件,里面加入了一些label和Button,用于显示系统名称以及用来实现一些操作。toolbar的items下默认的xtype是Button。源代码的注释里面也写入了如何绑定到MainModel 的数据的备注。

下面是Button.js的代码:

/**
* 系统主页的底部区域,主要放置用户单位信息,服务单位和服务人员信息
*/
Ext.define('app.view.main.region.Bottom', { extend: 'Ext.toolbar.Toolbar', alias: 'widget.mainbottom', items: [{
bind: {
text: '使用单位:{user.name}'
}
}, {
bind: {
text: '用户:{user.name}'
}
}, '->', {
bind: {
text: '服务单位:{service.company}'
}
}, {
bind: {
text: '服务人员:{service.name}'
}
}, {
bind: {
text: 'tel:{service.phonenumber}'
}
}, {
bind: {
hidden: '{!service.email}', // 绑定值前面加!表示取反,如果有email则不隐藏,如果email未设置,则隐藏
text: 'eMail:{service.email}'
}
}, {
bind: {
text: '©{service.copyright}'
}
}]
});

至此要加入的二个js文件已经就绪,现在我们要把他们放到Main的主页面之中。Main.js也需要修改一下,需要引入上面这二个类,以及把他们放到items下,并设置好位置。

/**
* This class is the main view for the application. It is specified in app.js as
* the "autoCreateViewport" property. That setting automatically applies the
* "viewport" plugin to promote that instance of this class to the body element.
*
* TODO - Replace this content of this view to suite the needs of your
* application.
*/
Ext.define('app.view.main.Main', {
extend: 'Ext.container.Container', xtype: 'app-main', uses: ['app.view.main.region.Top', 'app.view.main.region.Bottom'], controller: 'main',
// MVVM架构的控制器的名称,会在当前路径中根据‘Main’ + Controller 来确定文件名
// 这个我没找到其他任何可以自动加载MainController.js的依据,只能作上面的判断了
viewModel: {
type: 'main'
// MVVM架构的viewModel的类型,会在当前路径中根据‘Main’ + Model 来确定文件名
}, layout: {
type: 'border' // 系统的主页面的布局
}, items: [{
xtype: 'maintop',
region: 'north' // 把他放在最顶上
}, {
xtype: 'mainbottom',
region: 'south' // 把他放在最底下
}, {
xtype: 'panel',
bind: {
title: '{name}'
},
region: 'west', // 左边面板
html: '<ul><li>This area is commonly used for navigation, for example, using a "tree" component.</li></ul>',
width: 250,
split: true,
tbar: [{
text: 'Button',
handler: 'onClickButton'
}]
}, {
region: 'center', // 中间面版
xtype: 'tabpanel',
items: [{
title: 'Tab 1',
html: '<h2>Content appropriate for the current navigation.</h2>'
}]
}]
});

extjs中有许多布局,其中的一个border比较常用,他可以将items分成上、下、左、右、和中间五个部分。经过上面几步以后,在浏览器刷新一下网页,会看到如下结果:

4、手把手教你Extjs5(四)主界面上加入顶部和底部区域的更多相关文章

  1. ExtJS5_主界面上加入顶部和底部区域

    为主界面加一个顶部区域和底部区域.一个管理系统的界面可以粗分为顶部标题部分.中间数据展示和处理的部分.底部备注和状态部分. 在增加这二个区域之前,我们先在MainModel.js中加入一些数据. Ex ...

  2. 跟我一起学extjs5(05--主界面上增加顶部和底部区域)

    跟我一起学extjs5(05--主界面上增加顶部和底部区域)         这一节为主界面加一个顶部区域和底部区域. 一个管理系统的界面能够粗分为顶部标题部分.中间数据展示和处理的部分.底部备注和状 ...

  3. 手把手教你制作AppPreview视频并上传到appStore进行审核

    手把手教你制作AppPreview视频并上传到appStore进行审核 注意,你需要使用iMovie才能够制作AppPreview视频文件,用QuickTime录制的无效! 最终效果 1. 新建一个事 ...

  4. 11、手把手教你Extjs5(十一)模块界面的总体设计

    上一节中设计了一些模块自定义中用到的要素,为了直观起见,这一节先建立一个模块的主界面.看过我 模块管理常规功能自定义系统的设计与实现 博客的人应该会有所了解了.一个模块的主界面是一个Grid,在其上方 ...

  5. 12、手把手教你Extjs5(十二)执行菜单命令在tabPanel中显示模块

    上面设计好了一个模块的主界面,下面通过菜单命令的执行来把这个模块加入到主界面当中.在MainModule.js中有一个函数,生成了当前的菜单数据: // 根据data.systemMenu生成菜单条和 ...

  6. 8、手把手教你Extjs5(八)自定义菜单2

    这一节来定义另外三种类型的菜单类.首先定义菜单按钮类.文件放于app/view/main/region目录下面,文件名为ButtonMainMenu.js. /** * 显示在顶部的按钮菜单,可以切换 ...

  7. 7、手把手教你Extjs5(七)自定义菜单1

    顶部和底部区域已经作好,在顶部区域有一个菜单的按钮,这一节我们设计一个菜单的数据结构,使其可以展示出不同样式的菜单.由于准备搭建的是一个系统模块自定义的系统,因此菜单也是自定义的,在操作员系统登录的时 ...

  8. 6、手把手教你Extjs5(六)继承自定义一个控件

    Extjs的开发都可以遵循OOP的原则,其对类的封装也很完善了.自定义一个控件最简单的办法就是继承一个已有的控件.根据上一节的需要,我做了一个Button的子类.首先根据目录结构,在app目录下建立一 ...

  9. 14、手把手教你Extjs5(十四)模块字段和Grid列的定义[2]

    model和columns生成好了,下面要修改一下Module.js和Grid.js中的代码,使其能够协同工作. /** * 一个模块的主控界面的容器,用来安放各个模块控件以及协调他们之间的关系 */ ...

随机推荐

  1. more分页阅读

    相比cat命令,more可以更加灵活的去阅读查看文件. 1.命令格式 more [-dlfpcsu ] [-num ] [+/ pattern] [+ linenum] [file ... ] 2.命 ...

  2. The Rings Akhaten

    在其他的平行宇宙中存在着一个古老的星系--Akhaten,星系中有七个世界,上面生活着Panbabylonian.Lucanian等物种,不过外界也常常把他们统称为Akhet,因为这七个世界环绕着同一 ...

  3. 过滤器HttpModule

    1.建一个类库文件  FirsModule,实现IHttpModule接口,实现其中的两个方法,写一函数实现自己的代码逻辑,在Init方法中调用即可. // <summary> /// 第 ...

  4. ajax遇到的问题

    今天做了个小小的实验,用ajax XMLHttpRequest对象读取服务器上的txt文件里的内容,展示出来 直接把html文件放在桌面用浏览器打开,没有反应,部分代码如下: function oHt ...

  5. PAT (天梯)L2-004. 这是二叉搜索树吗?

    L2-004. 这是二叉搜索树吗? 时间限制 400 ms 内存限制 65536 kB 代码长度限制 8000 B 判题程序 Standard 作者 陈越 一棵二叉搜索树可被递归地定义为具有下列性质的 ...

  6. ubuntu服务器移植步骤

    1.安装LAMP套件 1 tasksel 2.安装FTP工具 http://www.cnblogs.com/esin/p/3483646.html 3.安装PHPMyAdmin 1)安装 1 apt- ...

  7. hdu_2159_FATE(完全背包)

    题目连接:hdu_2159_FATE 题意:完全背包的题意 题解:把杀敌数看成背包的容量,维护一个经验的最大值,我是多开一维来记录最大的忍耐度,当然你也可以直接开一位,并记录忍耐度,最后扫一遍 #in ...

  8. Bootstrap Modal 垂直居中

    Bootstrap 的 modal 正文中如果内容较少的话,并不会垂直居中,而是偏上, 如果想要达到垂直居中的效果,需要自动动手了. 可以在初始显示时设置垂直居中,可以这样做: $('#YourMod ...

  9. STL入门2

    1:给出n个字符串,输出每个字符串是第几个出现的字符串?多组数据 2:对每组数据,第一行输入n表示接下来有n个字符串 1 <= n <= 100000接下来的n行,每行输入一个非空的且长度 ...

  10. multipleOutputs Hadoop

    package org.lukey.hadoop.muloutput; import java.io.IOException; import org.apache.hadoop.conf.Config ...