ExtJS中layout的12种布局风格

ExtJS 中中 layout 的的 12 种布局风格种布局风格 extjs 的容器组件都可以设置它的显示风格 它的有效值有 absolute accordion anchor border card column fit form and table 一共 9 种 另外几种见 里面有详细的例子 absolute 顾名思义 在容器内部 根据指定的坐标定位显示 accordion 这个是最容易记的 手风琴效果 Java 代码 1 Ext onReady function 2 var panel new Ext Panel Ext formPanel 就是 Panel 中用了 form 布局 3 4 renderTo paneldiv 5 title 容器组件 6 layout accordion 7 width 500 8 height 200 9 layoutConfig animate false 10 items 11 title 元素 1 html 12 title 元素 2 html 13 title 元素 3 html 14 title 元素 4 html 15 16 17 18 anchor 这个效果具体还不知道有什么用 就是知道注意一下 1 容器内的组件要么指定宽度 要么在 anchor 中同时指定高 宽 2 anchor 值通常只能为负值 指非百分比值 正值没有意义 3 anchor 必须为字符串值 Java 代码 1 Ext onReady function 2 var panel1 new Ext Panel 3 title panel1 4 height 100 5 anchor 50 6 html 高度等于 100 宽度 容器宽度 50 7 8 9 var panel2 new Ext Panel 10 title panel2 11 height 100 12 anchor 50 13 html 高度等于 100 宽度 容器宽度的 50 14 15 16 17 var panel3 new Ext Panel 18 title panel3 19 anchor 10 250 20 html 宽度 容器宽度 10 高度 容器宽度 250 21 22 23 24 var win new Ext Window 25 title Anchor Layout 26 height 400 27 width 400 28 plain true 29 layout anchor 30 items panel1 panel2 panel3 31 32 win show 33 border 将容器分为五个区域 east south west north center Java 代码 1 Ext onReady function 2 3 var button Ext get show btn 4 var win 5 6 button on click function 7 8 创建 TabPanel 9 var tabs new Ext TabPanel 10 region center border 布局 将页面分成东 南 西 北 中五部分 这里表示 TabPanel 放在中间 11 margins 3 3 3 0 12 activeTab 0 13 defaults 14 autoScroll true 15 16 items 17 title Bogus Tab 18 html 第一个 Tab 的内容 19 20 title Another Tab 21 html 我是另一个 Tab 22 23 title Closable Tab 24 html 这是一个可以关闭的 Tab 25 closable true 26 27 28 29 定义一个 Panel 30 var nav new Ext Panel 31 title Navigation 32 region west 放在西 边 即左侧 33 split true 34 width 200 35 collapsible true 允许伸缩 36 margins 3 0 3 3 37 cmargins 3 3 3 3 38 39 40 如果窗口第一次被打开时才创建 41 if win 42 win new Ext Window 43 title Layout Window 44 closable true 45 width 600 46 height 350 47 border false 48 plain true 49 layout border 50 closeAction hide 51 items nav tabs 把上面创建的 panel 和 TabPanel 放在 window 中 并采用 border 方式布局 52 53 54 win show button 55 56 card 像安装向导一样 一张一张显示 Java 代码 1 Ext onReady function 2 3 var i 0 4 5 var navHandler function direction 6 if direction 1 7 i 8 if i 2 i 2 return false 14 15 16 17 var btnNext Ext get move next dom document getElementsByTagName r button 1 18 var btnBack Ext get move next dom document getElementsByTagName r button 0 19 20 if i 0 21 btnBack disabled true 22 23 else 24 btnBack disabled false 25 26 27 if i 2 28 btnNext value 完成 29 btnNext disabled true 30 31 else 32 btnNext value 下一步 33 btnNext disabled false 34 35 36 card getLayout setActiveItem i 37 38 39 40 41 var card new Ext Panel 42 width 200 43 height 200 44 title 注册向导 45 layout card 46 activeItem 0 make sure the active item is set on the container config 47 bodyStyle padding 15px 48 defaults 49 border false 50 51 bbar 52 53 id move prev 54 text 上一步 55 handler navHandler createDelegate this 1 56 57 58 59 id move next 60 text 下一步 61 handler navHandler createDelegate this 1 62 63 64 65 items 66 id card 0 67 html 欢迎来到注册向导 Step 1 of 3 68 69 id card 1 70 html 请填写注册资料 Step 2 of 3 71 72 id card 2 73 html 注册成 功 Step 3 of 3 Complete 74 75 76 renderTo container 77 78 79 80 81 column 把整个容器看成一列 然后向容器放入子元素时 Java 代码 1 Ext onReady function 2 var win new Ext Window 3 title Column Layout 4 height 300 5 width 400 6 plain true 7 layout column 8 items 9 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 fit 一个子元素将充满整个容器 如果多个子元素则只有一个元素充满整个容器 Java 代码 1 Ext onReady function 2 var panel new Ext Panel 3 4 renderTo paneldiv 5 title 容器组件 6 layout fit 7 width 500 8 height 100 9 items 10 title 子元素 1 11 title 子元素 2 12 title 子元素 3 13 title 子元素 4 14 title 子元素 5 15 16 17 18 form 是一种专门用于管理表单中输入字段的布局 Java 代码 1 Ext onReady function 2 var win new Ext Window 3 title form Layout 4 height 150 5 width 230 6 plain true 7 bodyStyle padding 15px 8 items 9 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 table 按照普通表格的方法布局子元素 用 layoutConfig columns 3 将父容器分成 3 列 Java 代码 1 Ext onReady function 2 var panel new Ext Panel 3 4 renderTo paneldiv 5 title 容器组件 6 layo