ExtJS 2.0 实用简明教程之布局概述_extjs

ExtJS的布局基类为Ext.layout.ContainerLayout,其它布局都是继承该类。ExtJS的容器组件包含一个layout及layoutConfig配置属性,这两个属性用来指定容器使用的布局及布局的详细配置信息,如果没有指定容器组件的layout则默认会使用ContainerLayout作为布局,该布局只是简单的把元素放到容器中,有的布局需要layoutConfig配置,有的则不需要layoutConfig配置。看代码:

复制代码 代码如下:

Ext.onReady(function(){
new Ext.Panel({
renderTo:"hello",
width:400,
height:200,
layout:"column",
items:[{columnWidth:.5,
title:"面板1"},
{columnWidth:.5,
title:"面板2"}]
});
});

上面的代码我们创建了一个面板Panel,Panle是一个容器组件,我们使用layout指定该面板使用Column布局。该面板的子元素是两个面板,这两个面板都包含了一个与列布局相关的配置参数属性columnWidth,他们的值都是0.5,也就是每一个面板占一半的宽度。执行上面的程序生成如下图所示的结果:

Ext中的一些容器组件都已经指定所使用的布局,比如TabPanel使用card布局、FormPanel使用form布局,GridPanel中的表格使用column布局等,我们在使用这些组件的时候,不能给这些容器组件再指定另外的布局。
ExtJS2.0一共包含十种布局,常用的布局有border、column、fit、form、card、tabel等布局,下面我们分别对这几种布局作简单的介绍。

时间: 2024-09-24 20:20:41

ExtJS 2.0 实用简明教程之布局概述_extjs的相关文章

ExtJS 2.0实用简明教程 之Border区域布局_extjs

该布局把容器分成东南西北中五个区域,分别由east,south, west,north, cente来表示,在往容器中添加子元素的时候,我们只需要指定这些子元素所在的位置,Border布局会自动把子元素放到布局指定的位置.看下面的代码: 复制代码 代码如下: Ext.onReady(function(){ new Ext.Viewport({ layout:"border", items:[{region:"north", height:50, title:&quo

ExtJS 2.0实用简明教程 之获得ExtJS_extjs

网址http://extjs.com/download,进入下载页面可以看到大致如图xxx所示的内容,可以选择选择1.1或2.0版本,本教程使用的2.0版本.  图1-1 ExtJs不同版本下载选择页面         单击上图中的[Download ext-2.0.zip]超链接进行下载,把下载得到的ZIP压缩文件解压缩到[D:\ExtCode]目录下,可以得到如如图1-2所示的内容. 图1-2 ExtJS发布包目录          adapter:负责将里面提供第三方底层库(包括Ext自带

ExtJS 2.0实用简明教程 之Ext类库简介_extjs

ExtJS的类库由以下几部分组成:       底层API(core):底层API中提供了对DOM操作.查询的封装.事件处理.DOM查询器等基础的功能.其它控件都是建立在这些底层api的基础上,底层api位于源代码目录的core子目录中,包括DomHelper.js.Element.js等文件,如图xx所示.          控件(widgets):控件是指可以直接在页面中创建的可视化组件,比如面板.选项板.表格.树.窗口.菜单.工具栏.按钮等等,在我们的应用程序中可以直接通过应用这些控件来实

ExtJS 2.0实用简明教程 之ExtJS版的Hello_extjs

复制代码 代码如下: <html xmlns="http://www.w3.org/1999/xhtml" > <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>ExtJS</title> <link rel="stylesheet" type=

ExtJS 2.0实用简明教程之应用ExtJS_extjs

样式文件为resources/css/ext-all.css,extjs的js库文件主要包含两个,adapter/ext/ext-base.js及ext-all.js,其中ext-base.js表示框架基础库,ext-all.js是extjs的核心库.adapter表示适配器,也就是说可以有多种适配器,因此,可以把adapter/ext/ext-base.js换成adapter/jquery/ext-jquery-adapter.js,或adapter/prototype/ext-prototy

在Windows系统下安装PHP5.0配置简明教程

PHP5包括以下一些重要的特征: ·支持新的对象模型和许多新特点的Zend引擎. ·完全重新编写了XML支持,扩展性能围绕着优秀的libxml2库(http://www.xmlsoft.org/). ·新的SimpleXML扩展,PHP对象轻松访问操作. ·全新的内建SOAP扩展,支持Web服务的交换. ·增加命名为MySQLi的了MySQL的扩展,支持MySQL4.1及以后版本的功能. ·绑定SQLite数据库. ·极大地改进流的设计,包括通过流操作底层的socket 首先,点这里下载PHP5

Mac OS X 系统安装 Tomcat 7.0.x 简明教程

Installing Tomcat 7.0.x on OS X by Wolf Paulus | Dec 14, 2013 | Mac OS X | 219 comments While Tomcat 8 is close to be released (Tomcat 8.0.0-RC5 (alpha) is released already), Tomcat 7 was the first Apache Tomcat release to support the Servlet 3.0, JS

Java 8简明教程

原文地址 本文由 ImportNew - 黄小非 翻译自 winterbe.欢迎加入翻译小组.转载请见文末要求. ImportNew注:有兴趣第一时间学习Java 8的Java开发者,欢迎围观<征集参与Java 8原创系列文章作者>. 以下是<Java 8简明教程>的正文. "Java并没有没落,人们很快就会发现这一点" 欢迎阅读我编写的Java 8介绍.本教程将带领你一步一步地认识这门语言的新特性.通过简单明了的代码示例,你将会学习到如何使用默认接口方法,La

基于LLVM的编译原理简明教程 (1) - 写编译器越来越容易了

基于LLVM的编译原理简明教程 (1) - 写编译器越来越容易了 进入21世纪,新的编程语言如雨后春笋一样不停地冒出来.需求当然是重要的驱动力量,但是在其中起了重要作用的就是工具链的改善. 2000年,UIUC的Chris Lattner主持开发了一套称为LLVM(Low Level Virtual Machine)的编译器工具库套件.后来,LLVM的scope越来越大,Low Level Virtual Machine已经不足以表示LLVM的全部,于是,LLVM就变成了正式的名字.LLVM可以