第八章-Extjs-layout

最新推荐文章于 2020-03-12 09:54:15 发布
原创最新推荐文章于 2020-03-12 09:54:15 发布 · 140 阅读
0 ·
CC 4.0 BY-SA版权
文章标签：
#extJs #extJs基础 #extJs面向对象 #extjs oop #oop
FY_Extjs_sir 专栏收录该内容
10 篇文章
订阅专栏
本文介绍了一个使用ExtJS框架的应用实例，展示了如何通过布局管理器来组织界面元素，包括顶部工具栏、中间选项卡面板、底部状态栏、左侧菜单栏及右侧属性网格等关键组件的设计与实现。
layout
本章任务
1.layout
app = {};

Ext.onReady(function() {

	self.resizeTo(screen.availWidth, screen.availHeight);
	self.moveTo(0, 0);

	var navHandler = function(direction) {
		// 这段程序可以包含控制导航步骤所需的业务逻辑。
		// 在需要的时候它将调用setActiveItem方法，管理导航按钮的状态，
		// 处理任何可能需要的逻辑分支，处理可能的操作，像退出或操作完成，等等。
		// 在现实的实现中，一个完整的安装向导实现会非常复杂，它与复杂的需求有关。
		// 可能需要要扩展CardLayout类。
		Ext.Msg.alert(direction);
	};

	//	var action = new Ext.Action({
	//		text : 'Action 1',
	//		handler : function() {
	//			Ext.example.msg('Click', 'You clicked on "Action 1".');
	//		},
	//		iconCls : 'blist'
	//	});
	var handleAction = function(action) {
		Ext.util.CSS.swapStyleSheet("theme","extjs/resources/css/xtheme-"+action+".css");
	};

	/**
	 * 顶部,工具栏
	 */
	var tbar = new Ext.Panel({
		region : 'north',
		height : 30,
		tbar : [{
			xtype : 'buttongroup',
			items : [{
						text : '系统首页',
						iconCls : 'sysIndex',
						iconAlign : 'top',
						scale : 'medium'
					}, {
						text : '系统简介',
						iconCls : 'synopsis',
						iconAlign : 'top',
						scale : 'medium'
					}, {
						text : '系统帮助',
						iconCls : 'help',
						iconAlign : 'top',
						scale : 'medium'
					}, {
						text : '重新登录',
						iconCls : 'syslogin',
						iconAlign : 'top',
						scale : 'medium'
					}, {
						text : '修改密码',
						iconCls : 'changePwd',
						iconAlign : 'top',
						scale : 'medium'
					}, {
						text : '安全退出',
						iconCls : 'sysLogout',
						iconAlign : 'top',
						scale : 'medium'
					}, {
						text : '&nbsp;&nbsp;&nbsp;&nbsp;刷新&nbsp;&nbsp;&nbsp;&nbsp;',
						iconCls : 'refresh',
						iconAlign : 'top',
						scale : 'medium'
					}, {
						text : '&nbsp;&nbsp;&nbsp;&nbsp;后退&nbsp;&nbsp;&nbsp;&nbsp;',
						iconCls : 'goBack',
						iconAlign : 'top',
						scale : 'medium'
					}, {
						text : '&nbsp;&nbsp;&nbsp;&nbsp;换肤&nbsp;&nbsp;&nbsp;&nbsp;',
						iconCls : 'goBack',
						menu : [{
									text : 'orange',
									handler : handleAction
											.createCallback('orange')
								}, {
									text : 'red5',
									handler : handleAction
											.createCallback('red5')
								}, {
									text : 'silverCherry',
									handler : handleAction
											.createCallback('silverCherry')
								}, {
									text : 'gray',
									handler : handleAction
											.createCallback('gray')
								}, {
									text : 'blue',
									handler : handleAction
											.createCallback('blue') 
								}, {
									text : 'calista',
									handler : handleAction
											.createCallback('calista')
								}, {
									text : 'indigo',
									handler : handleAction
											.createCallback('indigo') 
								}, {
									text : 'slate',
									handler : handleAction
											.createCallback('slate')
								}],
						iconAlign : 'top',
						scale : 'medium'
					}]
		}, {
			xtype : 'buttongroup',
			items : [{
						text : '&nbsp;&nbsp;&nbsp;&nbsp;打印1&nbsp;&nbsp;&nbsp;&nbsp;',
						iconCls : 'print',
						iconAlign : 'top',
						scale : 'medium'
					}, {
						text : '&nbsp;&nbsp;&nbsp;&nbsp;打印2&nbsp;&nbsp;&nbsp;&nbsp;',
						iconCls : 'print',
						iconAlign : 'top',
						scale : 'medium'
					}, {
						text : '&nbsp;&nbsp;&nbsp;&nbsp;打印3&nbsp;&nbsp;&nbsp;&nbsp;',
						iconCls : 'print',
						iconAlign : 'top',
						scale : 'medium'
					}, {
						text : '&nbsp;&nbsp;&nbsp;&nbsp;打印4&nbsp;&nbsp;&nbsp;&nbsp;',
						iconCls : 'print',
						iconAlign : 'top',
						scale : 'medium'
					}]
		}]
	});

	/**
	 * 中间,选项卡
	 */
	var tablepanel = new Ext.TabPanel({
				region : 'center'
			});

	app.addTab = function(obj) {

		var tab = Ext.getCmp(obj.id);
		if (tab) {
			tablepanel.setActiveTab(tab);
		} else {
			var newTab = new Ext.Panel({
						id : obj.id,
						title : obj.innerHTML,
						closable : true,
						autoScroll : true,
						html : ''
					});
			//var newTab = new Ext.Panel({title:'panel1',html:'panel1panel1panel1panel1panel1panel1panel1'});
			switch (obj.id) {
				case '2' :
					newTab.html = '<iframe src="page/content_basedate.jsp" width="100%" height="100%" frameBorder="0"></iframe>';
					break;
				case '3' :
					newTab.html = '<iframe src="page/content_quality.jsp" width="100%" height="100%" frameBorder="0"></iframe>';
					break;
				case '4' :
					newTab.html = '<iframe src="page/content_stone.jsp" width="100%" height="100%" frameBorder="0"></iframe>';
					break;
				case '5' :
					newTab.html = '<iframe src="page/images.jsp" width="100%" height="100%" frameBorder="0"></iframe>';
					break;
				case '7' :
					newTab.html = '<iframe src="page/content01.html" width="100%" height="100%" frameBorder="0"></iframe>';
					break;
				case '9' :
					newTab.html = '<iframe src="page/content_custom.html" width="100%" height="100%" frameBorder="0"></iframe>';
					break;
				//板房管理	   
				case '11' :
					newTab.html = '<iframe src="page/content033.html"" width="100%" height="100%" frameBorder="0"></iframe>';
					break;
				case '12' :
					newTab.html = '<iframe src="page/content034.html"" width="100%" height="100%" frameBorder="0"></iframe>';
					break;
				case '13' :
					newTab.html = '<iframe src="page/content035.html" width="100%" height="100%" frameBorder="0"></iframe>';
					break;
				case '14' :
					newTab.html = '<iframe src="page/content036.html" width="100%" height="100%" frameBorder="0"></iframe>';
					break;
				case '15' :
					newTab.html = '<iframe src="page/content037.html" width="100%" height="100%" frameBorder="0"></iframe>';
					break;
				case '16' :
					newTab.html = '<iframe src="page/content038.html" width="100%" height="100%" frameBorder="0"></iframe>';
					break;
				case '17' :
					newTab.html = '<iframe src="page/content039.html" width="100%" height="100%" frameBorder="0"></iframe>';
					break;
				//库存管理   	
				case '19' :
					newTab.html = '<iframe src="page/content04.htm" width="100%" height="100%" frameBorder="0"></iframe>';
					break;
				case '20' :
					newTab.html = '<iframe src="page/content04.html" width="100%" height="100%" frameBorder="0"></iframe>';
					break;
				case '21' :
					newTab.html = '<iframe src="page/content04.html" width="100%" height="100%" frameBorder="0"></iframe>';
					break;
				case '22' :
					newTab.html = '<iframe src="page/content04.html" width="100%" height="100%" frameBorder="0"></iframe>';
					break;
				// <!--报表管理(财务)-->	 	
				case '24' :
					newTab.html = '<iframe src="page/content_repoet_month.jsp" width="100%" height="100%" frameBorder="0"></iframe>';
					break;
				case '25' :
					newTab.html = '<iframe src="page/content_repoet_week.jsp" width="100%" height="100%" frameBorder="0"></iframe>';
					break;
				case '26' :
					newTab.html = '<iframe src="page/content_repoet_gather.jsp" width="100%" height="100%" frameBorder="0"></iframe>';
					break;
				case '27' :
					newTab.html = '<iframe src="page/content_salary.jsp" width="100%" height="100%" frameBorder="0"></iframe>';
					break;
				// <!--人事管理-->
				case '29' :
					newTab.html = '<iframe src="page/content_dept.html" width="100%" height="100%" frameBorder="0"></iframe>';
					break;
				case '30' :
					newTab.html = '<iframe src="page/content_employment.html" width="100%" height="100%" frameBorder="0"></iframe>';
					break;
				case '31' :
					newTab.html = '<iframe src="page/content_salary_level.html" width="100%" height="100%" frameBorder="0"></iframe>';
					break;
			}
			tablepanel.add(newTab);
			tablepanel.setActiveTab(newTab);
		}
	}

	/**
	 * 底部,状态栏
	 */
	var wordCount = new Ext.Toolbar.TextItem('深圳市中鹏科技有限公司');
	var charCount = new Ext.Toolbar.TextItem('操作员: ${session.userName}');
	var clock = new Ext.Toolbar.TextItem('当前时间: 0');

	var bbar = new Ext.Panel({
		region : 'south',
		height : 21,
		bbar : new Ext.ux.StatusBar({
			id : 'word-status',
			// These are just the standard toolbar TextItems we created above.
			// They get
			// custom classes below in the render handler which is what gives
			// them their
			// customized inset appearance.
			statusAlign : 'right', // the magic config
			items : [
					wordCount,
					'-',
					'&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;'
							+ '&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;'
							+ '&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;'
							+ '&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;'
							+ '&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;',
					charCount,
					'-',
					'&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;'
							+ '&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;'
							+ '&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;'
							+ '&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;'
							+ '&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;'
							+ '&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;'
							+ '&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;'
							+ '&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;',
					clock]
		}),
		items : {

			listeners : {
				render : {
					fn : function() {

						Ext.fly(clock.getEl().parent())
								.addClass('x-status-text-panel').createChild({
											cls : 'spacer'
										});

						// Kick off the clock timer that updates the clock el
						// every
						// second:
						Ext.TaskMgr.start({
									run : function() {
										Ext
												.fly(clock.getEl())
												.update('当前时间:'
														+ new Date()
																.format('Y年m月d日 g:i:s A'));
									},
									interval : 1000
								});
					},
					delay : 100
				}
			}
		}
	});

	/**
	 * 西边,菜单栏
	 */
	var accordion = new Ext.Panel({
				region : 'west',
				width : 200,
				split : true,
				collapsible : true,
				layout : 'accordion',
				layoutConfig : {
					titleCollapse : true
				},
				//		items : [{
				//			title : '期初管理',
				//			html : '<a href="#" onclick="javascript:app.addTab(this)" id="userManage">用户管理</a><br/><a href="#" onclick="javascript:app.addTab(this)" id="userManage">用户管理</a>'
				//		}, {
				//			title : '第二栏',
				//			html : '第二栏'
				//		}]
				items : [{
							title : '期初管理',
							border : false,
							iconCls : 'basedate',
							contentEl : 'basedate'
						}, {
							title : '客户管理',
							border : false,
							iconCls : 'custom',
							contentEl : 'custom'
						}, {
							title : '主管专栏',
							border : false,
							iconCls : 'manage',
							contentEl : 'manage'
						}, {
							title : '板房管理',
							border : false,
							iconCls : 'factory',
							contentEl : 'factory'
						}, {
							title : '库存管理(财务)',
							border : false,
							iconCls : 'lib',
							contentEl : 'lib'
						}, {
							title : '报表管理(财务)',
							border : false,
							iconCls : 'report',
							contentEl : 'report'
						}, {
							title : '人事管理',
							border : false,
							iconCls : 'hrm',
							contentEl : 'hrm'
						}]
			});

	/**
	 * 东边,属性类别
	 */
	var propertyGrid = new Ext.grid.PropertyGrid({
				region : 'east',
				width : 200,
				source : {
					"userName)" : "方勇",
					"userPass" : "123456"
				}
			});

	var viewPort = new Ext.Viewport({
				layout : 'border',
				items : [tbar, bbar, accordion, propertyGrid, tablepanel]
			});
})
本章目标
1. 理解layout