Ext学习笔记（一）：组件

大四毕业实习系统是一个中小企业级别的HR系统，在用友实习期间钦佩于这家中国最大软件供应商里的智慧，实习期满之后便跃跃欲试想自己实现一个在脑海中酝酿已久的Web版HRMS（用友集团级软件eHR是B/S模式，页面端是纯Applet实现），本希望利用大量的页面来实现业务流程，但是发现ExtJS华丽外表和组件化风格（貌似其思想来源于Java Swing），故利用MySQL+Hibernate+Spring+ExtJS开发系统了。
数据库表的设计就不讲了，不堪回首啊，很惨，很复杂（自己给搞复杂了），就从Ext开始记录起吧。
Ext来源于Yahoo的YUI界面开发技术，其组件架构如下：


组件之间的组合可以呈现出我们想要的任何界面，在创建以及添加组件的时候需要注意到：1、组件创建形式：

var cmp = new Ext.Panel({title:'myCmp',html:'This is my Component',width:300,layout:'fit'});

每个创建组件所需参数都是 JSON对象.
2、面板的布局方式：利用layout属性来定义，布局方式有以下几种:containerLayout,formLayout,tableLayout,columnLayout,borderLayout,anchorLayout,fitLayout,accordionLayout,具体介绍请看 这里.

登录页面将formPanel对象作为items属性值添加到主Panel中，以下是我的登录页面代码:

// @author:Jerry Joe
// @time:2008.12.30
Ext.namespace("Ext.src");
Ext.src.roles = [['superadmin', '超级管理员'], ['admin', '系统管理员'], ['user', '系统用户']];
Ext.onReady(function() {
	var loginform = new Ext.form.FormPanel({
				title : 'Login Form',
				id : 'login_form',
				frame : true,
				height : 185,
				width : 280,
				defaultType : 'textfield',
				defaults : {
					width : 135,
					border : '5px'
				},
				labelAlign : 'left',
				buttonAlign : 'center',
				items : [new Ext.form.ComboBox({
									fieldLabel : '登入方式',
									name : 'loginas',
									hiddenName : 'logintype',
									emptyText : '请选择登入方式..',
									blankText : '必须选择登入方式',
									editable : false,
									allowBlank : false,
									store : new Ext.data.SimpleStore({
												fields : ['value', 'display'],
												data : Ext.src.roles
											}),
									valueField : 'value',
									displayField : 'display',
									mode : 'local',
									forceSelection : true,
									triggerAction : 'all'
								}), {
							fieldLabel : '用户名',
							name : 'username',
							allowBlank : false
						}, {
							fieldLabel : '密码',
							name : 'password',
							xtype : 'textfield',
							allowBlank : false,
							inputType : 'password'
						}, {
							fieldLabel : '登入日期',
							name : 'time',
							xtype : 'datefield',
							readOnly: true,
							format: 'y-m-d'
						}],
				buttons : [{
							text : '登入',
							handler : function() {
								// handler login
							}
						}, {
							text : '重置',
							handler : function() {
								// reset the fields
							}
						}]
			});
	var panel = new Ext.Panel({
				renderTo : 'main',
				title : 'Welcome to eHR',
				autoHeight : false,
				height : 500,
				layout : 'form',
				items : [loginform]
			});
	});

业务主页面利用Viewport组件，包含布局为accordionLayout的导航栏面板和主面板，代码如下:

Ext.onReady(function() {
			Ext.QuickTips.init();
			var navPanel = new Ext.Panel({
						region : 'west',
						contentEl : 'nav',
						id : 'nav_panel',
						name : 'navPanel',
						title : '导航栏',
						split : true,
						border : true,
					    collapsible : false,
						width : 200,
						minSize : 200,
						maxSize : 250,
						layout : 'accordion',
						layoutConfig : {
							animate : true
						},
						items : [{
									title : '系统管理',
									html : '<div id="tree-sysadmin"></div>'
								}, {
									title : '自助操作',
									html : '<div id="tree-selfoper"></div>'
								}]
					});
			var mainPanel = new Ext.Panel({
						region : 'center',
						contentEl : 'main',
						id : 'main_panel',
						name : 'mainPanel',
						title : '主操作界面',
						split : true,
						collapsible : true,
						border : true,
						layout : 'anchor'
					});
			var viewport = new Ext.Viewport({
						layout : 'border',
						items : [{
									region : 'north',
									contentEl : 'header',
									split : true, // 可改变框体大小
									border : true,
									collapsible : true, // 可收缩
									height : 72,
									minSize : 72,
									maxSize : 120
								}, {
									region : 'south',
									contentEl : 'footer',
									split : true,
									border : true,
									collapsible : true,
									height : 30,
									minSize : 30,
									maxSize : 50
								},navPanel, mainPanel]
					});

		});