Extjs 面板控件panel應用



EXTJS Panel佈局(2012-05-30 17:05:24)

標籤：

分類：extjs

1. 面板控件panel應用  
2.         new Ext.Panel({  
3.             title:'面板頭部（header）',  
4.             tbar : ['頂端工具欄(top toolbars)'],  
5.             bbar : ['底端工具欄(bottom toolbars)'],  
6.             height:200,  
7.             width:300,  
8.             frame:true,  
9.             applyTo :'panel',  
10.             bodyStyle:'background-color:#FFFFFF',  
11.             html:'<div>面板體（body）</div>',  
12.             tools : [  
13.                 {id:'toggle'},  
14.                 {id:'close'},  
15.                 {id:'maximize'}  
16.             ],  
17.             buttons:[  
18.                 new Ext.Button({  
19.                     text:'面板底部（footer）'  
20.                 })  
21.             ]  
22.         })  
23.   
24.   
25. 面板panel加載遠程頁面  
26.         var panel = new Ext.Panel({  
27.             title:'面板加載遠程頁面',  
28.             height:150,//設置面板的高度  
29.             width:250,//設置面板的寬度  
30.             frame:true,//渲染面板  
31.             autoScroll : true,//自動顯示滾動條  
32.             collapsible : true,//允許展開和收縮  
33.             applyTo :'panel',  
34.             autoLoad :'page1.html',//自動加載面板體的默認連接  
35.             bodyStyle:'background-color:#FFFFFF'//設置面板體的背景色  
36.         })  
37.   
38. 面板panel加載本地頁面  
39.         var panel = new Ext.Panel({  
40.             title:'面板加載本地資源',  
41.             height:150,//設置面板的高度  
42.             width:250,//設置面板的寬度  
43.             frame:true,//渲染面板  
44.             collapsible : true,//允許展開和收縮  
45.             autoScroll : true,//自動顯示滾動條  
46.             autoHeight  : false,//使用固定高度  
47.             //autoHeight  : true,//使用自動高度  
48.             applyTo :'panel',  
49.             contentEl :'localElement',//加載本地資源  
50.             bodyStyle:'background-color:#FFFFFF'//設置面板體的背景色  
51.         })  
52.          本地資源  
53.     <table border=1 id='localElement'>  
54.         <tr><th colspan=2>本地資源---員工列表</th></tr>  
55.         <tr>  
56.             <th width = 60>序號</th><th width = 80>姓名</th>  
57.         <tr>  
58.         <tr><td>1</td><td>張三</td></tr>  
59.         <tr><td>2</td><td>李四</td></tr>  
60.         <tr><td>3</td><td>王五</td></tr>  
61.         <tr><td>4</td><td>趙六</td></tr>  
62.         <tr><td>5</td><td>陳七</td></tr>  
63.         <tr><td>6</td><td>楊八</td></tr>  
64.         <tr><td>7</td><td>劉九</td></tr>  
65.     </table>  
66.   
67.   
68. 使用html配置項定義面板panel內容  
69.         var htmlArray = [  
70.                         '<table border=1>',  
71.                             '<tr><td colspan=2>員工列表</td></tr>',  
72.                             '<tr><th width = 60>序號</th><th width = 80>姓名</th><tr>',  
73.                             '<tr><td>1</td><td>張三</td></tr>',  
74.                             '<tr><td>2</td><td>李四</td></tr>',  
75.                             '<tr><td>3</td><td>王五</td></tr>',  
76.                             '<tr><td>4</td><td>趙六</td></tr>',  
77.                             '<tr><td>5</td><td>陳七</td></tr>',  
78.                             '<tr><td>6</td><td>楊八</td></tr>',  
79.                             '<tr><td>7</td><td>劉九</td></tr>',  
80.                         '</table>'  
81.                       ];  
82.         var panel = new Ext.Panel({  
83.             title:'使用html配置項自定義面板內容',  
84.             height:150,//設置面板的高度  
85.             width:250,//設置面板的寬度  
86.             frame:true,//渲染面板  
87.             collapsible : true,//允許展開和收縮  
88.             autoScroll : true,//自動顯示滾動條  
89.             applyTo :'panel',  
90.             html:htmlArray.join(''),  
91.             bodyStyle:'background-color:#FFFFFF'//設置面板體的背景色  
92.         })  
93.   
94.   
95. 使用items添加panel內容  
96.         var panel = new Ext.Panel({  
97.             header : true,  
98.             title:'日曆',  
99.             frame:true,//渲染面板  
100.             collapsible : true,//允許展開和收縮  
101.             autoHeight : true,//自動高度  
102.             width : 189,//固定寬度  
103.             applyTo :'panel',  
104.             items: new Ext.DatePicker()//向面板中添加一個日期組件  
105.         })  
106.   
107.   
108.   
109. 面板panel嵌套的使用  
110.   
111.         var panel = new Ext.Panel({  
112.             header : true,  
113.             title:'使用items進行面板嵌套',  
114.             frame:true,//渲染面板  
115.             collapsible : true,//允許展開和收縮  
116.             height : 200,  
117.             width : 250,  
118.             applyTo :'panel',  
119.             defaults : {//設置默認屬性  
120.                 bodyStyle:'background-color:#FFFFFF',//設置面板體的背景色  
121.                 height : 80,//子面板高度爲80  
122.                 collapsible : true,//允許展開和收縮  
123.                 autoScroll : true//自動顯示滾動條  
124.             },  
125.             items: [  
126.                 new Ext.Panel({  
127.                     title : '嵌套面板一',  
128.                     contentEl : 'localElement'//加載本地資源  
129.                 }),  
130.                 new Ext.Panel({  
131.                     title : '嵌套面板二',  
132.                     autoLoad : 'page1.html'//加載遠程頁面  
133.                 })  
134.             ]  
135.         })  
136.   
137. FitLayout佈局panel  
138.   
139.         var panel = new Ext.Panel({  
140.             layout : 'fit',  
141.             title:'Ext.layout.FitLayout佈局示例',  
142.             frame:true,//渲染面板  
143.             height : 150,  
144.             width : 250,  
145.             applyTo :'panel',  
146.             defaults : {//設置默認屬性  
147.                 bodyStyle:'background-color:#FFFFFF'//設置面板體的背景色  
148.             },  
149.             //面板items配置項默認的xtype類型爲panel，  
150.             //該默認值可以通過defaultType配置項進行更改  
151.             items: [  
152.                 {  
153.                     title : '嵌套面板一',  
154.                     html : '面板一'  
155.                 },  
156.                 {  
157.                     title : '嵌套面板二',  
158.                     html : '面板二'  
159.                 }  
160.             ]  
161.         })  
162.   
163.   
164. layout.Accordion佈局panel  
165.         var panel = new Ext.Panel({  
166.             layout : 'accordion',  
167.             layoutConfig : {  
168.                 activeOnTop : true,//設置打開的子面板置頂  
169.                 fill : true,//子面板充滿父面板的剩餘空間  
170.                 hideCollapseTool: false,//顯示“展開收縮”按鈕  
171.                 titleCollapse : true,//允許通過點擊子面板的標題來展開或收縮面板  
172.                 animate:true//使用動畫效果  
173.             },  
174.             title:'Ext.layout.Accordion佈局示例',  
175.             frame:true,//渲染面板  
176.             height : 150,  
177.             width : 250,  
178.             applyTo :'panel',  
179.             defaults : {//設置默認屬性  
180.                 bodyStyle:'background-color:#FFFFFF;padding:15px'//設置面板體的背景色  
181.             },  
182.             items: [  
183.                 {  
184.                     title : '嵌套面板一',  
185.                     html : '說明一'  
186.                 },  
187.                 {  
188.                     title : '嵌套面板二',  
189.                     html : '說明二'  
190.                 }  
191.                 ,  
192.                 {  
193.                     title : '嵌套面板三',  
194.                     html : '說明三'  
195.                 }  
196.             ]  
197.         })  
198.   
199.   
200. layout.CardLayout佈局panel  
201.         var panel = new Ext.Panel({  
202.             layout : 'card',  
203.             activeItem : 0,//設置默認顯示第一個子面板  
204.             title:'Ext.layout.CardLayout佈局示例',  
205.             frame:true,//渲染面板  
206.             height : 150,  
207.             width : 250,  
208.             applyTo :'panel',  
209.             defaults : {//設置默認屬性  
210.                 bodyStyle:'background-color:#FFFFFF;padding:15px'//設置面板體的背景色  
211.             },  
212.             items: [  
213.                 {  
214.                     title : '嵌套面板一',  
215.                     html : '說明一',  
216.                     id : 'p1'  
217.                 },  
218.                 {  
219.                     title : '嵌套面板二',  
220.                     html : '說明二',  
221.                     id : 'p2'  
222.                 }  
223.                 ,  
224.                 {  
225.                     title : '嵌套面板三',  
226.                     html : '說明三',  
227.                     id : 'p3'  
228.                 }  
229.             ],  
230.             buttons:[  
231.                 {  
232.                     text : '上一頁',  
233.                     handler : changePage  
234.                 },  
235.                 {  
236.                     text : '下一頁',  
237.                     handler : changePage  
238.                 }  
239.             ]  
240.         })  
241.         //切換子面板  
242.         function changePage(btn){  
243.             var index = Number(panel.layout.activeItem.id.substring(1));  
244.             if(btn.text == '上一頁'){  
245.                 index -= 1;  
246.                 if(index < 1){  
247.                     index = 1;  
248.                 }  
249.             }else{  
250.                 index += 1;  
251.                 if(index > 3){  
252.                     index = 3;  
253.                 }  
254.             }  
255.             panel.layout.setActiveItem('p'+index);  
256.         }  
257.   
258.   
259. layout.AnchorLayout佈局panel  
260.         var panel = new Ext.Panel({  
261.             layout : 'anchor',  
262.             title:'Ext.layout.AnchorLayout佈局示例',  
263.             frame:false,//渲染面板  
264.             height : 150,  
265.             width : 300,  
266.             applyTo :'panel',  
267.             defaults : {//設置默認屬性  
268.                 bodyStyle:'background-color:#FFFFFF;padding:15px'//設置面板體的背景色  
269.             },  
270.             items: [  
271.                 {  
272.                     anchor : '50% 50%',//設置子面板的寬高爲父面板的50%  
273.                     title : '子面板'  
274.                 }  
275.             ]  
276.         })  
277.        或者：  
278.                         items: [  
279.                 {  
280.                     anchor : '-10 -10',//設置子面板的寬高偏移父面板10像素  
281.                     title : '子面板'  
282.                 }  
283.             ]  
284.   
285.       或者：  
286.             items: [  
287.                 {  
288.                     anchor : 'r b',//相對於父容器的右邊和底邊的差值進行定位  
289.                     width : 200,  
290.                     height : 100,  
291.                     title : '子面板'  
292.                 }  
293.             ]  
294.   
295.     或者：  
296.             items: [  
297.                 {  
298.                     x : '10%',//橫座標爲距父容器寬度10%的位置  
299.                     y : 10,//縱座標爲距父容器上邊緣10像素的位置  
300.                     width : 100,  
301.                     height : 50,  
302.                     title : '子面板一'  
303.                 },  
304.                 {  
305.                     x : 90,//橫座標爲距父容器左邊緣90像素的位置  
306.                     y : 70,//縱座標爲距父容器上邊緣70像素的位置  
307.                     width : 100,  
308.                     height : 50,  
309.                     title : '子面板二'  
310.                 }  
311.             ]  
312.   
313. layout.FormLayout佈局panel  
314.         var panel = new Ext.Panel({  
315.             title:'Ext.layout.FormLayout佈局示例',  
316.             layout : 'form',  
317.             labelSeparator : '：',//在容器中指定分隔符  
318.             frame:true,//渲染面板  
319.             height : 110,  
320.             width : 300,  
321.             applyTo :'panel',  
322.             defaultType: 'textfield',//指定容器子元素默認的xtype類型爲textfield  
323.             defaults : {//設置默認屬性  
324.                 msgTarget: 'side'//指定默認的錯誤信息提示方式  
325.             },  
326.             items: [  
327.                 {  
328.                     fieldLabel:'用戶名',  
329.                     allowBlank : false  
330.                 },  
331.                 {  
332.                     fieldLabel:'密碼',  
333.                     allowBlank : false  
334.                 }  
335.             ]  
336.         })  
337.   
338. layout.ColumnLayout佈局panel  
339.         var panel = new Ext.Panel({  
340.             title:'Ext.layout.ColumnLayout佈局示例',  
341.             layout : 'column',  
342.             frame:true,//渲染面板  
343.             height : 150,  
344.             width : 250,  
345.             applyTo :'panel',  
346.             defaults : {//設置默認屬性  
347.                 bodyStyle:'background-color:#FFFFFF;',//設置面板體的背景色  
348.                 frame : true  
349.             },  
350.             items: [  
351.                 {  
352.                     title:'子面板一',  
353.                     width:100,//指定列寬爲100像素  
354.                     height : 100  
355.                 },  
356.                 {  
357.                     title:'子面板二',  
358.                     width:100,//指定列寬爲100像素  
359.                     height : 100  
360.                 }  
361.             ]  
362.         })  
363.   
364.            或者：  
365.             items: [  
366.                 {  
367.                     title:'子面板一',  
368.                     columnWidth:.3,//指定列寬爲容器寬度的30%  
369.                     height : 100  
370.                 },  
371.                 {  
372.                     title:'子面板二',  
373.                     columnWidth:.7,//指定列寬爲容器寬度的70%  
374.                     height : 100  
375.                 }  
376.             ]  
377.   
378.           或者：  
379.             items: [  
380.                 {  
381.                     title:'子面板一',  
382.                     width : 100,//指定列寬爲100像素  
383.                     height : 100  
384.                 },  
385.                 {  
386.                     title:'子面板二',  
387.                     width : 100,  
388.                     columnWidth:.3,//指定列寬爲容器剩餘寬度的30%  
389.                     height : 100  
390.                 },  
391.                 {  
392.                     title:'子面板三',  
393.                     columnWidth:.7,//指定列寬爲容器剩餘寬度的70%  
394.                     height : 100  
395.                 }  
396.             ]  
397.   
398.   
399. layout.TableLayout佈局panel  
400.         var panel = new Ext.Panel({  
401.             title:'Ext.layout.TableLayout佈局示例',  
402.             layout : 'table',  
403.             layoutConfig : {  
404.                 columns : 4 //設置表格佈局默認列數爲4列  
405.             },  
406.             frame:true,//渲染面板  
407.             height : 150,  
408.             applyTo :'panel',  
409.             defaults : {//設置默認屬性  
410.                 bodyStyle:'background-color:#FFFFFF;',//設置面板體的背景色  
411.                 frame : true,  
412.                 height : 50  
413.             },  
414.             items: [  
415.                 {  
416.                     title:'子面板一',  
417.                     colspan : 3//設置跨列  
418.                 },  
419.                 {  
420.                     title:'子面板二',  
421.                     rowspan : 2,//設置跨行  
422.                     height : 100  
423.                 },  
424.                 {title:'子面板三'},  
425.                 {title:'子面板四'},  
426.                 {title:'子面板五'}  
427.             ]  
428.         })  
429.   
430.   
431. layout.BorderLayout佈局panel  
432.         var panel = new Ext.Panel({  
433.             title : 'Ext.layout.BorderLayout佈局示例',  
434.             layout:'border',//表格佈局  
435.             height : 250,  
436.             width : 400,  
437.             applyTo : 'panel',  
438.             items: [  
439.             {  
440.                 title: 'north Panel',  
441.                 html : '上邊',  
442.                 region: 'north',//指定子面板所在區域爲north  
443.                 height: 50  
444.             },  
445.             {  
446.                 title: 'South Panel',  
447.                 html : '下邊',  
448.                 region: 'south',//指定子面板所在區域爲south  
449.                 height: 50  
450.             },{  
451.                 title: 'West Panel',  
452.                 html : '左邊',  
453.                 region:'west',//指定子面板所在區域爲west  
454.                 width: 100  
455.             },{  
456.                 title: 'east Panel',  
457.                 html : '右邊',  
458.                 region:'east',//指定子面板所在區域爲east  
459.                 width: 100  
460.             },{  
461.                 title: 'Main Content',  
462.                 html : '中間',  
463.                 region:'center'//指定子面板所在區域爲center  
464.             }]  
465.         });  
466.   
467. Ext.Viewport佈局示例  
468.         new Ext.Viewport({  
469.             title : 'Ext.Viewport示例',  
470.             layout:'border',//表格佈局  
471.             items: [  
472.             {  
473.                 title: 'north Panel',  
474.                 html : '上邊',  
475.                 region: 'north',//指定子面板所在區域爲north  
476.                 height: 100  
477.             },{  
478.                 title: 'West Panel',  
479.                 html : '左邊',  
480.                 region:'west',//指定子面板所在區域爲west  
481.                 width: 150  
482.             },{  
483.                 title: 'Main Content',  
484.                 html : '中間',  
485.                 region:'center'//指定子面板所在區域爲center  
486.             }]  
487.         });  
488.   
489.   
490.   
491. Ext.TabPanel 標籤頁示例  
492.         var tabPanel = new Ext.TabPanel({  
493.             height : 150,  
494.             width : 300,  
495.             activeTab : 0,//默認激活第一個tab頁  
496.             animScroll : true,//使用動畫滾動效果  
497.             enableTabScroll : true,//tab標籤超寬時自動出現滾動按鈕  
498.             applyTo : 'panel',  
499.             items: [  
500.                 {title: 'tab標籤頁1',html : 'tab標籤頁1內容'},  
501.                 {title: 'tab標籤頁2',html : 'tab標籤頁2內容'},  
502.                 {title: 'tab標籤頁3',html : 'tab標籤頁3內容'},  
503.                 {title: 'tab標籤頁4',html : 'tab標籤頁4內容'},  
504.                 {title: 'tab標籤頁5',html : 'tab標籤頁5內容'}  
505.             ]  
506.         });  
507.   
508.   
509. Ext.TabPanel(轉換div)示例  
510.   
511.   <mce:script type="text/javascript"><!--  
512.     Ext.onReady(function(){  
513.         Ext.BLANK_IMAGE_URL = '../../extjs2.0/resources/images/default/s.gif';  
514.         var tabPanel = new Ext.TabPanel({  
515.             height : 50,  
516.             width : 300,  
517.             autoTabs : true,//自動掃描頁面中的div然後將其轉換爲標籤頁  
518.             deferredRender : false,//不進行延時渲染  
519.             activeTab : 0,//默認激活第一個tab頁  
520.             animScroll : true,//使用動畫滾動效果  
521.             enableTabScroll : true,//tab標籤超寬時自動出現滾動按鈕  
522.             applyTo : 'panel'  
523.         });  
524.     });  
525.     
526. // --></mce:script>  
527.  </HEAD>  
528.  <BODY>  
529.     <table width = 100%>  
530.         <tr><td> <td></tr>  
531.         <tr><td width=100></td><td>  
532.         <div id='panel'>  
533.             <div class='x-tab' title='tab標籤頁1'>tab標籤頁1內容</div>  
534.             <div class='x-tab' title='tab標籤頁2'>tab標籤頁2內容</div>  
535.             <div class='x-tab' title='tab標籤頁3'>tab標籤頁3內容</div>  
536.             <div class='x-tab' title='tab標籤頁4'>tab標籤頁4內容</div>  
537.             <div class='x-tab' title='tab標籤頁5'>tab標籤頁5內容</div>  
538.         </div>  
539.         <div class='x-tab' title='tab標籤頁6'>tab標籤頁6內容</div>  
540.         <td></tr>  
541.     </table>  
542.  </BODY>  
543. </HTML>  
544.   
545.   
546. Ext.TabPanel示例（動態添加tab頁）  
547.         var tabPanel = new Ext.TabPanel({  
548.             height : 150,  
549.             width : 300,  
550.             activeTab : 0,//默認激活第一個tab頁  
551.             animScroll : true,//使用動畫滾動效果  
552.             enableTabScroll : true,//tab標籤超寬時自動出現滾動按鈕  
553.             applyTo : 'panel',  
554.             resizeTabs : true,  
555.             tabMargin : 50,  
556.             tabWidth : 100,  
557.             items : [  
558.                 {title: 'tab標籤頁1',html : 'tab標籤頁1內容'}  
559.             ],  
560.             buttons : [  
561.                 {  
562.                     text : '添加標籤頁',  
563.                     handler : addTabPage  
564.                 }  
565.             ]  
566.         });  
567.         function addTabPage(){  
568.             var index = tabPanel.items.length + 1;  
569.             var tabPage = tabPanel.add({//動態添加tab頁  
570.                 title: 'tab標籤頁'+index,  
571.                 html : 'tab標籤頁'+index+'內容',  
572.                 closable : true//允許關閉  
573.             })  
574.             tabPanel.setActiveTab(tabPage);//設置當前tab頁  
575.         }  
576.   
577.   
578. 佈局嵌套實現表單橫排  
579.   
580.         var form = new Ext.form.FormPanel({  
581.             title:'通過佈局嵌套實現表單橫排',  
582.             labelSeparator :'：',//分隔符  
583.             labelWidth : 50,//標籤寬度  
584.             bodyStyle:'padding:5 5 5 5',//表單邊距  
585.             frame : false,  
586.             height:150,  
587.             width:250,  
588.             applyTo :'form',  
589.             items:[  
590.             {  
591.                 xtype : 'panel',  
592.                 layout : 'column',//嵌套列布局  
593.                 border : false,//不顯示邊框  
594.                 defaults : {//應用到每一個子元素上的配置  
595.                     border : false,//不顯示邊框  
596.                     layout : 'form',//在列布局中嵌套form佈局  
597.                     columnWidth : .5//列寬  
598.                 },  
599.                 items : [  
600.                     {  
601.                         labelSeparator :'：',//分隔符  
602.                         items : {  
603.                             xtype : 'radio',  
604.                             name : 'sex',//名字相同的單選框會作爲一組  
605.                             fieldLabel:'性別',  
606.                             boxLabel : '男'  
607.                         }  
608.                     },  
609.                     {  
610.                         items : {  
611.                             xtype : 'radio',  
612.                             name : 'sex',//名字相同的單選框會作爲一組  
613.                             hideLabel:true,//橫排後隱藏標籤  
614.                             boxLabel : '女'  
615.                         }  
616.                     }  
617.                 ]  
618.             },  
619.             {  
620.                 xtype : 'panel',  
621.                 layout : 'column',//嵌套列布局  
622.                 border : false,//不顯示邊框  
623.                 defaults : {//應用到每一個子元素上的配置  
624.                     border : false,//不顯示邊框  
625.                     layout : 'form',//在列布局中嵌套form佈局  
626.                     columnWidth : .5//列寬  
627.                 },  
628.                 items : [  
629.                     {  
630.                         labelSeparator :'：',//分隔符  
631.                         items : {  
632.                             xtype : 'checkbox',  
633.                             name : 'swim',  
634.                             fieldLabel:'愛好',  
635.                             boxLabel : '游泳'  
636.                         }  
637.                     },  
638.                     {  
639.                         items : {  
640.                             xtype : 'checkbox',  
641.                             name : 'walk',  
642.                             hideLabel:true,//橫排後隱藏標籤  
643.                             boxLabel : '散步'  
644.                         }  
645.                     }  
646.                 ]  
647.             }