Ext布局

合集下载

Ext学习笔记07-Window及Window中的布局

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面板样式

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布局

所谓布局就是指容器组件中子元素的分布、排列组合方式。

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布局

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开发手册一、简介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布局

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)例子

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 布局

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这个布局把所有的子元素按照纵向排成一列。

ext布局方式

ext布局方式
pnSub2
]
});
Table布局
Table布局多数用在较为复杂的情况下,想一想做web开发总不能就上面几种简单情况吧,因此也就是说Table布局还是很常用的。当然,但是和其他布局相比其参数设置也稍微一些(不用怕,事实上还是很少的)。
Form布局
]
});
Ext.onReady(function(){
var pnRow1=new Ext.Panel({
border:false,
layout:'column',
items:[
new Ext.Panel({
columnWidth:.5,
layout:'form',
border:false,
labelWidth:40,
labelAlign:'right',
labelAlign:'right',
items:[
{
xtype:'datefield',
name:'birthday',
{region:"west",title:"Left",width:200},
{region:"east",title:"Right",width:200},
{region:"center",title:"Center"}
]
items:[
{
xtype:'combo',
var pnSub1=new Ext.Panel({

EXTJSPanel布局

EXTJSPanel布局

EXTJSPanel布局1. ⾯板控件panel应⽤2. new Ext.Panel({3. title:'⾯板头部(header)',4. tbar : ['顶端⼯具栏(top toolbars)'],5. bbar : ['底端⼯具栏(bottom toolbars)'],6. height:200,7. width:300,8. frame:true,9. applyTo :'panel',10. bodyStyle:'background-color:#FFFFFF',11. html:'<div>⾯板体(body)</div>',12. tools : [13. {id:'toggle'},14. {id:'close'},15. {id:'maximize'}16. ],17. buttons:[18. new Ext.Button({19. text:'⾯板底部(footer)'20. })21. ]22. })23.24.25. ⾯板panel加载远程页⾯26. var panel = new Ext.Panel({27. title:'⾯板加载远程页⾯',28. height:150,//设置⾯板的⾼度29. width:250,//设置⾯板的宽度30. frame:true,//渲染⾯板31. autoScroll : true,//⾃动显⽰滚动条32. collapsible : true,//允许展开和收缩33. applyTo :'panel',34. autoLoad :'page1.html',//⾃动加载⾯板体的默认连接35. bodyStyle:'background-color:#FFFFFF'//设置⾯板体的背景⾊36. })37.38. ⾯板panel加载本地页⾯39. var panel = new Ext.Panel({40. title:'⾯板加载本地资源',41. height:150,//设置⾯板的⾼度42. width:250,//设置⾯板的宽度43. frame:true,//渲染⾯板44. collapsible : true,//允许展开和收缩45. autoScroll : true,//⾃动显⽰滚动条46. autoHeight : false,//使⽤固定⾼度47. //autoHeight : true,//使⽤⾃动⾼度48. applyTo :'panel',49. contentEl :'localElement',//加载本地资源50. bodyStyle:'background-color:#FFFFFF'//设置⾯板体的背景⾊51. })52. 本地资源53. <table border=1 id='localElement'>54. <tr><th colspan=2>本地资源---员⼯列表</th></tr>55. <tr>56. <th width = 60>序号</th><th width = 80>姓名</th>57. <tr>58. <tr><td>1</td><td>张三</td></tr>59. <tr><td>2</td><td>李四</td></tr>60. <tr><td>3</td><td>王五</td></tr>61. <tr><td>4</td><td>赵六</td></tr>62. <tr><td>5</td><td>陈七</td></tr>63. <tr><td>6</td><td>杨⼋</td></tr>64. <tr><td>7</td><td>刘九</td></tr>65. </table>66.67.68. 使⽤html配置项定义⾯板panel内容69. var htmlArray = [70. '<table border=1>',71. '<tr><td colspan=2>员⼯列表</td></tr>',72. '<tr><th width = 60>序号</th><th width = 80>姓名</th><tr>',73. '<tr><td>1</td><td>张三</td></tr>',74. '<tr><td>2</td><td>李四</td></tr>',75. '<tr><td>3</td><td>王五</td></tr>',76. '<tr><td>4</td><td>赵六</td></tr>',77. '<tr><td>5</td><td>陈七</td></tr>',78. '<tr><td>6</td><td>杨⼋</td></tr>',79. '<tr><td>7</td><td>刘九</td></tr>',80. '</table>'81. ];82. var panel = new Ext.Panel({83. title:'使⽤html配置项⾃定义⾯板内容',84. height:150,//设置⾯板的⾼度85. width:250,//设置⾯板的宽度86. frame:true,//渲染⾯板87. collapsible : true,//允许展开和收缩88. autoScroll : true,//⾃动显⽰滚动条89. applyTo :'panel',90. html:htmlArray.join(''),91. bodyStyle:'background-color:#FFFFFF'//设置⾯板体的背景⾊92. })93.94.95. 使⽤items添加panel内容96. var panel = new Ext.Panel({97. header : true,98. title:'⽇历',99. frame:true,//渲染⾯板100. collapsible : true,//允许展开和收缩101. autoHeight : true,//⾃动⾼度102. width : 189,//固定宽度103. applyTo :'panel',104. items: new Ext.DatePicker()//向⾯板中添加⼀个⽇期组件105. })106.107.108.109. ⾯板panel嵌套的使⽤110.111. var panel = new Ext.Panel({112. header : true,113. title:'使⽤items进⾏⾯板嵌套',114. frame:true,//渲染⾯板115. collapsible : true,//允许展开和收缩116. height : 200,117. width : 250,118. applyTo :'panel',119. defaults : {//设置默认属性120. bodyStyle:'background-color:#FFFFFF',//设置⾯板体的背景⾊121. height : 80,//⼦⾯板⾼度为80122. collapsible : true,//允许展开和收缩123. autoScroll : true//⾃动显⽰滚动条124. },125. items: [126. new Ext.Panel({127. title : '嵌套⾯板⼀',128. contentEl : 'localElement'//加载本地资源129. }),130. new Ext.Panel({131. title : '嵌套⾯板⼆',132. autoLoad : 'page1.html'//加载远程页⾯133. })134. ]135. })136.137. FitLayout布局panel138.139. var panel = new Ext.Panel({140. layout : 'fit',141. title:'yout.FitLayout布局⽰例',142. frame:true,//渲染⾯板143. height : 150,144. width : 250,145. applyTo :'panel',146. defaults : {//设置默认属性147. bodyStyle:'background-color:#FFFFFF'//设置⾯板体的背景⾊148. },149. //⾯板items配置项默认的xtype类型为panel,150. //该默认值可以通过defaultType配置项进⾏更改151. items: [152. {153. title : '嵌套⾯板⼀',154. html : '⾯板⼀'155. },156. {157. title : '嵌套⾯板⼆',158. html : '⾯板⼆'159. }160. ]161. })162.163.164. layout.Accordion布局panel165. var panel = new Ext.Panel({166. layout : 'accordion',167. layoutConfig : {168. activeOnTop : true,//设置打开的⼦⾯板置顶169. fill : true,//⼦⾯板充满⽗⾯板的剩余空间170. hideCollapseTool: false,//显⽰“展开收缩”按钮171. titleCollapse : true,//允许通过点击⼦⾯板的标题来展开或收缩⾯板172. animate:true//使⽤动画效果173. },174. title:'yout.Accordion布局⽰例',175. frame:true,//渲染⾯板176. height : 150,177. width : 250,178. applyTo :'panel',179. defaults : {//设置默认属性180. bodyStyle:'background-color:#FFFFFF;padding:15px'//设置⾯板体的背景⾊181. },182. items: [183. {184. title : '嵌套⾯板⼀',185. html : '说明⼀'186. },187. {188. title : '嵌套⾯板⼆',189. html : '说明⼆'190. }191. ,192. {193. title : '嵌套⾯板三',194. html : '说明三'195. }196. ]197. })198.199.200. layout.CardLayout布局panel201. var panel = new Ext.Panel({202. layout : 'card',203. activeItem : 0,//设置默认显⽰第⼀个⼦⾯板204. title:'yout.CardLayout布局⽰例',205. frame:true,//渲染⾯板206. height : 150,207. width : 250,208. applyTo :'panel',209. defaults : {//设置默认属性210. bodyStyle:'background-color:#FFFFFF;padding:15px'//设置⾯板体的背景⾊211. },212. items: [213. {214. title : '嵌套⾯板⼀',215. html : '说明⼀',216. id : 'p1'217. },218. {219. title : '嵌套⾯板⼆',220. html : '说明⼆',221. id : 'p2'222. }223. ,224. {225. title : '嵌套⾯板三',226. html : '说明三',227. id : 'p3'228. }229. ],230. buttons:[231. {232. text : '上⼀页',233. handler : changePage234. },235. {236. text : '下⼀页',237. handler : changePage238. }239. ]240. })241. //切换⼦⾯板242. function changePage(btn){243. var index = Number(yout.activeItem.id.substring(1));244. if(btn.text == '上⼀页'){245. index -= 1;246. if(index < 1){247. index = 1;248. }249. }else{250. index += 1;251. if(index > 3){252. index = 3;253. }254. }255. yout.setActiveItem('p'+index);256. }257.258.259. layout.AnchorLayout布局panel260. var panel = new Ext.Panel({261. layout : 'anchor',262. title:'yout.AnchorLayout布局⽰例',263. frame:false,//渲染⾯板264. height : 150,265. width : 300,266. applyTo :'panel',267. defaults : {//设置默认属性268. bodyStyle:'background-color:#FFFFFF;padding:15px'//设置⾯板体的背景⾊269. },270. items: [271. {272. anchor : '50% 50%',//设置⼦⾯板的宽⾼为⽗⾯板的50%273. title : '⼦⾯板'274. }275. ]276. })277. 或者:278. items: [279. {280. anchor : '-10 -10',//设置⼦⾯板的宽⾼偏移⽗⾯板10像素281. title : '⼦⾯板'282. }283. ]284.285. 或者:286. items: [287. {288. anchor : 'r b',//相对于⽗容器的右边和底边的差值进⾏定位289. width : 200,290. height : 100,291. title : '⼦⾯板'292. }293. ]294.295. 或者:296. items: [297. {298. x : '10%',//横坐标为距⽗容器宽度10%的位置299. y : 10,//纵坐标为距⽗容器上边缘10像素的位置300. width : 100,301. height : 50,302. title : '⼦⾯板⼀'303. },304. {305. x : 90,//横坐标为距⽗容器左边缘90像素的位置306. y : 70,//纵坐标为距⽗容器上边缘70像素的位置307. width : 100,308. height : 50,309. title : '⼦⾯板⼆'310. }311. ]312.313. layout.FormLayout布局panel314. var panel = new Ext.Panel({315. title:'yout.FormLayout布局⽰例',316. layout : 'form',317. labelSeparator : ':',//在容器中指定分隔符318. frame:true,//渲染⾯板319. height : 110,320. width : 300,321. applyTo :'panel',322. defaultType: 'textfield',//指定容器⼦元素默认的xtype类型为textfield 323. defaults : {//设置默认属性324. msgTarget: 'side'//指定默认的错误信息提⽰⽅式325. },326. items: [327. {328. fieldLabel:'⽤户名',329. allowBlank : false330. },331. {332. fieldLabel:'密码',333. allowBlank : false334. }335. ]336. })337.338. layout.ColumnLayout布局panel339. var panel = new Ext.Panel({340. title:'yout.ColumnLayout布局⽰例',341. layout : 'column',342. frame:true,//渲染⾯板343. height : 150,344. width : 250,345. applyTo :'panel',346. defaults : {//设置默认属性347. bodyStyle:'background-color:#FFFFFF;',//设置⾯板体的背景⾊348. frame : true349. },350. items: [351. {352. title:'⼦⾯板⼀',353. width:100,//指定列宽为100像素354. height : 100355. },356. {357. title:'⼦⾯板⼆',358. width:100,//指定列宽为100像素359. height : 100360. }361. ]362. })363.364. 或者:365. items: [366. {367. title:'⼦⾯板⼀',368. columnWidth:.3,//指定列宽为容器宽度的30%369. height : 100370. },371. {372. title:'⼦⾯板⼆',373. columnWidth:.7,//指定列宽为容器宽度的70%374. height : 100375. }376. ]377.378. 或者:379. items: [380. {381. title:'⼦⾯板⼀',382. width : 100,//指定列宽为100像素383. height : 100384. },385. {386. title:'⼦⾯板⼆',387. width : 100,388. columnWidth:.3,//指定列宽为容器剩余宽度的30%389. height : 100390. },391. {392. title:'⼦⾯板三',393. columnWidth:.7,//指定列宽为容器剩余宽度的70%394. height : 100395. }396. ]397.398.399. layout.TableLayout布局panel400. var panel = new Ext.Panel({401. title:'yout.TableLayout布局⽰例',402. layout : 'table',403. layoutConfig : {404. columns : 4 //设置表格布局默认列数为4列405. },406. frame:true,//渲染⾯板407. height : 150,408. applyTo :'panel',409. defaults : {//设置默认属性410. bodyStyle:'background-color:#FFFFFF;',//设置⾯板体的背景⾊411. frame : true,412. height : 50413. },414. items: [415. {416. title:'⼦⾯板⼀',417. colspan : 3//设置跨列418. },419. {420. title:'⼦⾯板⼆',421. rowspan : 2,//设置跨⾏422. height : 100423. },424. {title:'⼦⾯板三'},425. {title:'⼦⾯板四'},426. {title:'⼦⾯板五'}427. ]428. })429.430.431. layout.BorderLayout布局panel432. var panel = new Ext.Panel({433. title : 'yout.BorderLayout布局⽰例',434. layout:'border',//表格布局435. height : 250,436. width : 400,437. applyTo : 'panel',438. items: [439. {440. title: 'north Panel',441. html : '上边',442. region: 'north',//指定⼦⾯板所在区域为north443. height: 50444. },445. {446. title: 'South Panel',447. html : '下边',448. region: 'south',//指定⼦⾯板所在区域为south449. height: 50450. },{451. title: 'West Panel',452. html : '左边',453. region:'west',//指定⼦⾯板所在区域为west454. width: 100455. },{456. title: 'east Panel',457. html : '右边',458. region:'east',//指定⼦⾯板所在区域为east459. width: 100460. },{461. title: 'Main Content',462. html : '中间',463. region:'center'//指定⼦⾯板所在区域为center464. }]465. });466.467. Ext.Viewport布局⽰例468. new Ext.Viewport({469. title : 'Ext.Viewport⽰例',470. layout:'border',//表格布局471. items: [472. {473. title: 'north Panel',474. html : '上边',475. region: 'north',//指定⼦⾯板所在区域为north476. height: 100477. },{478. title: 'West Panel',479. html : '左边',480. region:'west',//指定⼦⾯板所在区域为west481. width: 150482. },{483. title: 'Main Content',484. html : '中间',485. region:'center'//指定⼦⾯板所在区域为center486. }]487. });488.489.490.491. Ext.TabPanel 标签页⽰例492. var tabPanel = new Ext.TabPanel({493. height : 150,494. width : 300,495. activeTab : 0,//默认激活第⼀个tab页496. animScroll : true,//使⽤动画滚动效果497. enableTabScroll : true,//tab标签超宽时⾃动出现滚动按钮498. applyTo : 'panel',499. items: [500. {title: 'tab标签页1',html : 'tab标签页1内容'},501. {title: 'tab标签页2',html : 'tab标签页2内容'},502. {title: 'tab标签页3',html : 'tab标签页3内容'},503. {title: 'tab标签页4',html : 'tab标签页4内容'},504. {title: 'tab标签页5',html : 'tab标签页5内容'}505. ]506. });507.508.509. Ext.TabPanel(转换div)⽰例510.511. <mce:script type="text/javascript"><!--512. Ext.onReady(function(){513. Ext.BLANK_IMAGE_URL = '../../extjs2.0/resources/images/default/s.gif'; 514. var tabPanel = new Ext.TabPanel({515. height : 50,516. width : 300,517. autoTabs : true,//⾃动扫描页⾯中的div然后将其转换为标签页518. deferredRender : false,//不进⾏延时渲染519. activeTab : 0,//默认激活第⼀个tab页520. animScroll : true,//使⽤动画滚动效果521. enableTabScroll : true,//tab标签超宽时⾃动出现滚动按钮522. applyTo : 'panel'523. });524. });525.526. // --></mce:script>527. </HEAD>528. <BODY>529. <table width = 100%>530. <tr><td> <td></tr>531. <tr><td width=100></td><td>532. <div id='panel'>533. <div class='x-tab' title='tab标签页1'>tab标签页1内容</div>534. <div class='x-tab' title='tab标签页2'>tab标签页2内容</div>535. <div class='x-tab' title='tab标签页3'>tab标签页3内容</div>536. <div class='x-tab' title='tab标签页4'>tab标签页4内容</div>537. <div class='x-tab' title='tab标签页5'>tab标签页5内容</div>538. </div>539. <div class='x-tab' title='tab标签页6'>tab标签页6内容</div>540. <td></tr>541. </table>542. </BODY>543. </HTML>544.545.546. Ext.TabPanel⽰例(动态添加tab页)547. var tabPanel = new Ext.TabPanel({548. height : 150,549. width : 300,550. activeTab : 0,//默认激活第⼀个tab页551. animScroll : true,//使⽤动画滚动效果552. enableTabScroll : true,//tab标签超宽时⾃动出现滚动按钮553. applyTo : 'panel',554. resizeTabs : true,555. tabMargin : 50,556. tabWidth : 100,557. items : [558. {title: 'tab标签页1',html : 'tab标签页1内容'}559. ],560. buttons : [561. {562. text : '添加标签页',563. handler : addTabPage564. }565. ]566. });567. function addTabPage(){568. var index = tabPanel.items.length + 1;569. var tabPage = tabPanel.add({//动态添加tab页570. title: 'tab标签页'+index,571. html : 'tab标签页'+index+'内容',572. closable : true//允许关闭573. })574. tabPanel.setActiveTab(tabPage);//设置当前tab页575. }576.577.578. 布局嵌套实现表单横排579.580. var form = new Ext.form.FormPanel({581. title:'通过布局嵌套实现表单横排',582. labelSeparator :':',//分隔符583. labelWidth : 50,//标签宽度584. bodyStyle:'padding:5 5 5 5',//表单边距585. frame : false,586. height:150,587. width:250,588. applyTo :'form',589. items:[590. {591. xtype : 'panel',592. layout : 'column',//嵌套列布局593. border : false,//不显⽰边框594. defaults : {//应⽤到每⼀个⼦元素上的配置595. border : false,//不显⽰边框596. layout : 'form',//在列布局中嵌套form布局597. columnWidth : .5//列宽598. },599. items : [600. {601. labelSeparator :':',//分隔符602. items : {603. xtype : 'radio',604. name : 'sex',//名字相同的单选框会作为⼀组605. fieldLabel:'性别',606. boxLabel : '男'607. }608. },609. {610. items : {611. xtype : 'radio',612. name : 'sex',//名字相同的单选框会作为⼀组613. hideLabel:true,//横排后隐藏标签614. boxLabel : '⼥'615. }616. }617. ]618. },619. {620. xtype : 'panel',621. layout : 'column',//嵌套列布局622. border : false,//不显⽰边框623. defaults : {//应⽤到每⼀个⼦元素上的配置624. border : false,//不显⽰边框625. layout : 'form',//在列布局中嵌套form布局626. columnWidth : .5//列宽627. },628. items : [629. {630. labelSeparator :':',//分隔符631. items : {632. xtype : 'checkbox',633. name : 'swim',634. fieldLabel:'爱好',635. boxLabel : '游泳'636. }637. },638. {639. items : {640. xtype : 'checkbox',641. name : 'walk',642. hideLabel:true,//横排后隐藏标签643. boxLabel : '散步'644. }645. }646. ]647. }648. ]649. })。

Ext的Layout布局

Ext的Layout布局

我们都知道java中有布局管理器的概念,通过调整布局器可以简化我们对可视组件的管理。

而在Ext中同样提供了自己的布局实现,以简化web界面的开发与定制。

如下图所示,Ext的Layout可分解为东、西、南、北、中5个基本区域。

在ExtJS2.0实现中,我们可以写成如下代码样式。

ExtJS2.0配置方法如下:初识ExtJSLayoutExt.jsJavaScript代码1.2. * <p>Title: LoonFramework</p>3. * <p>Description:Ext的Layout用例</p>4. * <p>Copyright: Copyright (c) 2008</p>5. * <p>Company: LoonFramework</p>6. * <p>License: /licenses/LICENSE-2.0</p>7. * @author chenpeng8. * @email:ceponline@9. * @version 0.110. */youtExt = function()...{12. //设定布局器及面板13. //Ext1.1为Ext.BorderLayout14. var Viewport = Ext.Viewport;15. //变量设置16. var root;17. var layout;18. //返回LayoutExt操作结果到onReady19. return ...{20. init: function()...{21. root = this;22. //初始化Ext状态管理器,此类可返回用户在Cookie中的操作状态23. Ext.state.Manager.setProvider(new Ext.state.CookieProvider());24.25. layout = new Viewport(...{26. //布局方式,'border'27. layout: 'border',28. items: [ //北29. ...{30. region: 'north', //显示区域31. contentEl: 'north', //绑定的content32. title: 'North', //名称33. split: false,//分割线34. collapsible: true, //是否允许折起35. //在ie下无此项会报错(firefox无事……),默认分别为此布局左、上、右、下的边距,以此防止越界造成的崩溃。

Ext2.0教程一:Ext介绍以及 ext页面布局.doc

Ext2.0教程一:Ext介绍以及 ext页面布局.doc

学习ext有一段时间了,也开发了几个项目,抽点时间做个总结,刚好公司让我做个Ext 培训,于是随便写个Ext教程。

Ext介绍Ext是一个很不错的Ajax框架,可以用来开发带有华丽外观的胖客户端应用,使得我们的b/s应用更加具有活力及生命力,提高用户体验。

ExtJS是一个用javascript编写,与后台技术无关的前端ajax框架。

因此,可以把Ext用在.Net、Java、Php等各种开发语言开发的应用中。

至今Ext最新版本是ext2.2,下面的教程都是以Ext2.2作为基础的。

Ext 主要有下列类:Extair:适配器data:数据处理dd:页面元素的拖曳form:表单操作grid:装载数据的表格layout:布局menu:各式菜单state:用户状态tree:各式树util:常用函数学习Ext必须注意,使用ext必须导入ext包,将下载好的ext保存在本地硬盘,像导入普通js文件、css文件一样导入需要的文件;要使用ext,下面三个文件是必须导入的<link rel="stylesheet" type="text/css" href="ext22/resources/css/ext-al l.css" /><script type="text/javascript" src="ext22/adapter/ext/ext-base.js"></scr ipt><script type="text/javascript" src="ext22/ext-all.js"></script>第一个导入Ext样式,其实ext就是js+样式,所以必须导入。

第二和第三个都是js文件,必须注意导入顺序,ext-all.js 里面要使用到ext-base.j s设置的基本参数,因此ext-base.js必须先导入!ext-base.js 有500多k的大小,页面加载的速度可能比较慢,再由于交互性强,特别适合后台管理。

Extjs Panel的10种布局

Extjs Panel的10种布局

XT标准布局类面板相当于一张干净的白纸,如果直接在上面添加内容,将很难控制面板中内容的显示位置,面板元素越多就越显得凌乱,所以需要在面板上划分不同的区域,将面板内容展示到希望的位置上。

ExtJS通过提供多种布局类来为面板提供支持,主要包括如下10种:ContainerLayout(容器布局)FitLayout(自适应布局)AccordionLayout(折叠布局)CardLayout(卡片式布局)AnchorLayout(锚点布局)AbsoluteLayout(绝对位置布局)FormLayout(表单布局)ColumnLayout(列布局)TableLayout(表格布局)BorderLayout(边框布局)接下来分别介绍这10种布局类的特点及使用方式。

1 ContainerLayout容器布局yout.ContainerLayout 提供了所有布局类的基本功能,它没有可视化的外观,只是提供容器作为布局的基本逻辑,这个类通常被扩展而不通过 new 关键字直接创建。

如果面板(panel)没有指定任何布局类,则它将会作为默认布局来创建,表5-4是主要配置项。

表5-4 yout.ContainerLayout主要配置项目表2 FitLayout自适应布局yout.FitLayout 是布局的基础类,对应面板布局配置项(layout)的名称为 fit,使用 fit 布局将使面板子元素自动充满容器,如果在当前容器中存在多个子面板则只有第一个会被显示。

注意:在本节的示例之前会简单的介绍新概念,组件的xtype类型。

xtype类型相当于组件的别名,通过使用xtype类型可以实现组件的延时创建。

在后续的示例中会大量使用xtype来创建组件,这将有利于读者形成使用xtype的习惯,而减少new关键字的使用。

下面是自适应布局的一个简单的示例。

代码5-7:FitLayout(自适应布局)示例<script type="text/javascript">Ext.onReady(function(){Ext.BLANK_IMAGE_URL ='../../extjs2.0/resources/images/default/s.gif';var panel = new Ext.Panel({layout :'fit',title:'yout.FitLayout布局示例',frame:true, //渲染面板height : 150,width : 250,applyTo :'panel',defaults : { //设置默认属性bodyStyle:'background-color:#FFFFFF' //设置面板体的背景色},//面板items配置项默认的xtype类型为panel,该默认值可以通过defaultType配置项进行更改items: [{title : '嵌套面板一',html : '面板一'},{title : '嵌套面板二',html : '面板二'}]})});</script>在代码5-7中共为外层面板添加了2个子面板,title分别是“嵌套面板一”和“嵌套面板二”,并指定外层面板的布局类型为fit,由图 5-11可以看到“嵌套面板一”充满了整个外层面板,而“嵌套面板二”并没有显示出来。

Extjs教程 第七章 布局

Extjs教程 第七章 布局

第七章 layout(布局)layout(布局)可以让表单、表格等控件继承到一个web应用中。

最常见的布局可以在操作系统中找到,例如微软的windwos,它利用的就是border layout(边界布局),resizable region(可改变大小的区域),accordions(层叠面板),tabs(标签页)和其它能能想到的东西。

为了让不同浏览器有同样的用户界面,ExtJS提供了强大的layout management syestem(布局管理系统)。

布局中的每一部分都可以被管理和控制,你可以移动或者隐藏它们,然后你可以通过单击一个按钮来在你需要的时候显示它们。

在这章中,我们将学到:∙为一个应用进行布局;∙建立标签布局;∙通过layout管理Ext控件;∙学习高级嵌套的layout。

什么是layout,region和viewport?Ext使用Panel(面板)作为大多数layout的基础。

我们已经使用了其中的一些,如FormPanel(表单面板)、GridPanel(表格面板)。

viewport有点像panel,它包含了整个布局,填充浏览器的整个可视区域。

在我们的第一个例子中,我们将使用viewport和border layout来包含多个Panel。

viewport有region(区域),如同罗盘一样,有North(北)、South(南)、East(东)和West(西)这四个region——Center(中央)region显示在中间。

这些方向告诉Panel该处于viewport的哪个方位上。

在形成多panel后,他们之间还会有可移动的边界。

显示效果如下,它集成了很多我们之前用到的示例:这种layout叫做“border”layout,region之间靠一个可拖拽的三维分界线分开。

这个示例包含了4个panel region。

North:工具栏;West:表单;Center:在标签面板中的grid;East:包含了文字的面板。

Ext常用6大布局方式

Ext常用6大布局方式

Ext常用6大布局方式前言:只要是EXT.Container以及其之类都可以都可以使用Layout对其Items进行布局简单说明最常用到的6种布局方式:一.最简单的布局:FitLayoutJavascript代码注意:1.使用Fit布局 items中只能有一个组件,如果你放置了多个组件,也只能是第一个用效。

2.使用Fit布局在组件中不能使用:autoHeight:true 否则会使FitLayout实效二.最常用的布局:BorderLayoutJavascript代码注意:1.center属性值必须指定2.north,south 不要指定width3.west,east不要指定height4.不要使用autoHeight,autoWidth5.添加split:true属性可以控制区域大小三.表单布局:FormLayoutJavascript代码注意:1.从上面的继承图可以看出FormLayout是AnchorLayout的子类,因此可以在里面使用anchor属性设置大小比例2.FormLayout是FormPanel默认的布局方式,因此可以不显示写出Layout:'form'3.fieldLabel,boxLabel在FormLayout布局情况下才能显示出来四.列布局:ColumnLayoutJavascript代码注意:1.items的每个子组件中的columnWidth加起来的和必须为1五.控制大小布局:AnchorLayoutJavas代码六.伸缩折叠布局:Accordion Javascript代码注意:1.使用Accordion布局一定要设置标题:title2.与布局有关(所有布局方式都可以)的参数属性都可以写在layoutConfig:{}里面;。

Ext学习培训-控件布局

Ext学习培训-控件布局
Ext 学习-第二讲 控件布局
200907
主要内容
form
column
border
table
card
anchor
accordion
fit
absolute
2019/10/18
2
Form 布局
• Layout:’form’ • 专门用于管理表单中输入字段的布局
2019/10/18
3
Column布局
2019/10/18
7
Accordion布局
Layout:’accodion’
2019/10/18
8
综合举例
2019/10/18
9
Table布局
layout:'table', layoutConfig: {columns:3} // 按照普通表格的方法布局子元素,用layoutConfig:{columns:3},//将父容器 分成3列
2019/10/18
10
Card布局
• Layout:’card’
• 方法: • getLayout.setActiveItem(id/Number)
2019/10/18
11
Anchor 布局
{title:'Item 1',html:'wtf',width:800,anchor:'right 20%'}, {title:'Item 2',html:'wtf',width:300,anchor:'50% 30%'}, {title:'Item 3',html:'wtf',width:600,anchor:'-100 50%'}

ExtJs布局详解

ExtJs布局详解

ExtJs布局详解序⾔1、百度百科上说:ExtJs功能丰富,⽆⼈能出其右。

⽆论是界⾯之美,还是功能之强,extjs都⾼居榜⾸。

2、呵呵,界⾯之美当是少不了布局的,这篇⽂章我写layout的七种布局。

(extjs是4.+版本)Border布局__边界布局这中布局是最常⽤的布局之⼀,看图border布局:border布局也称边界布局,他将页⾯分隔为west,east,south,north,center这五个部分,我们需要在其items中指定使⽤region参数为其⼦元素指定具体位置。

注意:north和south部分只能设置⾼度(height),west和east部分只能设置宽度(width)。

north south west east区域变⼤,center区域就变⼩了。

参数 split:true 可以调整除了center四个区域的⼤⼩。

参数 collapsible:true 将激活折叠功能。

center 区域是必须使⽤的,Center区域会⾃动填充其他区域的剩余空间。

尤其在Extjs4.0中,当指定布局为border时,如果没有指定center区域时,会出现报错信息。

Ext.onReady(function () {new Ext.Viewport({title: "Viewport",layout: "border",defaults: {bodyStyle: "background-color: #FFFFFF;",frame: true},items: [{ region: "west", width:90, title: 'north', collapsible: true },{ region: "east", width: 90, title: 'north', collapsible: true },{ region: "north", height: 100, title:'north' , collapsible:true },{ region: "center", split: true, border: true, collapsible: true,title:'center' },{ region: "south", title:"south", split: true, border: true, collapsible: true, height: 100 },]});});Accordion布局__⼿风琴布局accordion布局:accordion布局也称⼿风琴布局,在accordion布局下,在任何时间⾥,只有⼀个⾯板处于激活状态。

  1. 1、下载文档前请自行甄别文档内容的完整性,平台不提供额外的编辑、内容补充、找答案等附加服务。
  2. 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
  3. 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 显示该区域。

相关文档
最新文档