首页 > 程序开发 > web前端 > JavaScript >

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

2014-06-30

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


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


这一节为主界面加一个顶部区域和底部区域。一个管理系统的界面可以粗分为顶部标题部分、中间数据展示和处理的部分、底部备注和状态部分。 在增加这二个区域之前,我们先在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。目录结构如下: \

TZ喎"http://www.2cto.com/kf/ware/vc/" target="_blank" class="keylink">vcC5qc7ao0uXBy9K7uPbA4KOsxuTA4MP7zqqhrmFwcC52aWV3Lm1haW4ucmVnaW9uLlRvcKGvo6zXotLixuTA4MP7tcTHsMPmus3G5MK3vrbKx9K71sK1xKGjZXh0anO1xMDgvNPU2Lv61sa+zcrHuPm+3cDgw/vAtNXStb2+38zltcTA4M7EvP7U2sTEwO+1xKGjCjxicj4KCjxwcmUgY2xhc3M9"brush:java;">/** * 系统主页的顶部区域,主要放置系统名称,菜单,和一些快捷按钮 */ 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 : '
  • This area is commonly used for navigation, for example, using a "tree" component.
', width : 250, split : true, tbar : [{ text : 'Button', handler : 'onClickButton' }] }, { region : 'center', // 中间面版 xtype : 'tabpanel', items : [{ title : 'Tab 1', html : '

Content appropriate for the current navigation.

' }] }] });

\



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



相关文章
最新文章
热点推荐