跟我一起学extjs5(05--主界面上增加顶部和底部区域)
这一节为主界面加一个顶部区域和底部区域。一个管理系统的界面能够粗分为顶部标题部分、中间数据展示和处理的部分、底部备注和状态部分。
在添加这二个区域之前，我们先在MainModel.js中添加一些数据。
Ext.define('app.view.main.MainModel', {extend : 'Ext.app.ViewModel',alias : 'viewmodel.main',data : {name : 'app',// 系统信息system : {name : 'project项目合同及资金管理系统',version : '5..06.60',iconUrl : ''},// 用户单位信息和用户信息user : {company : '武当太极公司',department : 'project部',name : '张三丰'},// 服务单位和服务人员信息service : {company : '无锡熙旺公司',name : '蒋锋',phonenumber : '1320528----',qq : '78580822',email : 'jfok1972@',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的类载入机制就是依据类名来找到详细的类文件在哪里的。
/*** 系统主页的顶部区域，主要放置系统名称，菜单，和一些快捷button*/Ext.define('app.view.main.region.Top', {extend : 'Ext.toolbar.Toolbar',alias : 'widget.maintop', // 定义了这个组件的xtype类型为maintopitems : [{xtype : 'image',bind : { // 数据绑定到MainModel中data的ystem.iconUrlhidden : '{!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 : 'project管理',menu : [{text : 'project项目'}, {text : 'project标段'}]}]}, ' ', ' ', {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 : '服务单位:{pany}'}}, {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分成上、下、左、右、和中间五个部分。
经过上面几步以后，在浏览器刷新一下网页，会看到例如以下结果：
