ExtJS中layout的用法总结

拼搏现实的明天。 2021-09-10 06:48 296阅读 0赞

#     #

好久没看过EXT了，最近项目中需要用到就重新复习了下，对于一些知识也都模糊不清，现对Extjs中的layout布局进行总结下：   
layout中有absolute,anchor,border,accordion,card,form,table,column,fit这几种，现一一举例：   
1.absolute根据字面意思就知道，是根据具体坐标进行定位的，固不写相应的代码了，其他的如下   
2.anchor:其值可以使百分比和数值，数值一般为负数，其代表的意思是如果宽度和长度中有一个设定值了，则anchor代表的是未设置的那个，如果两者都没有设定具体值，则如果需要使用anchor则需要anchro:'ww,hh'

[view source][]

[print][] [?][Link 1]

`01.` `Ext.onReady(``function``() { `

`02.` `Ext.create(``'Ext.Window'``,{`

`03.` `title:``'Anchor layout'``,`

`04.` `width:400,`

`05.` `height:400,`

`06.` `layout:``'anchor'``,`

`07.` `plain: ``true``,`

`08.` `items:[`

`09.` `Ext.create(``'Ext.panel.Panel'``,{`

`10.` `title:``'panel1'``,`

`11.` `height:100,`

`12.` `anchor:``'-50'``,`

`13.` `html:``'高度等于100，宽度= 容器宽度-50'`

`14.` `}),`

`15.` `Ext.create(``'Ext.panel.Panel'``,{`

`16.` `title:``'panel2'``,`

`17.` `height:100,`

`18.` `anchor:``'50%'``,`

`19.` `html:``'高度等于100，宽度=容器的宽度*50%'`

`20.` `}),`

`21.` `Ext.create(``'Ext.panel.Panel'``,{`

`22.` `title:``'panel3'``,`

`23.` `anchor:``'-10,-200'``,`

`24.` `html:``'高度等于容器高度-10,宽度等于容器宽度-200'`

`25.` `})`

`26.` `]`

`27.`

`28.` `}).show();`

`29.` `});`

3.border:将容器分为五个区域:east,south,west,north,center

[view source][]

[print][] [?][Link 1]

`01.` `Ext.onReady(``function``(){`

`02.` `var` `tab = Ext.create(``'Ext.tab.Panel'``,{`

`03.` `region:``'center'``,``//border布局，将页面分成东，南，西，北，中五部分，这里表示TabPanel放在中间 `

`04.` `margins:``'3,3,3,0'``,`

`05.` `activeTab:0,`

`06.` `defaults:{`

`07.` `autoScroll:``true`

`08.` `},`

`09.` `items:[{`

`10.` `title:``'tab1'``,`

`11.` `html:``'第一个tab内容'`

`12.` `},{`

`13.` `title:``'tab2'``,`

`14.` `html:``'第二个tab内容'`

`15.` `},{`

`16.` `title:``'tab3'``,`

`17.` `html:``'第三个tab内容'`

`18.` `}]`

`19.`

`20.` `})`

`21.` `var` `nav = Ext.create(``'Ext.panel.Panel'``,{`

`22.` `title:``'navigation'``,`

`23.` `region:``'west'``,`

`24.` `split:``true``,`

`25.` `width:200,`

`26.` `collapsible:``true``,``//允许伸缩`

`27.` `margins:``'3,0,3,3'``,`

`28.` `cmargins:``'3,3,3,'`

`29.` `});`

`30.` `Ext.create(``'Ext.Window'``,{`

`31.` `title:``'Layout Window'``,`

`32.` `width:600,`

`33.` `height:350,`

`34.` `closable:``true``,`

`35.` `border:``false``,`

`36.` `plain:``true``,`

`37.` `layout:``'border'``,`

`38.` `closeAction:``'hide'``,`

`39.` `items:[nav,tab]`

`40.` `}).show();`

`41.` `)};`

4.accordion:这个风格是手风琴式的，效果是如果 有多个item，则点击其中一个，则展开，其他的则收缩。

[view source][]

[print][] [?][Link 1]

`01.` `Ext.OnReady(``function``(){ `

`02.` `Ext.create(``'Ext.panel.Panel'``,{`

`03.` `title:``'容器组件'``,`

`04.` `layout:``'accordion'``,`

`05.` `width:600,`

`06.` `height:200,`

`07.` `layoutConfig:{animate:``false``},`

`08.` `items:[{`

`09.` `title:``'元素1'``,html:``''`

`10.` `},{`

`11.` `title:``'元素2'``,html:``''`

`12.` `},{`

`13.` `title:``'元素3'``,html:``''`

`14.` `},{`

`15.` `title:``'元素4'``,html:``''`

`16.` `}]`

`17.`

`18.` `});`

`19.` `});`

5.card:像安装向导一样，一张一张显示

[view source][]

[print][] [?][Link 1]

`01.` `Ext.onReady(``function``(){`

`02.` `var` `navigate = ``function``(panel,direction){`

`03.` `var` `layout = panel.getLayout();`

`04.` `layout[direction]();`

`05.` `Ext.getCmp(``'move-prev'``).setDisabled(!layout.getPrev());`

`06.` `Ext.getCmp(``'move-next'``).setDisabled(!layout.getNext());`

`07.` `};`

`08.` `Ext.create(``'Ext.panel.Panel'``,{`

`09.` `title:``'Example Wizard'``,`

`10.` `height:500,`

`11.` `width:400,`

`12.` `layout: ``'card'``,`

`13.` `activeItem:0,`

`14.` `bodyStyle:``'padding:15px'``,`

`15.` `animCollapse:``true``,`

`16.` `renderTo:Ext.getBody(),`

`17.` `defaults:{`

`18.` `// applied to each contained panel`

`19.` `border: ``false`

`20.` `},`

`21.` `bbar:[{`

`22.` `id:``'move-prev'``,`

`23.` `text:``'back'``,`

`24.` `handler:``function``(btn){`

`25.` `navigate(btn.up(``"panel"``),``"prev"``);`

`26.` `},`

`27.` `disabled:``true`

`28.` `},``'->'``,{`

`29.` `id:``'move-next'``,`

`30.` `text:``"next"``,`

`31.` `handler:``function``(btn){`

`32.` `navigate(btn.up(``"panel"``),``"next"``);`

`33.` `}`

`34.` `}],`

`35.` `items:[{`

`36.` `id:``'card-0'``,`

`37.` `html:``'<h1>Welcome to the Wizard!</h1>'`

`38.` `},{`

`39.` `id:``'card-1'``,`

`40.` `html:``'<p>step 2 of 3 </p>'`

`41.` `},{`

`42.` `id:``'card-2'``,`

`43.` `html:``'<h1>Congratulations!</h1><p>Step 3 of  3-complete</p>'`

`44.` `}]`

`45.` `});`

`46.` `});`

6.form:是一种专门用于管理表单中输入字段的布局

[view source][]

[print][] [?][Link 1]

`01.` `Ext.onReady(``function``() { `

`02.` `var` `win = Ext.create(``'Ext.Window'``,{ `

`03.` `title: ``"form Layout"``, `

`04.` `height: 150, `

`05.` `width: 230, `

`06.` `plain: ``true``, `

`07.` `bodyStyle: ``'padding:15px'``, `

`08.` `items:  `

`09.` `{ `

`10.` `xtype: ``"form"``, `

`11.` `labelWidth: 30, `

`12.` `defaultType: ``"textfield"``, `

`13.` `frame:``true``, `

`14.` `items:  `

`15.` `[ `

`16.` `{ `

`17.` `fieldLabel:``"姓名"``, `

`18.` `name:``"username"``, `

`19.` `allowBlank:``false`

`20.` `}, `

`21.` `{ `

`22.` `fieldLabel:``"呢称"``, `

`23.` `name:``"nickname"`

`24.` `}, `

`25.` `{ `

`26.` `fieldLabel: ``"生日"``, `

`27.` `xtype:``'datefield'``, `

`28.` `name: ``"birthday"``, `

`29.` `width:127 `

`30.` `} `

`31.` `] `

`32.` `} `

`33.` `}); `

`34.` `win.show(); `

`35.` `}); `

7.table:按照普通表格的方法布局子元素，用layoutConfig:\{columns:3\},//将父容器分成3列

[view source][]

[print][] [?][Link 1]

`01.` `Ext.onReady(``function``(){ `

`02.` `Ext.create(``'Ext.panel.Panel'``, `

`03.` `{ `

`04.` `renderTo:Ext.getBody(), `

`05.` `title:``'容器组件'``, `

`06.` `layout:``'table'``,        `

`07.` `width:500, `

`08.` `height:200, `

`09.` `layoutConfig:{columns:3},``//将父容器分成3列 `

`10.` `items:[ `

`11.` `{title:``'元素1'``,html:``'ssssssssss'``,rowspan:2,height:100}, `

`12.` `{title:``'元素2'``,html:``'dfffsddsdfsdf'``,colspan:2}, `

`13.` `{title:``'元素3'``,html:``'sdfsdfsdf'``}, `

`14.` `{title:``'元素4'``,html:``''``} `

`15.` `] `

`16.` `} `

`17.` `); `

`18.` `});`

8.column:把整个容器看成一列,然后向容器放入子元素时

[view source][]

[print][] [?][Link 1]

`01.` `Ext.onReady(``function``() { `

`02.` `var` `win = Ext.create(``'Ext.Window'``,{ `

`03.` `title: ``"Column Layout"``, `

`04.` `height: 300, `

`05.` `width: 400, `

`06.` `plain: ``true``, `

`07.` `layout: ``'column'``, `

`08.` `items: [{ `

`09.` `title:``"width=50%"``, `

`10.` `columnWidth:0.5, `

`11.` `html:``"width=(容器宽度-容器内其它组件固定宽度)*50%"``, `

`12.` `height:200 `

`13.` `}, `

`14.` `{ `

`15.` `title:``"width=250px"``, `

`16.` `width: 200, `

`17.` `height:100, `

`18.` `html:``"固定宽度为250px"`

`19.` `}             `

`20.` `] `

`21.` `}); `

`22.` `win.show(); `

`23.` `}); `

9.fit:填充整个容器（如果多个子元素则只有一个元素充满整个容器）

[view source][]

[print][] [?][Link 1]

`01.` `Ext.OnReady(``function``(){ `

`02.` `Ext.create(Ext.create(Ext.panel.Panel', `

`03.` `{ `

`04.` `renderTo:``'paneldiv'``, `

`05.` `title:``'容器组件'``, `

`06.` `layout:``'fit'``, `

`07.` `width:500, `

`08.` `height:100, `

`09.` `items:[ `

`10.` `{title:``'子元素1'``}, `

`11.` `{title:``'子元素2'``}, `

`12.` `{title:``'子元素3'``}, `

`13.` `{title:``'子元素4'``}, `

`14.` `{title:``'子元素5'``} `

`15.` `] `

`16.` `} `

`17.` `); `

`18.` `});`

作者:zhouyihui2010  
原文:[http://zhouyihui2010.iteye.com/blog/1235404][http_zhouyihui2010.iteye.com_blog_1235404]

[view source]: http://extjs.org.cn/node/599#viewSource
[print]: http://extjs.org.cn/node/599#printSource
[Link 1]: http://extjs.org.cn/node/599#about
[http_zhouyihui2010.iteye.com_blog_1235404]: http://zhouyihui2010.iteye.com/blog/1235404