EXTJS布局示例（panel，Viewport，TabPanel）

EXTJS布局示例（panel，Viewport，TabPanel）

[javascript]  view plain copy

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.             }  
648.             ]  
649.         })