`

第五章-ExtJs-layout

阅读更多

layout

本章任务

1.layout

 

var app = {};

Ext.onReady(function() {

			/**
			 * 根节点
			 */
			var _root = new Ext.tree.AsyncTreeNode({

						text : 'root',
						expanded : true
					});

			/**
			 * 子节点
			 */
			var _loader = new Ext.tree.TreeLoader({

						dataUrl : './ch04.jsp'
					});
			
			/**
			 * add tablePanel
			 */
			app.addTab = function(obj){
				
				//get compant by id
				var tab = Ext.getCmp(obj.id);
				//exits
				if(tab){
					_center.setActiveTab(tab);
				}else{
					
				var newTab = new Ext.Panel({
					id:obj.id,
					title:obj.text
				});
				
				newTab.html='<iframe src=\'a.html\' width="100%" height="100%" frameborder="0" scrolling="no"></iframe>'
				
				_center.add(newTab);
			   _center.setActiveTab(newTab);
				}
				
			};
			
			/**
			 * region in center
			 */
			var _center = new Ext.TabPanel({
				region : 'center',
				contentEl : 'center-div'
			});
			
			var _border = new Ext.Viewport({

						layout : 'border',
						items : [{
									region : 'north',
									collapsible : true,
									contentEl : 'north-div',// positon to
															// north-div
									html : '<h1>north</h1>'
								}, {
									region : 'west',
									collapsible : true,
									contentEl : 'west-div',
									width : 200,
									root : _root,
									loader : _loader,
									rootVisible : true,
									listeners : {
										click : function(_element) {
											//alert(parent);
											//parent.mainFrame.location.href = 'a.html';
											app.addTab(_element);
										}
									},
									xtype : 'treepanel'
								},_center, {
									region : 'east',
									collapsible : true,
									contentEl : 'east-div',
									html : '<h1>east</h1>'
								}, {
									region : 'south',
									collapsible : true,
									contentEl : 'south-div',
									html : '<h1>south</h1>'
								}]
					});

		})

 

本章目标

1. 理解layout

分享到:
评论

相关推荐

    EXTJS4.0视频教程配套代码

    第五讲:extjs4.0的读写器reader,writer [05]EXTJS4.0的读写器reader,writer.wmv 第六讲:extjs4.0的数据集store [06]EXTJS4.0的数据集store.wmv (73.45M) 第七讲:extjs4.0的事件机制Event [07]EXTJS4.0的...

    Extjs教程源码

    第五讲: EXTJS4.0的读写器Reader, Writer 第六讲: EXTJS4.0的数据集Store 第七讲: EXTJS4.0的事件机制Event 第八讲: EXTJS4.0的Ajax 第九讲: EXTJS4.0的Core包和Ext类 第十讲: EXTJS4.0的Util包 ***************第...

    ExtJS实用开发指南下载

    序言; 第二章 开始EXTJS; 第三章 EXT框架基础及核心介绍 第四章 试用面板 第五章 窗口及对话 …… TreePanel,layout,store

    Extjs4 Extjs4学习指南

    - **下载途径**:首先,需要从官方或者可靠的第三方资源站点下载Extjs。文中提到的一个下载来源是`http://extjs.org.cn/`。此网站提供了Extjs的不同版本以及相关文档和支持材料。 **1.2 搭建学习环境** - **开发...

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

    #### 第五讲: Extjs4.0的读写器(Reader/Writer) - **读写器的功能**:阐述了读写器在数据处理过程中的作用,即解析服务器返回的数据和将客户端数据格式化成服务器可识别的形式。 - **不同格式的支持**:讲解了Extjs...

    Extjs生成主界面

    ### Extjs生成主界面 #### 一、简介 在现代Web开发中,用户界面的设计与实现至关重要。Extjs是一款强大的JavaScript框架,它提供了丰富的UI组件和工具,可以帮助开发者快速构建高性能的企业级Web应用。本文将详细...

    Eclipse+ExtJS配置手顺.pdf

    根据描述中的信息,有两种安装ExtJS插件的方式,这里介绍第一种方式: - **方式一**:通过Eclipse Marketplace安装ExtJS相关的插件。 - 打开Eclipse,选择“Help” -&gt; “Marketplace...”。 - 在搜索框中输入...

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

    第5章 ExtJS组件 5.1 核心组件 5.1.1 ExtJS组件结构 5.1.2 Ext.Component 5.1.3 Ext.BoxComponent 5.1.4 Ext.Container 5.1.5 Ext.Panel 5.1.6 Ext.TabPanel 5.2 信息提示框组件 5.2.1 Ext.MessageBox简介 ...

    Extjs测试题

    5. 创建表格的方式:在ExtJS中,通常使用new Ext.grid.GridPanel()来创建一个表格。GridPanel是专门用来展示网格数据的组件,它能够很方便地展示数据库表或者复杂的数据结构。 6. 页面控件的唯一性:在同一个项目...

    Extjs大全深入浅出

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

    Extjs fieldset两行两列布局

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

    Extjs4[1].0学习指南(简体中文)

    #### 四、编写第一个Extjs4应用 - **创建HelloWorld应用**: - 在WebRoot目录下创建`helloworld.js`文件,编写如下代码: ```javascript Ext.application({ name: 'HelloExt', launch: function () { Ext....

    extjs入门教程

    #### 五、深入理解 ExtJS 内容 ##### 5.1 常用 API 介绍 - **Ext.Array**: 提供了一套处理数组的常用方法集合。 - **Ext.Date**: 用于日期操作的相关函数和属性。 通过上述内容的学习,开发者可以逐步掌握 ExtJS ...

    extjs 4 学习资料

    5. **Extjs4**:EXTJS4库文件的存放位置。 6. **Server**:服务器端脚本目录,如MenuLoader.asp,用于加载菜单数据。 在开发过程中,作者决定采用MVC模式,删除了原有的非MVC结构,并重新组织了目录。在EXTJS4的...

    extjs入门文档

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

    ExtJs教程_完整版

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

    extjs布局全面讲解

    ### ExtJS布局全面讲解 #### 一、Border Layout(方位布局) **定义与特性:** - **定义**:Border布局由类`Ext.layout.BorderLayout`定义,布局名称为`border`,这是一种非常实用且常见的布局方式,适用于创建...

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

    第5章 ExtJS组件 5.1 核心组件 5.1.1 ExtJS组件结构 5.1.2 Ext.Component 5.1.3 Ext.BoxComponent 5.1.4 Ext.Container 5.1.5 Ext.Panel 5.1.6 Ext.TabPanel 5.2 信息提示框组件 5.2.1 Ext.MessageBox简介 ...

Global site tag (gtag.js) - Google Analytics