进阶篇ExtJs中布局.pptVIP

北的 北风网项目培训 ExtJs版国讯教育通用智能OA办公平台 进阶篇(9)- ExtJs中的布局 讲师:风舞烟  目录 Accordion布局 Border区域布局 Card布局 Column列布局 F布局 Form布局 table布局  Accordion布局 Accordion布局由类 Ext layout Accordion定义,名 称为 accordion,表示可折叠的布局,也就是说使用 该布局的容器组件中的子元素是可折叠的形式 如: 容器組件 EXt, onready( unction(是元素肉喜 new Ext Panel( i render To: hello title:容器组件 子元素3 width: 500, height: 200, layout: accordion  layout Config: animate: true j items { title:子元素1,hm这是子元素1中的内容}, { title:」元素2hml:这是子元素2中的内容} {ttle:!元素3hml:这是子元素3中的内容} );  border区域布局 Border布局由类 Ext layout. BorderLayout定义,布局 名称为 border。该布局把容器分成东南西北中五个 区域,分别由east, south,west, north, center来表示 ,在往容器中添加子元素的时候,我们只需要指定 这些子元素所在的位置, Border布局会自动把子元 素放到布局指定的位置。  Ext on Ready(function I new Ext Viewport( layout: border 人天下班搜生 region: north 面一中头面 height: 50 title:顶部面板“ }, region: south b height: 50 title:底部面板  region:center. title:中央面板“ region:west, width: 100 title:h左边面板 region:east width: 100 title:右边面板“  Card布局 Cad布局由 Ext layout. CardLayout类定义,名称为car,该布 满足安装向导、Tab选项板等应用中面板显示的需求。可以 局将会在容器组 元素 如 Ext on Ready (function( var panel=new Ext Panel( renderTo hello titl:容器组件, 容器件 width: 500 是子元来1中的内容 height: 200, layout: card  layout Config: I animate: true Items:[{ I title:元素Ihtml:这是子元素l中的内容 tit:元素2hml:这是子元素2中的内容}, {ite:元素3htm这是子元素3中的内容} buttons:[{text:切换 handler: changeTab} );  var i=l: function change Tabo panel. getLayoutO. setActiveltem(i++) fi2)i=0;