ext 常用布局

转自：http://di201yao.javaeye.com/blog/163443

1. <SPAN class=hilite1>Ext</SPAN>.onReady(function(){   
2.   
3.         var tb=new <SPAN class=hilite1>Ext</SPAN>.Toolbar('toolbar-div');//创建一个工具条   
4.   
5.          tb.add(new <SPAN class=hilite1>Ext</SPAN>.Toolbar.SplitButton({   
6.   
7.            t<SPAN class=hilite1>ext</SPAN>: '文件',   
8.   
9.            cls: 'x-btn-t<SPAN class=hilite1>ext</SPAN>-icon blist',   
10.   
11.            menu : {items: [   
12.   
13.              {t<SPAN class=hilite1>ext</SPAN>: '新建', handler: onItemClick},   
14.   
15.              {t<SPAN class=hilite1>ext</SPAN>: '保存', handler: onItemClick},   
16.   
17.              {t<SPAN class=hilite1>ext</SPAN>: '加载', handler: onItemClick}   
18.   
19.            ]}}),   
20.   
21.            new <SPAN class=hilite1>Ext</SPAN>.Toolbar.MenuButton({   
22.   
23.            t<SPAN class=hilite1>ext</SPAN>: '编辑',   
24.   
25.            cls: 'x-btn-t<SPAN class=hilite1>ext</SPAN>-icon blist',   
26.   
27.            menu : {items: [   
28.   
29.              {t<SPAN class=hilite1>ext</SPAN>: '复制', handler: onItemClick},   
30.   
31.              {t<SPAN class=hilite1>ext</SPAN>: '粘贴', handler: onItemClick}   
32.   
33.            ]}})   
34.   
35.          );   
36.   
37.     var root = new <SPAN class=hilite1>Ext</SPAN>.tree.TreeNode({   
38.   
39.         t<SPAN class=hilite1>ext</SPAN>: '文件夹',    
40.   
41.         allowDrag:false,   
42.   
43.         allowDrop:false  
44.   
45.     });       
46.   
47.     root.appendChild(   
48.   
49.         new <SPAN class=hilite1>Ext</SPAN>.tree.TreeNode({t<SPAN class=hilite1>ext</SPAN>:'收件箱',allowDrag:false}),   
50.   
51.         new <SPAN class=hilite1>Ext</SPAN>.tree.TreeNode({t<SPAN class=hilite1>ext</SPAN>:'发件箱',allowDrag:false}),   
52.   
53.         new <SPAN class=hilite1>Ext</SPAN>.tree.TreeNode({t<SPAN class=hilite1>ext</SPAN>:'联系人',allowDrag:false}),   
54.   
55.         new <SPAN class=hilite1>Ext</SPAN>.tree.TreeNode({t<SPAN class=hilite1>ext</SPAN>:'已删除的邮件',allowDrag:false})   
56.   
57.     );    
58.   
59.     var myData = [   
60.   
61.         ['张三','测试','2006-1-1'],   
62.   
63.         ['李四','测试一','2006-5-6'],   
64.   
65.         ['王五','测试二','2007-12-1'],   
66.   
67.         ['刘六','测试三','2006-12-1']   
68.                         
69.     ];    
70.   
71.     var ds = new <SPAN class=hilite1>Ext</SPAN>.data.Store({   
72.   
73.       proxy: new <SPAN class=hilite1>Ext</SPAN>.data.MemoryProxy(myData),   
74.   
75.       reader: new <SPAN class=hilite1>Ext</SPAN>.data.ArrayReader({}, [   
76.   
77.        {name:'sender'},   
78.   
79.        {name:'title'},   
80.   
81.        {name:'sendtime'}   
82.   
83.       ])   
84.   
85.     });   
86.   
87.     ds.load();   
88.   
89.     var colModel = new <SPAN class=hilite1>Ext</SPAN>.grid.ColumnModel([   
90.   
91.                      {header:'发送人',width:100,sortable:true,dataIndex:'sender'},   
92.   
93.                      {id:'title',header:'标题', width:100,sortable:true,dataIndex:'title'},   
94.   
95.                      {header:'发送时间',width:75,sortable:true,dataIndex:'sendtime'}   
96.   
97.               ]);   
98.   
99. var viewport = new <SPAN class=hilite1>Ext</SPAN>.Viewport({   
100.   
101.   layout:'border',   
102.   
103.   items:[   
104.   
105.       new <SPAN class=hilite1>Ext</SPAN>.BoxComponent({   
106.   
107.              region:'north',   
108.   
109.              el:'north-div',   
110.   
111.              tbar:tb,   
112.   
113.              height:26  
114.   
115.       }),   
116.   
117.       new <SPAN class=hilite1>Ext</SPAN>.tree.TreePanel({   
118.   
119.              region:'west',   
120.   
121.              contentEl:'west-div',   
122.   
123.              title:'树列表',   
124.   
125.       split:true,   
126.   
127.       width: 200,   
128.   
129.       minSize: 175,   
130.   
131.       maxSize: 400,   
132.   
133.       collapsible: true,   
134.   
135.       margins:'0 0 0 0',   
136.   
137.       root:root   
138.   
139.       }),   
140.   
141.       {   
142.   
143.              region:'center',   
144.   
145.              layout:'border',   
146.   
147.              items:[   
148.   
149.                     new <SPAN class=hilite1>Ext</SPAN>.grid.GridPanel({   
150.   
151.                            region:'center',   
152.   
153.                            el:'center-center',   
154.   
155.                            title:'条目列表',   
156.   
157.                     ds: ds,   
158.   
159.                     cm: colModel,   
160.   
161.                autoScroll: true  
162.   
163.                     }),   
164.   
165.                     {   
166.   
167.                            region:'south',   
168.   
169.                            contentEl:'center-south',   
170.   
171.                            title:'内容',   
172.   
173.                          split:true,   
174.   
175.                            collapsible:true,   
176.   
177.                            titlebar:true,   
178.   
179.                            height:200,   
180.   
181.                            minSize: 100,   
182.   
183.                            maxSize:400,   
184.   
185.                            collapsedTitle:'内容'  
186.   
187.                      }   
188.   
189.              ]   
190.   
191.       },   
192.   
193.       new <SPAN class=hilite1>Ext</SPAN>.BoxComponent({   
194.   
195.              region:'south',   
196.   
197.              el:'south-div',   
198.   
199.              height:24  
200.   
201.       })   
202.   
203.   ]   
204.   
205. });   
206.   
207. root.expand()   
208.   
209.       function onItemClick(item){   
210.   
211.              alert(item.t<SPAN class=hilite1>ext</SPAN>);   
212.   
213.       }   
214.   
215.  })