`

第八章-Extjs-layout

阅读更多

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 : '    刷新    ',
						iconCls : 'refresh',
						iconAlign : 'top',
						scale : 'medium'
					}, {
						text : '    后退    ',
						iconCls : 'goBack',
						iconAlign : 'top',
						scale : 'medium'
					}, {
						text : '    换肤    ',
						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 : '    打印1    ',
						iconCls : 'print',
						iconAlign : 'top',
						scale : 'medium'
					}, {
						text : '    打印2    ',
						iconCls : 'print',
						iconAlign : 'top',
						scale : 'medium'
					}, {
						text : '    打印3    ',
						iconCls : 'print',
						iconAlign : 'top',
						scale : 'medium'
					}, {
						text : '    打印4    ',
						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

  • 大小: 120.1 KB
分享到:
评论

相关推荐

    EXTJS4.0视频教程配套代码

    第八讲:extjs4.0的Ajax [08]EXTJS4.0的Ajax.003.zip (53.77M)[08]EXTJS4.0的Ajax.002.zip [08]EXTJS4.0的Ajax.001.zip 第九讲:extjs4.0的core包和Ext类 [09]EXTJS4.0的core包和Ext类.003.zip (60.22M)[09]...

    Extjs教程源码

    第八讲: EXTJS4.0的Ajax 第九讲: EXTJS4.0的Core包和Ext类 第十讲: EXTJS4.0的Util包 ***************第二部分高级组件**************** 第十一讲: EXTJS4.0的高级组件Grid(上) 第十二讲: EXTJS4.0的MVC重构十一讲...

    ExtJS4之初体验

    在开始使用ExtJS4进行开发之前,我们需要做一些基础的准备工作,确保开发环境已经搭建好,并且能够顺利地运行第一个ExtJS4程序。 ##### 1. 浏览器兼容性 ExtJS4支持大部分主流浏览器,包括从IE6到最新版本的Chrome...

    Extjs4.0视频教程和源代码,另附文档翻译

    #### 第八讲: Extjs4.0的Ajax - **Ajax基础**:介绍了Ajax的基本概念及其在现代Web开发中的重要性。 - **使用Ext.Ajax**:详细讲解了Extjs提供的Ajax封装方法Ext.Ajax,包括发送请求、处理响应等功能。 - **错误...

    精通JS脚本之ExtJS框架.part2.rar

    第8章 设计表格类布局 8.1 表格简介 8.1.1 表格的基本属性 8.1.2 制作第一个表格 8.2 表格常用功能详解 8.2.1 主要属性功能 8.2.2 自定义列宽度 8.2.3 执行按列排序 8.2.4 解决中文排序 8.2.5 格式化显示...

    Extjs测试题

    ExtJS是基于JavaScript的框架,主要用于开发富客户端Web应用程序。它提供了大量的UI组件和数据处理方法,使得开发者能够快速构建交互式的界面。由于提供的信息较为碎片化,下面将对提供的信息进行系统的梳理,总结出...

    Extjs fieldset两行两列布局

    ### Extjs FieldSet 两行两列布局解析 在Extjs框架中,`FieldSet`是一种常见的组件,常用于组织一组相关的表单字段,并通过一个标题来标识这组字段的主题。本文将详细介绍如何使用Extjs实现一个两行两列布局的`...

    Extjs大全深入浅出

    此外,Extjs社区也提供了大量的第三方扩展,进一步扩展了框架的能力。 #### 七、性能优化 随着应用规模的增长,性能优化变得越来越重要。Extjs提供了一系列工具和技术,帮助开发者提升应用的加载速度和响应性。...

    ExtJs教程_完整版

    Ext 2.x版本,一共8章: 第一章 起步 第二章 Ext概览 第三章 表单 第四章 按钮、菜单和工具栏 第五章 使用grid显示数据 第六章 Editor Grids(可编辑表格) 第七章 layout(布局) 第八章 Tree(树)

    extjs入门文档

    - **Layout Manager(布局管理器)**:ExtJS 提供多种布局方式来组织组件,如 Fit Layout、Border Layout、Card Layout 等。 - **Flex Layout**:一种常用的响应式布局方式,允许根据容器大小自动调整组件大小。 ##...

    精通JS脚本之ExtJS框架.part1.rar

    第8章 设计表格类布局 8.1 表格简介 8.1.1 表格的基本属性 8.1.2 制作第一个表格 8.2 表格常用功能详解 8.2.1 主要属性功能 8.2.2 自定义列宽度 8.2.3 执行按列排序 8.2.4 解决中文排序 8.2.5 格式化显示...

    Extjs中文教程2.x

    - **下载**: 可以从官方网站或第三方资源网站下载 Extjs 框架。 - **环境部署**: 需要安装 Node.js 和 npm 等工具来搭建开发环境。 - **Spket IDE**: 推荐使用支持 Extjs 的集成开发环境,如 Spket IDE,它提供了...

    ExtJS基础教程.pdf

    1. **布局类**:包括容器布局(Container Layout)、绝对定位布局(Absolute Layout)、手风琴布局(Accordion)、锚点布局(Anchor Layout)、边框布局(Border Layout)、卡片布局(Card Layout)、列布局(Column Layout)、...

    EXTJS4.0 教程实例~讲解

    ### EXTJS4.0 教程实例~讲解 #### 知识点一:EXTJS4.0 中 Window 组件的创建与配置 **知识点概述**: EXTJS4.0 是一款用于构建现代化 Web 应用的强大框架。在该版本中,创建组件的方式有所更新,引入了 `Ext....

    学习ExtJS Panel常用方法

    ### ExtJS Panel 常用方法详解 #### 一、属性介绍 在开始探讨 ExtJS Panel 的常用方法之前,我们先来了解一下与 Panel 相关的一些基本属性。 1. **frame**: - 类型:布尔类型(true 或 false) - 描述:此属性...

    Ext10种布局

    - **定义**:`Ext.layout.ContainerLayout` 是 ExtJS 的基础布局类,其他所有布局都基于此基类进行扩展。 - **作用**:当没有为容器指定任何布局时,默认采用 `ContainerLayout`。该布局简单地将所有子元素按顺序...

    RDF 使用帮助

    #### 第八章:TREEPANEL 树面板 **TREEPANEL** 用于创建层次结构的数据展示,常用于文件系统浏览或组织架构展示。 - **构造 TREEPANEL**: ```html &lt;div id="tree-panel" xtype="treepanel" store="treeStore"&gt; ...

    Practical.Ext.JS.4.pdf

    第八章“Theming and Styling”关注在Ext JS 4应用中创建和定制主题及样式。这部分内容将帮助读者如何使应用界面更加符合设计要求,并具有更好的用户体验。 第九章“MVC with ExtJS4”讨论了在Ext JS 4框架中使用...

Global site tag (gtag.js) - Google Analytics