朋友炒股兩個月賺了10萬，我幫他推廣一下公眾號，把錢用來投資總比放銀行連通貨膨脹都跑不過里強， 硬核離職，在家炒股 ，這是他每天的日志，有些經驗是花錢也買不到的。
首先解釋什么是布局：
來自百度詞典的官方解釋：◎ 布局 bùjú： [distribution;layout] 對事物的全面規划和安排，布：陳設；設置。
我對布局理解是“把**東西放在**位置顯示”[動詞]。
ok，我們這節課就講一下怎么樣把 ExtJs 的組件，放到我們想放置的位置。
一、常用布局
(1)ContainerLayout：默認布局方式，其他布局繼承該類進行擴展功能。顯示：將內部組件以垂直方式疊加。如下所示：
組件一.....
組件二.....
(2)FormLayout：產生類似表單的外觀。顯示：將內部組件以垂直方式疊加。如上所示：
(3)ColumnLayout：將組件以水平方式放置。如下所示：
組件一[第一列] 組件二[第二列] 組件三[第三列]
(4)BorderLayout：一個盒子里擺放5個位置，東、南、西、北、中[即：上下左右中間]。開發的時候經常用來做后台框架的布局，如下所示：
北
西 中 東
南
(5)AccordionLayout：手風琴布局，可以折疊的布局。開發的時候常用來對左側的功能列表進行分類，如下圖所示：
折疊狀態---
展開狀態[包含內容一和二]---
內容一--
內容二--
折疊狀態---
(6)FitLayout：強迫子組件填充滿容器布局。
(7)TableLayout：表格布局，含有行與列的概念。
二、實例
1.代碼如下：
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 <head> 4 <title></title> 5 <!--ExtJs框架開始--> 6 <script type="text/javascript" src="/Ext/adapter/ext/ext-base.js"></script> 7 <script type="text/javascript" src="/Ext/ext-all.js"></script> 8 <script src="/Ext/src/locale/ext-lang-zh_CN.js" type="text/javascript"></script> 9 <link rel="stylesheet" type="text/css" href="/Ext/resources/css/ext-all.css" /> 10 <!--ExtJs框架結束--> 11 <script type="text/javascript"> 12 Ext.onReady(function () { 13 //------ContainerLayout開始------// 14 var box1 = new Ext.BoxComponent({ 15 autoEl: { 16 tag: 'div', 17 style: 'background:red;width:300px;height:30px', 18 html: 'box1' 19 } 20 }); 21 var box2 = new Ext.BoxComponent({ 22 autoEl: { 23 tag: 'div', 24 style: 'background:yellow;width:300px;height:30px', 25 html: 'box2' 26 } 27 }); 28 var box3 = new Ext.BoxComponent({ 29 autoEl: { 30 tag: 'div', 31 style: 'background:blue;width:300px;height:30px;color:#fff', 32 html: 'box3' 33 } 34 }); 35 var containerlayout = new Ext.Container({ 36 layout: 'form', 37 items: [box1, box2, box3], 38 renderTo: 'ContainerLayout' 39 }); 40 //------ContainerLayout結束-----// 41 //------FormLayout開始------// 42 var formlayout = new Ext.Panel({ 43 title: 'FormLayout', 44 layout: 'form', 45 items: [ 46 new Ext.form.TextField({ fieldLabel: '用戶名' }), 47 new Ext.form.TextField({ fieldLabel: '密碼' }), 48 new Ext.form.TextField({ fieldLabel: '重復密碼' }) 49 ], 50 renderTo: 'FormLayout' 51 }); 52 //------FormLayout結束------// 53 //------ColumnLayout開始------// 54 var ColumnLayout = new Ext.Panel({ 55 width: 600, 56 title: 'ColumnLayout', 57 layout: 'column', 58 items: [ 59 new Ext.form.FormPanel({ title: '第一列', columnWidth: .33, labelWidth: 50, items: [ 60 new Ext.form.TextField({ fieldLabel: '用戶名' })] 61 }), 62 new Ext.form.FormPanel({ title: '第二列', columnWidth: .33, labelWidth: 50, items: [ 63 new Ext.form.TextField({ fieldLabel: '密碼' })] 64 }), 65 new Ext.form.FormPanel({ title: '第三列', columnWidth: .34, labelWidth: 80, items: [ 66 new Ext.form.TextField({ fieldLabel: '重復密碼' })] 67 }) 68 ], 69 renderTo: 'ColumnLayout' 70 }); 71 //------ColumnLayout結束------// 72 //------BorderLayout開始------// 73 var BorderLayout = new Ext.Panel({ 74 title: 'BorderLayout', 75 layout: 'border', 76 width: 1100, 77 height: 300, 78 items: [ 79 new Ext.Panel({ title: '上北', region: 'north', html: '可以放個logo什么的' }), 80 new Ext.Panel({ title: '下南', region: 'south', html: '版權信息？', autoEl: 'center' }), 81 new Ext.Panel({ title: '中間', region: 'center', html: '主面板' }), 82 new Ext.Panel({ title: '左東', region: 'west', html: '樹型菜單或是手風琴' }), 83 new Ext.Panel({ title: '右西', region: 'east', html: '常用功能或是去掉？' }) 84 ], 85 renderTo: 'BorderLayout' 86 }); 87 //------BorderLayout結束------// 88 //------AccordionLayout開始------// 89 var AccordionLayout = new Ext.Panel({ 90 title: 'AccordionLayout', 91 layout: 'accordion', 92 height: 200, 93 items: [ 94 new Ext.Panel({ title: '用戶管理', items: [new Ext.BoxComponent({ autoEl: { tag: 'div', html: '用戶管理'} })] }), 95 new Ext.Panel({ title: '角色管理', items: [new Ext.BoxComponent({ autoEl: { tag: 'div', html: '角色管理'} })] }), 96 new Ext.Panel({ title: '系統管理', items: [new Ext.BoxComponent({ autoEl: { tag: 'div', html: '系統管理'} })] }) 97 ], 98 renderTo: 'AccordionLayout' 99 }); 100 //------AccordionLayout結束------// 101 //------FitLayout結束------// 102 var FitLayout = new Ext.Panel({ 103 title: 'FitLayout', 104 height: 100, 105 renderTo: 'FitLayout', 106 layout: 'fit', 107 items: [ 108 new Ext.Panel({ bodyStyle: 'background:red', html: '使用了fit布局,填充滿' }), 109 new Ext.Panel({ bodyStyle: 'background:yellow', html: '這個panel不會顯示，因為是fit布局' }) 110 ] 111 }); 112 var NoFitLayout = new Ext.Panel({ 113 title: 'NoFitLayout', 114 height: 100, 115 renderTo: 'FitLayout', 116 items: [ 117 new Ext.Panel({ bodyStyle: 'background:yellow', html: '未使用了fit布局,沒有填充滿' }) 118 ] 119 }); 120 //------FitLayout結束------// 121 //------TableLayout開始------// 122 var TableLayout = new Ext.Panel({ 123 title: 'TableLayout', 124 layout: 'table', 125 layoutConfig: { columns: 3 }, 126 defaults: { 127 width: 133, 128 height: 100, 129 autoEl: 'center' 130 }, 131 defaultType: 'panel', 132 items: [ 133 { html: '行1列1' }, 134 { html: '行1列2' }, 135 { html: '行[1,2]列3', rowspan: 2, height: 180 }, 136 { html: '行2列[1,2]', colspan: 2, width: 266 } 137 ], 138 renderTo: 'TableLayout' 139 }); 140 //------TableLayout結束------// 141 }); 142 </script> 143 </head> 144 <body> 145 <div id="ContainerLayout" style="float: left; width: 300px"> 146 ContainerLayout：垂直方式放置 147 </div> 148 <div id="FormLayout" style="float: left; width: 240px; padding-left: 10px;"> 149 </div> 150 <div id="ColumnLayout" style="float: left; width: 500px; padding-left: 10px;"> 151 </div> 152 <div id="BorderLayout" style="padding: 10px 0px; clear: both"> 153 </div> 154 <div id="AccordionLayout" style="width: 300px; float: left; height: 200px"> 155 </div> 156 <div id="FitLayout" style="width: 300px; float: left; height: 200px; padding-left: 10px;"> 157 </div> 158 <div id="TableLayout" style="width: 400px; float: left; padding-left: 10px;"> 159 </div> 160 </body> 161 </html>
2.效果如下：
3.說明：
(1)fitlayout只能有一個子組件顯示，如上190所示，我在里面創建了兩個panel，但只有第一個顯示。
轉載請注明出處：http://www.cnblogs.com/iamlilinfeng