Ext布局
Ext学习笔记07-Window及Window中的布局
Ext学习笔记07-Window及Window中的布局Window复习⼀下，先来构造⼀个Window对象：Js代码1. Ext.onReady(function(){2. var _window=new Ext.Window({3. title:"New Person",4. width:500,5. height:100,6. plain:true,7. items:[8. {}9. ],10. buttons:[11. {text:"OK"},12. {text:"Cancel"}13. ]14. });15. _window.show();16. });Ext.onReady(function(){var _window=new Ext.Window({title:"New Person",width:500,height:100,plain:true,items:[{}],buttons:[{text:"OK"},{text:"Cancel"}]});_window.show();});和Panel很像吧，items:[{}]，如果没有指定defaultType，items中默认就是Panel类型这时Panel的背景是⽩⾊，想要背景⾊和外⾯的Container统⼀，⾸先想到了Plain这个构造参数，但是看API中的Panel定义是没有Plain 的，它提供了另外⼀种⽅式 baseCls ，Js代码1. items:[2. {baseCls:"x-plain"}3. ],items:[{baseCls:"x-plain"}],指定baseCls值为“x-plain”，效果：这样Panel的背景⾊和外部的Container就统⼀了这样⼀个Window对象就构建成功了，但是Window对象⾥⾯什么也没有，往Window⾥⾯加⼀些内容。
EXT面板样式
Extjs面板和布局初探面板相当于一张干净的白纸，如果直接在上面添加内容，将很难控制面板中内容的显示位置，面板元素越多就越显得凌乱，所以需要在面板上划分不同的区域，将面板内容展示到希望的位置上。
ExtJS通过提供多种布局类来为面板提供支持，主要包括如下10种, 我自己总结了两句话, 先把它背起来,再慢慢研究这十种布局是怎么玩的."列表自折容, 卡表锚(描)边绝", 稍微胡说下, 供大家能更快记忆. 大家都知道html有列表, 那么列表把自己的容貌给折毁了,这叫"列表自折容", 有卡(信用卡,银行卡,随意啦), 有表(瑞士, OMEGA) 当然给自己描边(装饰自己),天下一绝啊,所以叫"卡表描边绝". 言归正传, 这十种布局方式分别为:•ColumnLayout（列布局）, 在面板设置的对应代码：layout : 'column', 即layout配置项名称为：column•FormLayout（表单布局）, 在面板设置的对应代码：layout : 'form', 即layout 配置项名称为：form•FitLayout（自适应布局）, 在面板设置的对应代码：layout : 'fit', 即layout 配置项名称为：fit•AccordionLayout（折叠布局）, 在面板设置的对应代码：layout : 'accordion', 即layout配置项名称为：accordion•ContainerLayout（容器布局）•CardLayout（卡片式布局）, 在面板设置的对应代码：layout : 'card', 即layout配置项名称为：card•TableLayout（表格布局）, 在面板设置的对应代码：layout : 'table', 即layout配置项名称为：table•AnchorLayout（锚点布局）, 在面板设置的对应代码：layout : 'anchor', 即layout配置项名称为：anchor•BorderLayout（边框布局）, 在面板设置的对应代码：layout : 'border', 即layout配置项名称为：border•AbsoluteLayout（绝对位置布局）, 在面板设置的对应代码：layout : 'absolute', 即layout配置项名称为：absolute接下来分别介绍这10种布局类的特点及使用方式。
ext布局
所谓布局就是指容器组件中子元素的分布、排列组合方式。
Ext的所有容器组件都支持而局操作，每一个容器都会有一个对应的布局，布局负责管理容器组件中子元素的排列、组合及渲染方式等。
ExtJS的布局基类为yout.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等布局，下面我们分别对这几种布局作简单的介绍。
Ext布局
Ext布局类的介绍与使用在WEB应用的开发中，应用界面的布局设计是一项很重要的内容。
在EXT中，可以通过BorderLayout与NestedLayoutPanel很方便的设计出各种的布局。
本文章的主要内容主要是介绍如何通过BorderLayout、NestedLayoutPanel以及各种面板设计页面布局。
<!--[if !supportLists]-->1. <!--[endif]-->BorderLayout类BorderLayout类是布局中的最基本的单元，它已预设了south、east、west、north和center等5个区域。
你可以根据你的需要任意组合这些区域，但是要注意的一点就是，center区域是必须使用的，而且center区域不允许隐藏和折叠。
创建一个新布局的语句如下：new BorderLayout( String/HTMLElement/Element container, Object config )其参数分别是：container：绑定布局的容器。
绑定布局的容易可以是document.body，也可以是其它HTMLElement。
不过如果是其它HTMLElement，该HTMLElement不能是绝对定位的，或者要在该HTMLElement中加入css定义“position:relative”，还需要为该HTMLElement设置大小。
config：布局区域的划分与定义。
主要是对north、south、center、east和west五个区域就行定义。
区域的定义请参考LayoutRegion类的定义参数。
BorderLayout类常用的属性、方法与事件如表1。
属性monitorWindowResize如果设置为发绿色，则不检测窗口大小的改变。
默认值为true。
方法add增加一个内容面板（或子类）到某个区域。
定义：public function add( String target, Ext.ContentPanel panel )参数：target：目标区域的关键字（north、south、east、west 或center）panel：要增加的面板类返回：Ext.ContentPaneladdRegion增加一个不存在的区域。
ext开发手册
ext开发手册一、简介EXT是一个针对构建富应用程序的JavaScript框架，它拥有丰富的组件库和强大的功能。
本手册将为开发人员提供完整的EXT开发指南，包括基础知识、常用组件和开发技巧等内容。
二、基础知识1. 安装和配置EXT：首先，下载EXT框架的压缩包并解压到项目的根目录。
然后，在HTML页面中引入EXT的必要文件，包括CSS和JavaScript。
最后，在需要使用EXT的页面中初始化EXT环境。
2. EXT的核心概念：理解EXT的基本概念对于开发者来说至关重要。
常见的核心概念包括组件、容器、布局和事件等。
组件是EXT的基本构建块，它可以是按钮、表单、树等等。
容器负责管理和布局组件，而布局则定义了组件的排列方式。
事件是EXT中的重要特性，可以用于处理用户交互和系统响应。
三、常用组件1. 表单组件：EXT提供了各种强大的表单组件，如文本框、下拉列表、复选框等。
开发人员可以根据需求选择合适的组件，并根据组件的配置进行自定义设置。
例如，可以通过设置验证规则和错误提示来有效地验证用户输入。
2. 树组件：EXT的树组件是管理层次数据的理想选择。
开发人员可以通过构建树节点和设置节点属性来构建一个功能齐全的树结构。
树组件还支持展开、折叠、选择和拖放等交互操作，使得数据的展示与操作更加灵活。
3. 网格组件：EXT的网格组件是处理大量数据的最佳工具。
通过设置网格的列模型和数据模型，可以实现自定义的数据显示和排序。
网格组件还支持分页、过滤和编辑功能，为用户提供便利的数据处理方式。
四、开发技巧1. 使用样式：EXT提供了丰富的CSS样式，可以为组件添加不同的外观和交互效果。
开发人员可以通过应用样式类名称或自定义样式来实现个性化的外观效果。
同时，也可以使用主题文件来快速地改变整个应用程序的外观。
2. 数据绑定：EXT支持将数据与组件进行绑定，以实现动态数据的展示和交互。
通过设置数据模型和绑定关系，可以在数据更新时自动更新组件的显示内容。
EXTJS HBox布局
HBox的使用要使用HBox布局方式，首先的熟悉下一下几个主要属性：一、align：字符类型，指示组件在容器内的对齐方式。
有如下几种属性。
1、top（默认）：排列于容器顶端。
2、middle：垂直居中排列于容器中。
3、stretch：垂直排列且拉伸义填补容器高度4、stretchmax:垂直拉伸，并且组件以最高高度的组件为准。
二、flex:数字类型，指示组件在容器中水平呈现方式，通俗的讲，就是指示组件在容器中的相对宽度。
三、pack : 字符类型，指示组件在容器的位置，有如下几种属性。
1、start（默认）：组件在容器左边2、center：组件在容器中间3、end：组件在容器的右边Fit布局在Fit布局中，子元素将自动填满整个父容器。
注意：在fit布局下，对其子元素设置宽度是无效的。
如果在fit布局中放置了多个组件，则只会显示第一个子元素。
典型的案例就是当客户要求一个window或panel中放置一个GRID组件，grid组件的大小会随着父容器的大小改变而改变。
anchor布局anchor布局将使组件固定于父容器的某一个位置，使用anchor布局的子组件尺寸相对于容器的尺寸，即父容器容器的大小发生变化时，使用anchor布局的组件会根据规定的规则重新渲染位置和大小。
AnchorLayout布局没有任何的直接配置选项（继承的除外），然而在使用AnchorLayout 布局时，其子组件都有一个anchor属性，用来配置此子组件在父容器中所处的位置。
anchor属性为一组字符串，可以使用百分比或者是-数字来表示。
配置字符串使用空格隔开，例如anchor:'75% 25%'，表示宽度为父容器的75%，高度为父容器的25%anchor:'-300 -200'，表示组件相对于父容器右边距为300，相对于父容器的底部位200 anchor:'-250 20%'，混合模式，表示组件党对于如容器右边为250，高度为父容器的20%。
ext布局(Layout.html)例子
column布局：展现为多列，layout: "column"，columnWidth制定列百分比，width制定像素宽度。
border布局：将屏幕分成东南西北中五部分，中为必须的部分。
layout: "border"，每一部分用region:表示定位。
fit布局：布局中只显示一个元素，并充满容器。
layout: "fit"Form布局：专门管理表单输入字段的布局。
layout:"form",defaultType:"textfield"。
Accordion布局：子元素间可以折叠显示。
layout:"accordion",layoutConfig:{animate:true}Card布局：某一时刻只显示一个子元素，主要用于向导,Tab选项板，layout:"card",activeItem:0Table布局：像表格一样显示，layout:"table",layoutConfig: {column:3},rowspan:2,colspan:2(类似<table>)控件的绑定，在布局的区域里，子元素可以通过contentEl属性绑定到任一个区域中。
<html><head><title>Complex Layout</title><link rel="stylesheet" type="text/css" href="/sir_876/blog/../../resources/css/ext-all.css" /><script type="text/javascript" src="/sir_876/blog/../../adapter/ext/ext-base.js"></script><script type="text/javascript" src="/sir_876/blog/../../ext-all.js"></script><style type="text/css">html, body {font:normal 12px verdana;margin:0;padding:0;border:0 none;overflow:hidden;height:100%;}p {margin:5px;}.settings {background-image:url(../shared/icons/fam/folder_wrench.png);}.nav {background-image:url(../shared/icons/fam/folder_go.png);}</style>//以上是载入相关的js和初始化HTML样式<script type="text/javascript">Ext.onReady(function(){//Now Ready？Go！Ext.state.Manager.setProvider(new Ext.state.CookieProvider());/*This is the global state manager. By default all components that are "state aware" check this class for state information if you don't pass them a custom state provider. In order for this class to be useful, it must be initialized with a provider when your application initializes.这是Ext官方对state.Manager的解释，意思大概是说这是一个全局的状态管理器，缺省情况“状态”是激活的，如果自定义的状态提供器无法工作，请检查“状态”的信息，为了使这个类生效，你必须在你的程序初始化的时候为这个“状态”初始化其提供器，CookieProvider是缺省的提供器，是用cookie的方式保存状态信息The default Providerimplementation which saves state via cookies.不知道Ext以后能否提供状态保存在数据库里面，这样用户上次使用的状态结果就可以在下次用户登陆的时候保留下来。
ExtJs4 笔记layout 布局
本篇讲解Ext另一个重要的概念：布局。
一般的容器类控件都是通过配置项items添加子控件的，这些子控件相对于父控件怎么定位呢，这里就要用到布局。
某些容器类控件，它本身默认就集成了一种布局方式，例如比较典型的是：Ext.container.Viewport 布局控件，它其实就是一个border布局的容器，还有Ext.form.Panel、Ext.tab.Panel等。
本节我们系统的分析各种布局方式。
一、absolute这种方式的布局可以对子元素相对于父级容器控件进行绝对定位，它包含了x、y两个配置项用于定位。
我们来看看一个例子：[Js]效果如下：二、accordion有的js插件里面accordion都是一个ui控件，但是Ext是通过布局的方式实现的，我们可以用面板控件作为它的折叠项，并且还可以用js来翻动活动项。
[Js]效果如下：三、anchor这个布局就是表单面板默认支持的，每一项占据一行，支持用anchor配置项分配各个子项的高度和宽度。
为百分比时表示当前大小占父容器的百分比，为数字的时一般为负数，表示父容器的值减去差值，剩下的为子项的大小。
[Js]效果如下：四、border这个布局可以定义东南西北四个方向的子元素，还有一个居中的子元素，一般用它来做页面整页布局，所以Ext.container.Viewport默认就支持了这个布局方式。
[Js]效果如下：五、card这个布局可以像卡片一样的切换每个子元素，各个子元素都会独占父元素的容器空间。
我们可以定义翻页按钮来控制当前处于活动状态的子元素。
[Js]效果如下：六、column这个布局把子元素按照列进行划分。
[Js]效果如下：这个布局下子元素会独占全部的容器空间，一般用于只有一个子项的情况。
[Js]效果如下：这个布局用表格定位的方式去组织子元素，我们可以像表格一样设置rowspan和colspan。
[Js]效果如下：九、vbox这个布局把所有的子元素按照纵向排成一列。
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
Ext布局类的介绍与使用在WEB应用的开发中，应用界面的布局设计是一项很重要的内容。
在EXT中，可以通过BorderLayout与NestedLayoutPanel很方便的设计出各种的布局。
本文章的主要内容主要是介绍如何通过BorderLayout、NestedLayoutPanel以及各种面板设计页面布局。
<!--[if !supportLists]-->1. <!--[endif]-->BorderLayout类BorderLayout类是布局中的最基本的单元，它已预设了south、east、west、north和center等5个区域。
你可以根据你的需要任意组合这些区域，但是要注意的一点就是，center区域是必须使用的，而且center区域不允许隐藏和折叠。
创建一个新布局的语句如下：new BorderLayout( String/HTMLElement/Element container, Object config )其参数分别是：container：绑定布局的容器。
绑定布局的容易可以是docume.body，也可以是其它HTMLElement。
不过如果是其它HTMLElement，该HTMLElement不能是绝对定位的，或者要在该HTMLElement中加入css定义“position:relative”，还需要为该HTMLElement设置大小。
config：布局区域的划分与定义。
主要是对north、south、center、east和west五个区域就行定义。
区域的定义请参考LayoutRegion类的定义参数。
BorderLayout类常用的属性、方法与事件如表1。
属性monitorWindowResize 如果设置为发绿色，则不检测窗口大小的改变。
默认值为true。
方法add 增加一个内容面板（或子类）到某个区域。
定义：public function add( String target, Ext.ContentPanel panel )参数：target：目标区域的关键字（north、south、east、west 或center）panel：要增加的面板类返回：Ext.ContentPaneladdRegion 增加一个不存在的区域。
定义：public function addRegion( String target, Object config )参数：target：目标区域的关键字（north、south、east、west 或center）config：区域定义对象。
返回：BorderLayoutRegionbeginUpdate 暂时停止LayoutManager的自动布局管理。
定义：public function beginUpdate()参数：无返回：voidendUpdate 恢复LayoutManager的自动管理同时结束更新。
定义：public function endUpdate( Boolean noLayout )参数：noLayout ：如果为true则不进行布局更新。
默认值为false。
返回：voidfindPanel 通过id查找区域内的面板。
定义：public function findPanel( String panelId )参数：panelId：面板id。
返回：Ext.ContentPanel或者null（没有找到）。
getEl 返回绑定布局的元件。
定义：public function getEl()参数：无返回：Ext.ElementgetRegion 根据关键字返回指定的区域。
定义：public function getRegion( String target )参数：target：目标区域的关键字（north、south、east、west 或center）返回：youtRegion remove 从某个区域中移除一个内容面板（或子类）。
定义：public function remove( String target, Number/String/Ext.ContentPanel panel )参数：target：目标区域的关键字（north、south、east、west 或center）panel：要移除面板的索引值、id或者对象本身。
返回：Ext.ContentPanel restoreState 使用Ext.state.Manager或者状态提供者重建布局。
定义：public function restoreState( [Ext.state.Provider provider] )参数：provider : Ext.state.Provider（可选）返回：void showPanel 设置某个面板为当前活动面板。
定义：public function showPanel( String/ContentPanel panelId )参数：panelId：要设置的面板id或对象本身。
返回：Ext.ContentPanel或者null（面板不存在）事件regioncollapsed 当一个区域折叠的时候触发本事件。
传递参数：region : youtRegion（折叠的区域对象）regionexpanded 当一个区域展开的时候触发本事件。
传递参数：region : youtRegion（展开的区域对象）regionresized 当用户改变区域大小的时候触发本事件。
传递参数：region : youtRegion （改变大小的区域对象）newSize: 新的区域大小（east/west为宽度,north/south为高度）。
表1<!--[if !supportLists]-->2. <!--[endif]-->LayoutRegion类因为布局是预定好了五个区域的，所以LayoutRegion类不可以创建，只可以对预定区域进行设置、操作和附加事件。
LayoutRegion的常用的属性、方法、事件和定义参数如表2。
属性bodyEl 返回该区域的主元件对象，类型为Ext.Element。
collapsedEl 返回该区域折叠后的主html元件对象，类型为Ext.Element。
el 返回该区域的容器元件对象，类型为Ext.Element。
panels 返回该区域中的面板集合。
类型为Ext.util.MixedCollectiontitleEl 返回该区域的标题栏元件对象，类型为Ext.Element。
titleTextEl 返回该区域的标题显示元件，类型为HTMLElement。
方法add 增加一个内容面板（或子类）到该区域。
定义：public function add( ContentPanel... panel )参数：panel：要增加的面板，可以是多个。
返回：Ext.ContentPanel，如果只增加一个，则返回增加的面板对象，否则返回null。
collapses 折叠该区域。
定义：public function collapse( [Boolean skipAnim] )参数：skipAnim：如果为true则在折叠区域时不显示动态效果（如果animate设置为true），可选参数。
返回：voidexpand 展开该区域、定义：public function expand( Ext.EventObject e, [Boolean skipAnim] )参数：e：触发展开区域的事件，如果手动调用则设置null。
skipAnim：如果为true则在展开区域时不显示动态效果（如果animate设置为true），可选参数。
返回：void getActivePanel 获取当前为活动状态的面板。
定义public function getActivePanel()参数：无返回：Ext.ContentPanel或nullgetEl 返回该区域的容器元件。
定义：public function findPanel( String panelId )参数：无返回：Ext. ElementgetPanel 根据面板的索引、id或对象本身返回面板。
定义：public functiongetPanel( Number/String/ContentPanel panel )参数：Panel：面板的索引、id或对象本身返回：Ext.ContentPanelgetPosition 返回该区域的位置(north/south/east/west/center)。
定义：public function getPosition()参数：无返回：StringgetTabs 返回该区域中的tab面板。
定义：public function getTabs()参数：无返回：Ext.TabPanel hasPanel 检查某个面板是否在该区域。
定义：public function hasPanel( Number/String/ContentPanel panel )参数：panel: 面板的索引、id或对象本身返回：Booleanhide 隐藏该面板。
定义：public function hide()参数：无返回：voidhidePanel 根据面板的索引、id或对象本身隐藏面板。
定义：public function getPanel( Number/String/ContentPanel panel )参数：Panel：面板的索引、id或对象本身返回：voidisVisible 检查该区域是否可见的。
定义：public function isVisible()参数：无返回：Boolean，如果该区域可见返回trueremove 从该区域中移除一个面板。
定义：public function remove(Number/String/Ext.ContentPanel panel )参数：panel：要移除面板的索引值、id或者对象本身。
返回：Ext.ContentPanelresizeTo 调整区域大小。
如果是垂直区域(west, east)则调整宽度，如果是水平区域(north, south)则调整高度。
定义：public function resizeTo( Number newSize )参数：newSize：新的宽度或高度返回：voidsetCollapsedTitle 设置north/south区域折叠时的标题（可通过定义collapsedTitle参数设置）。
定义：public function setCollapsedTitle( [String title] )参数：title：可选参数，标题文本可以是HTML标记返回：voidshow 显示该区域。