extjs5(05--主界面上加入顶部和底部区域)

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

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

 1 Ext.define('app.view.main.MainModel', {
 2     extend: 'Ext.app.ViewModel',
 3 
 4     alias: 'viewmodel.main',
 5 
 6     data: {
 7         name: 'app',
 8 
 9         // 系统信息
10         system: {
11             name: '工程项目合同及资金管理系统',
12             version: '5.2014.06.60',
13             iconUrl: ''
14         },
15 
16         // 用户单位信息和用户信息
17         user: {
18             company: '武当太极公司',
19             department: '工程部',
20             name: '张三丰'
21         },
22 
23         // 服务单位和服务人员信息
24         service: {
25             company: '无锡熙旺公司',
26             name: '蒋锋',
27             phonenumber: '1320528----',
28             qq: '78580822',
29             email: 'jfok1972@qq.com',
30             copyright: '熙旺公司'
31         }
32     }
33     // TODO - add data, formulas and/or methods to support your view
34 });

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

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

enefoyei

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

 1 /**
 2  * 系统主页的顶部区域，主要放置系统名称，菜单，和一些快捷按钮
 3  */
 4 Ext.define('app.view.main.region.Top', {
 5 
 6     extend: 'Ext.toolbar.Toolbar',
 7 
 8     alias: 'widget.maintop', // 定义了这个组件的xtype类型为maintop
 9 
10     items: [{
11         xtype: 'image',
12         bind: { // 数据绑定到MainModel中data的ystem.iconUrl
13             hidden: '{!system.iconUrl}', // 如果system.iconUrl未设置，则此image不显示
14             src: '{system.iconUrl}' // 根据system.iconUrl的设置来加载图片
15         }
16     }, {
17         xtype: 'label',
18         bind: {
19             text: '{system.name}' // text值绑定到system.name
20         },
21         style: 'font-size : 20px; color : blue;'
22     }, {
23         xtype: 'label',
24         bind: {
25             text: '{system.version}'
26         }
27     }, '->', {
28         text: '菜单',
29         menu: [{
30             text: '工程管理',
31             menu: [{
32                 text: '工程项目'
33             }, {
34                 text: '工程标段'
35             }]
36         }]
37     }, ' ', ' ', {
38         text: '主页'
39     }, {
40         text: '帮助'
41     }, {
42         text: '关于'
43     }, {
44         text: '注销'
45     }, '->', '->', {
46         text: '设置'
47     }]
48 
49 });

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

下面是Button.js的代码：

 1 /**
 2  * 系统主页的底部区域，主要放置用户单位信息，服务单位和服务人员信息
 3  */
 4 Ext.define('app.view.main.region.Bottom', {
 5 
 6     extend: 'Ext.toolbar.Toolbar',
 7 
 8     alias: 'widget.mainbottom',
 9 
10     items: [{
11         bind: {
12             text: '使用单位:{user.name}'
13         }
14     }, {
15         bind: {
16             text: '用户:{user.name}'
17         }
18     }, '->', {
19         bind: {
20             text: '服务单位:{service.company}'
21         }
22     }, {
23         bind: {
24             text: '服务人员:{service.name}'
25         }
26     }, {
27         bind: {
28             text: 'tel:{service.phonenumber}'
29         }
30     }, {
31         bind: {
32             hidden: '{!service.email}', // 绑定值前面加！表示取反，如果有email则不隐藏，如果email未设置，则隐藏
33             text: 'eMail:{service.email}'
34         }
35     }, {
36         bind: {
37             text: '©{service.copyright}'
38         }
39     }]
40 });

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

 1 /**
 2  * This class is the main view for the application. It is specified in app.js as
 3  * the "autoCreateViewport" property. That setting automatically applies the
 4  * "viewport" plugin to promote that instance of this class to the body element.
 5  * 
 6  * TODO - Replace this content of this view to suite the needs of your
 7  * application.
 8  */
 9 Ext.define('app.view.main.Main', {
10     extend: 'Ext.container.Container',
11 
12     xtype: 'app-main',
13 
14     uses: ['app.view.main.region.Top', 'app.view.main.region.Bottom'],
15 
16     controller: 'main',
17     // MVVM架构的控制器的名称，会在当前路径中根据‘Main’ + Controller 来确定文件名
18     // 这个我没找到其他任何可以自动加载MainController.js的依据，只能作上面的判断了
19     viewModel: {
20         type: 'main'
21         // MVVM架构的viewModel的类型，会在当前路径中根据‘Main’ + Model 来确定文件名
22     },
23 
24     layout: {
25         type: 'border' // 系统的主页面的布局
26     },
27 
28     items: [{
29         xtype: 'maintop',
30         region: 'north' // 把他放在最顶上
31     }, {
32         xtype: 'mainbottom',
33         region: 'south' // 把他放在最底下
34     }, {
35         xtype: 'panel',
36         bind: {
37             title: '{name}'
38         },
39         region: 'west', // 左边面板
40         html: '<ul><li>This area is commonly used for navigation, for example, using a "tree" component.</li></ul>',
41         width: 250,
42         split: true,
43         tbar: [{
44             text: 'Button',
45             handler: 'onClickButton'
46         }]
47     }, {
48         region: 'center', // 中间面版
49         xtype: 'tabpanel',
50         items: [{
51             title: 'Tab 1',
52             html: '<h2>Content appropriate for the current navigation.</h2>'
53         }]
54     }]
55 });