在增加这二个区域之前，我们先在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。目录结构如下：
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 });
extjs中有许多布局，其中的一个border比较常用，他可以将items分成上、下、左、右、和中间五个部分。经过上面几步以后，在浏览器刷新一下网页，会看到如下结果：
