天天看點
傳回

ExtJS4學習筆記五－－面闆使用

标準面闆： 

Javascript代碼  

ExtJS4學習筆記五－－面闆使用
  1. Ext.create('Ext.panel.Panel',{  
  2.             title:'面闆頭部（header）',  
  3.             tbar : ['頂端工具欄(top toolbars)'],  
  4.             bbar : ['底端工具欄(bottom toolbars)'],  
  5.             height:200,  
  6.             collapsible : true,  
  7.             collapseDirection : 'left',  
  8.             width:300,  
  9.             frame:true,  
  10.             renderTo: Ext.getBody(),  
  11.             bodyPadding: 5,  
  12.             bodyStyle:'background-color:#FFFFFF',  
  13.             html:'面闆體（body）',  
  14.             tools : [  
  15.                 {id:'toggle'},  
  16.                 {id:'close'},  
  17.                 {id:'maximize'}  
  18.             ],  
  19.             buttons:[{  
  20.                 text:'面闆底部（footer）'  
  21.             }]  
  22.         });  

面闆加載遠端頁面： 

Javascript代碼  

ExtJS4學習筆記五－－面闆使用
  1. Ext.create('Ext.panel.Panel',{  
  2.             title:'面闆加載遠端頁面',  
  3.             height:150,//設定面闆的高度  
  4.             width:250,//設定面闆的寬度  
  5.             frame:true,//渲染面闆  
  6.             autoScroll : true,//自動顯示滾動條  
  7.             collapsible : true,//允許展開和收縮  
  8.             renderTo: Ext.getBody(),  
  9.             bodyPadding: 5,  
  10.             autoLoad :'page1.html',//自動加載面闆體的預設連接配接  
  11.             bodyStyle:'background-color:#FFFFFF'//設定面闆體的背景色  
  12.         });  

面闆加載本地資源： 

Html代碼  

ExtJS4學習筆記五－－面闆使用
  1. <HTML>  
  2.  <HEAD>  
  3.   <TITLE>面闆加載本地資源</TITLE>  
  4.   <meta http-equiv="Content-Type" content="text/html; charset=utf-8">  
  5.   <link rel="stylesheet" type="text/css" href="../../ext-4.0/resources/css/ext-all.css" />  
  6.   <script type="text/javascript" src="../../ext-4.0/bootstrap.js"></script>  
  7.   <script type="text/javascript" src="../../ext-4.0/locale/ext-lang-zh_CN.js"></script>  
  8.   <script type="text/javascript">  
  9.     Ext.onReady(function(){  
  10.         Ext.create('Ext.panel.Panel',{  
  11.             title:'面闆加載本地資源',  
  12.             height:150,//設定面闆的高度  
  13.             width:250,//設定面闆的寬度  
  14.             frame:true,//渲染面闆  
  15.             collapsible : true,//允許展開和收縮  
  16.             autoScroll : true,//自動顯示滾動條  
  17.             renderTo: Ext.getBody(),  
  18.             bodyPadding: 5,  
  19.             contentEl :'localElement',//加載本地資源  
  20.             bodyStyle:'background-color:#FFFFFF'//設定面闆體的背景色  
  21.         });  
  22.     });  
  23.   </script>  
  24.  </HEAD>  
  25.  <BODY STYLE="margin: 10px">  
  26.     <table border=1 id='localElement'>  
  27.         <tr><th colspan=2>本地資源---員工清單</th></tr>  
  28.         <tr>  
  29.             <th width = 60>序号</th><th width = 80>姓名</th>  
  30.         <tr>  
  31.         <tr><td>1</td><td>張三</td></tr>  
  32.         <tr><td>2</td><td>李四</td></tr>  
  33.         <tr><td>3</td><td>王五</td></tr>  
  34.         <tr><td>4</td><td>趙六</td></tr>  
  35.         <tr><td>5</td><td>陳七</td></tr>  
  36.         <tr><td>6</td><td>楊八</td></tr>  
  37.         <tr><td>7</td><td>劉九</td></tr>  
  38.     </table>  
  39.  </BODY>  
  40. </HTML>  

使用html配置項自定義面闆内容： 

Javascript代碼  

ExtJS4學習筆記五－－面闆使用
  1. var htmlArray = [  
  2.             '<table ,  
  3.                 '<tr><td colspan=2>員工清單</td></tr>',  
  4.                 '<tr><th width = 60>序号</th><th width = 80>姓名</th><tr>',  
  5.                 '<tr><td>1</td><td>張三</td></tr>',  
  6.                 '<tr><td>2</td><td>李四</td></tr>',  
  7.                 '<tr><td>3</td><td>王五</td></tr>',  
  8.                 '<tr><td>4</td><td>趙六</td></tr>',  
  9.                 '<tr><td>5</td><td>陳七</td></tr>',  
  10.                 '<tr><td>6</td><td>楊八</td></tr>',  
  11.                 '<tr><td>7</td><td>劉九</td></tr>',  
  12.             '</table>'  
  13.           ];  
  14.         Ext.create('Ext.panel.Panel',{  
  15.             title:'使用html配置項自定義面闆内容',  
  16.             height:150,//設定面闆的高度  
  17.             width:250,//設定面闆的寬度  
  18.             frame:true,//渲染面闆  
  19.             collapsible : true,//允許展開和收縮  
  20.             autoScroll : true,//自動顯示滾動條  
  21.             renderTo: Ext.getBody(),  
  22.             bodyPadding: 5,  
  23.             html:htmlArray.join(''),  
  24.             bodyStyle:'background-color:#FFFFFF'//設定面闆體的背景色  
  25.         });  

使用items配置項添加單一元件示例： 

Javascript代碼  

ExtJS4學習筆記五－－面闆使用
  1. Ext.create('Ext.panel.Panel',{  
  2.             title:'月曆',  
  3.             frame:true,//渲染面闆  
  4.             collapsible : true,//允許展開和收縮  
  5.             renderTo: Ext.getBody(),  
  6.             width : 200,  
  7.             bodyPadding: 5,  
  8.             items: [{//向面闆中添加一個日期元件  
  9.                 xtype: 'datepicker',  
  10.                 minDate: new Date()  
  11.             }]  
  12.         });  

使用items配置項添加多個元件示例： 

Html代碼  

ExtJS4學習筆記五－－面闆使用
  1. <HTML>  
  2.  <HEAD>  
  3.   <TITLE>使用items配置項添加多個元件示例</TITLE>  
  4.   <meta http-equiv="Content-Type" content="text/html; charset=utf-8">  
  5.   <link rel="stylesheet" type="text/css" href="../../ext-4.0/resources/css/ext-all.css" />  
  6.   <script type="text/javascript" src="../../ext-4.0/bootstrap.js"></script>  
  7.   <script type="text/javascript" src="../../ext-4.0/locale/ext-lang-zh_CN.js"></script>  
  8.   <script type="text/javascript">  
  9.     Ext.onReady(function(){  
  10.         Ext.create('Ext.panel.Panel',{  
  11.             title:'使用items進行面闆嵌套',  
  12.             frame:true,//渲染面闆  
  13.             collapsible : true,//允許展開和收縮  
  14.             height : 200,  
  15.             width : 250,  
  16.             renderTo: Ext.getBody(),  
  17.             bodyPadding: 5,  
  18.             layout : 'vbox',  
  19.             defaults : {//設定預設屬性  
  20.                 bodyStyle:'background-color:#FFFFFF',//設定面闆體的背景色  
  21.                 collapsible : true,//允許展開和收縮  
  22.                 width : 230,  
  23.                 autoScroll : true//自動顯示滾動條  
  24.             },  
  25.             items: [{  
  26.                 title : '嵌套面闆一',  
  27.                 height : 80,//子面闆高度為80  
  28.                 contentEl : 'localElement'//加載本地資源  
  29.             },{  
  30.                 title : '嵌套面闆二',  
  31.                 autoLoad : 'page1.html'//加載遠端頁面  
  32.             }]  
  33.         });  
  34.     });  
  35.   </script>  
  36.  </HEAD>  
  37.  <BODY STYLE="margin: 10px">  
  38.     <table border=1 id='localElement'>  
  39.         <tr><th colspan=2>本地資源---員工清單</th></tr>  
  40.         <tr>  
  41.             <th width = 60>序号</th><th width = 80>姓名</th>  
  42.         <tr>  
  43.         <tr><td>1</td><td>張三</td></tr>  
  44.         <tr><td>2</td><td>李四</td></tr>  
  45.         <tr><td>3</td><td>王五</td></tr>  
  46.     </table>  
  47.  </BODY>  
  48. </HTML>  

Ext.layout.container.Auto布局示例： 

Javascript代碼  

ExtJS4學習筆記五－－面闆使用
  1. Ext.create('Ext.panel.Panel',{  
  2.             title:'Ext.layout.container.Auto布局示例',  
  3.             frame:true,//渲染面闆  
  4.             width : 250,  
  5.             renderTo: Ext.getBody(),  
  6.             bodyPadding: 5,  
  7.             layout : 'auto',//自動布局  
  8.             defaults : {//設定預設屬性  
  9.                 bodyStyle:'background-color:#FFFFFF'//設定面闆體的背景色  
  10.             },  
  11.             //面闆items配置項預設的xtype類型為panel，  
  12.             //該預設值可以通過defaultType配置項進行更改  
  13.             items: [{  
  14.                 title : '嵌套面闆一',  
  15.                 html : '面闆一'  
  16.             },{  
  17.                 title : '嵌套面闆二',  
  18.                 html : '面闆二'  
  19.             }]  
  20.         });  

Ext.layout.container.Fit布局示例： 

Javascript代碼  

ExtJS4學習筆記五－－面闆使用
  1. Ext.create('Ext.panel.Panel',{  
  2.             layout : 'fit',  
  3.             title:'Ext.layout.container.Fit布局示例',  
  4.             frame:true,//渲染面闆  
  5.             height : 150,  
  6.             width : 250,  
  7.             renderTo: Ext.getBody(),  
  8.             defaults : {//設定預設屬性  
  9.                 bodyStyle:'background-color:#FFFFFF'//設定面闆體的背景色  
  10.             },  
  11.             //面闆items配置項預設的xtype類型為panel，  
  12.             //該預設值可以通過defaultType配置項進行更改  
  13.             items: [{  
  14.                 title : '嵌套面闆一',  
  15.                 html : '面闆一'  
  16.             },{  
  17.                 title : '嵌套面闆二',  
  18.                 html : '面闆二'  
  19.             }]  
  20.         })  

Ext.layout.container.Accordion布局示例： 

Javascript代碼  

ExtJS4學習筆記五－－面闆使用
  1. Ext.create('Ext.panel.Panel',{  
  2.             layout:'accordion',  
  3.             title:'Ext.layout.container.Accordion布局示例',  
  4.             frame:true,//渲染面闆  
  5.             height : 150,  
  6.             width : 250,  
  7.             renderTo: Ext.getBody(),  
  8.             bodyPadding: 5,  
  9.             defaults : {//設定預設屬性  
  10.                 bodyStyle:'background-color:#FFFFFF;padding:15px'//設定面闆體的背景色  
  11.             },  
  12.             items: [{  
  13.                 title : '嵌套面闆一',  
  14.                 html : '說明一'  
  15.             },{  
  16.                 title : '嵌套面闆二',  
  17.                 html : '說明二'  
  18.             },{  
  19.                 title : '嵌套面闆三',  
  20.                 html : '說明三'  
  21.             }]  
  22.         });  

Ext.layout.CardLayout布局示例: 

Javascript代碼  

ExtJS4學習筆記五－－面闆使用
  1. var panel = Ext.create('Ext.panel.Panel',{  
  2.             layout : 'card',  
  3.             activeItem : 0,//設定預設顯示第一個子面闆  
  4.             title:'Ext.layout.container.Card布局示例',  
  5.             frame:true,//渲染面闆  
  6.             height : 150,  
  7.             width : 250,  
  8.             renderTo: Ext.getBody(),  
  9.             bodyPadding: 5,  
  10.             defaults : {//設定預設屬性  
  11.                 bodyStyle:'background-color:#FFFFFF;padding:15px'//設定面闆體的背景色  
  12.             },  
  13.             items: [{  
  14.                 title : '嵌套面闆一',  
  15.                 html : '說明一',  
  16.                 id : 'p1'  
  17.             },{  
  18.                 title : '嵌套面闆二',  
  19.                 html : '說明二',  
  20.                 id : 'p2'  
  21.             },{  
  22.                 title : '嵌套面闆三',  
  23.                 html : '說明三',  
  24.                 id : 'p3'  
  25.             }],  
  26.             buttons:[{  
  27.                 text : '上一頁',  
  28.                 handler : changePage  
  29.             },{  
  30.                 text : '下一頁',  
  31.                 handler : changePage  
  32.             }]  
  33.         });  
  34.         //切換子面闆  
  35.         function changePage(btn){  
  36.             var index = Number(panel.layout.activeItem.id.substring(1));  
  37.             if(btn.text == '上一頁'){  
  38.                 index -= 1;  
  39.                 if(index < 1){  
  40.                     index = 1;  
  41.                 }  
  42.             }else{  
  43.                 index += 1;  
  44.                 if(index > 3){  
  45.                     index = 3;  
  46.                 }  
  47.             }  
  48.             panel.layout.setActiveItem('p'+index);  
  49.         }  

百分比（Percentage）定位示例: 

Javascript代碼  

ExtJS4學習筆記五－－面闆使用
  1. Ext.create('Ext.panel.Panel',{  
  2.             layout : 'anchor',  
  3.             title:'Ext.layout.container.Anchor布局示例',  
  4.             frame:false,//渲染面闆  
  5.             height : 150,  
  6.             width : 300,  
  7.             renderTo: Ext.getBody(),  
  8.             defaults : {//設定預設屬性  
  9.                 bodyStyle:'background-color:#FFFFFF;padding:15px'//設定面闆體的背景色  
  10.             },  
  11.             items: [{  
  12.                 anchor : '50% 50%',//設定子面闆的寬高為父面闆的50%  
  13.                 title : '子面闆'  
  14.             }]  
  15.         });  

偏移值（Offsets）定位: 

Javascript代碼  

ExtJS4學習筆記五－－面闆使用
  1. Ext.create('Ext.panel.Panel',{  
  2.             layout : 'anchor',  
  3.             title:'Ext.layout.container.Anchor布局示例',  
  4.             frame:false,//渲染面闆  
  5.             height : 150,  
  6.             width : 300,  
  7.             renderTo: Ext.getBody(),  
  8.             defaults : {//設定預設屬性  
  9.                 bodyStyle:'background-color:#FFFFFF;padding:15px'//設定面闆體的背景色  
  10.             },  
  11.             items: [{  
  12.                 anchor : '-10 -10',//設定子面闆的寬高偏移父面闆10像素  
  13.                 title : '子面闆'  
  14.             }]  
  15.         });  

參考邊（Sides）定位: 

Javascript代碼  

ExtJS4學習筆記五－－面闆使用
  1. Ext.create('Ext.panel.Panel',{  
  2.             layout : 'anchor',  
  3.             title:'Ext.layout.container.Anchor布局示例',  
  4.             autoScroll : true,//自動顯示滾動條  
  5.             frame:false,//渲染面闆  
  6.             height : 150,  
  7.             width : 300,  
  8.             renderTo: Ext.getBody(),  
  9.             defaults : {//設定預設屬性  
  10.                 bodyStyle:'background-color:#FFFFFF;padding:15px'//設定面闆體的背景色  
  11.             },  
  12.             items: [{  
  13.                 anchor : 'r b',//相對于父容器的右邊和底邊的內插補點進行定位  
  14.                 width : 200,  
  15.                 height : 100,  
  16.                 title : '子面闆'  
  17.             }]  
  18.         });  

Ext.layout.container.Absolute布局示例: 

Javascript代碼  

ExtJS4學習筆記五－－面闆使用
  1. Ext.create('Ext.panel.Panel',{  
  2.             layout : 'absolute',  
  3.             title:'Ext.layout.container.Absolute布局示例',  
  4.             frame:false,//渲染面闆  
  5.             height : 150,  
  6.             width : 300,  
  7.             renderTo: Ext.getBody(),  
  8.             defaults : {//設定預設屬性  
  9.                 frame : true,  
  10.                 height : 70,  
  11.                 width : 100,  
  12.                 bodyStyle:'background-color:#FFFFFF;padding:15px'//設定面闆體的背景色  
  13.             },  
  14.             items: [{  
  15.                 x : 10,//橫坐标為距父容器左邊緣90像素的位置  
  16.                 y : 10,//縱坐标為距父容器上邊緣10像素的位置  
  17.                 html : '子面闆一',  
  18.                 title : '子面闆一'  
  19.             },{  
  20.                 x : 130,//橫坐标為距父容器左邊緣130像素的位置  
  21.                 y : 40,//縱坐标為距父容器上邊緣40像素的位置  
  22.                 html : '子面闆二',  
  23.                 title : '子面闆二'  
  24.             }]  
  25.         });  

指定固定列寬示例: 

Javascript代碼  

ExtJS4學習筆記五－－面闆使用
  1. Ext.create('Ext.panel.Panel',{  
  2.             title:'Ext.layout.container.Column布局示例',  
  3.             layout : 'column',  
  4.             frame:true,//渲染面闆  
  5.             height : 150,  
  6.             width : 250,  
  7.             renderTo: Ext.getBody(),  
  8.             defaults : {//設定預設屬性  
  9.                 bodyStyle:'background-color:#FFFFFF;',//設定面闆體的背景色  
  10.                 height : 100,  
  11.                 frame : true  
  12.             },  
  13.             items: [{  
  14.                 title:'子面闆一',  
  15.                 width:100//指定列寬為100像素  
  16.             },{  
  17.                 title:'子面闆二',  
  18.                 width:100//指定列寬為100像素  
  19.             }]  
  20.         });  

使用百分比指定列寬: 

Javascript代碼  

ExtJS4學習筆記五－－面闆使用
  1. Ext.create('Ext.panel.Panel',{  
  2.             title:'Ext.layout.container.Column布局示例',  
  3.             layout : 'column',  
  4.             frame:true,//渲染面闆  
  5.             height : 150,  
  6.             width : 250,  
  7.             renderTo: Ext.getBody(),  
  8.             defaults : {//設定預設屬性  
  9.                 bodyStyle:'background-color:#FFFFFF;',//設定面闆體的背景色  
  10.                 height : 100,  
  11.                 frame : true  
  12.             },  
  13.             items: [{  
  14.                 title:'子面闆一',  
  15.                 columnWidth:.3//指定列寬為容器寬度的30%  
  16.             },{  
  17.                 title:'子面闆二',  
  18.                 columnWidth:.7//指定列寬為容器寬度的70%  
  19.             }]  
  20.         });  

固定值與百分比結合使用: 

Javascript代碼  

ExtJS4學習筆記五－－面闆使用
  1. Ext.create('Ext.panel.Panel',{  
  2.             title:'Ext.layout.container.Column布局示例',  
  3.             layout : 'column',  
  4.             frame:true,//渲染面闆  
  5.             height : 150,  
  6.             width : 350,  
  7.             renderTo: Ext.getBody(),  
  8.             defaults : {//設定預設屬性  
  9.                 bodyStyle:'background-color:#FFFFFF;',//設定面闆體的背景色  
  10.                 height : 100,  
  11.                 frame : true  
  12.             },  
  13.             items: [{  
  14.                 title:'子面闆一',  
  15.                 width : 100//指定列寬為100像素  
  16.             },{  
  17.                 title:'子面闆二',  
  18.                 columnWidth:.3//指定列寬為容器剩餘寬度的30%  
  19.             },{  
  20.                 title:'子面闆三',  
  21.                 columnWidth:.7//指定列寬為容器剩餘寬度的70%  
  22.             }]  
  23.         });  

Ext.layout.container.Table布局示例: 

Javascript代碼  

ExtJS4學習筆記五－－面闆使用
  1. Ext.create('Ext.panel.Panel',{  
  2.             title:'Ext.layout.container.Table布局示例',  
  3.             layout : {  
  4.                 type : 'table',//表格布局  
  5.                 columns : 4 //設定表格布局預設列數為4列  
  6.             },  
  7.             frame:true,//渲染面闆  
  8.             height : 150,  
  9.             width : 210,  
  10.             renderTo: Ext.getBody(),  
  11.             defaults : {//設定預設屬性  
  12.                 bodyStyle:'background-color:#FFFFFF;',//設定面闆體的背景色  
  13.                 frame : true,  
  14.                 width : 50,  
  15.                 height : 50  
  16.             },  
  17.             items: [{  
  18.                 title:'子面闆一',  
  19.                 width : 150,  
  20.                 colspan : 3//設定跨列  
  21.             },{  
  22.                 title:'子面闆二',  
  23.                 rowspan : 2,//設定跨行  
  24.                 height : 100  
  25.             },  
  26.             {title:'子面闆三'},  
  27.             {title:'子面闆四'},  
  28.             {title:'子面闆五'}]  
  29.         });  

Ext.layout.container.Border布局示例: 

Javascript代碼  

ExtJS4學習筆記五－－面闆使用
  1. Ext.create('Ext.panel.Panel',{  
  2.             title : 'Ext.layout.container.Border布局示例',  
  3.             layout:'border',//邊框布局  
  4.             height : 250,  
  5.             width : 400,  
  6.             frame : true,  
  7.             renderTo: Ext.getBody(),  
  8.             defaults : {//設定預設屬性  
  9.                 collapsible : true  
  10.             },  
  11.             items: [{  
  12.                 title: 'north Panel',  
  13.                 html : '上邊',  
  14.                 region: 'north',//指定子面闆所在區域為north  
  15.                 height: 50  
  16.             },{  
  17.                 title: 'South Panel',  
  18.                 html : '下邊',  
  19.                 region: 'south',//指定子面闆所在區域為south  
  20.                 height: 50  
  21.             },{  
  22.                 title: 'West Panel',  
  23.                 html : '左邊',  
  24.                 region:'west',//指定子面闆所在區域為west  
  25.                 width: 100  
  26.             },{  
  27.                 title: 'east Panel',  
  28.                 frameHeader : true,  
  29.                 frame : false,  
  30.                 html : '右邊',  
  31.                 region:'east',//指定子面闆所在區域為east  
  32.                 width: 100  
  33.             },{  
  34.                 title: 'Main Content',  
  35.                 html : '中間',  
  36.                 region:'center'//指定子面闆所在區域為center  
  37.             }]  
  38.         });  

Ext.layout.container.HBox布局示例: 

Javascript代碼  

ExtJS4學習筆記五－－面闆使用
  1. Ext.create('Ext.panel.Panel',{  
  2.             title : 'Ext.layout.container.HBox布局示例',  
  3.             layout:{  
  4.                 type : 'hbox',//水準盒布局  
  5.                 align : 'stretch'//子面闆高度充滿父容器  
  6.             },  
  7.             height : 150,  
  8.             width : 300,  
  9.             frame : true,  
  10.             renderTo: Ext.getBody(),  
  11.             items: [{  
  12.                 title: '子面闆一',  
  13.                 flex : 1,  
  14.                 html : '1/4寬(flex=1)'  
  15.             },{  
  16.                 title: '子面闆二',  
  17.                 flex : 1,  
  18.                 html : '1/4寬(flex=1)'  
  19.             },{  
  20.                 title: '子面闆三',  
  21.                 flex : 2,  
  22.                 html : '1/2寬(flex=2)'  
  23.             }]  
  24.         });  

Ext.container.Viewport示例: 

Javascript代碼  

ExtJS4學習筆記五－－面闆使用
  1. Ext.create('Ext.container.Viewport',{  
  2.             layout:'border',//表格布局  
  3.             items: [{  
  4.                 title: 'north Panel',  
  5.                 html : '上邊',  
  6.                 region: 'north',//指定子面闆所在區域為north  
  7.                 height: 100  
  8.             },{  
  9.                 title: 'West Panel',  
  10.                 html : '左邊',  
  11.                 region:'west',//指定子面闆所在區域為west  
  12.                 width: 150  
  13.             },{  
  14.                 title: 'Main Content',  
  15.                 html : '中間',  
  16.                 region:'center'//指定子面闆所在區域為center  
  17.             }]  
  18.         });  

Ext.tab.Panel示例: 

Javascript代碼  

ExtJS4學習筆記五－－面闆使用
  1. Ext.create('Ext.tab.Panel',{  
  2.             title : 'Ext.tab.Panel示例',  
  3.             frame : true,  
  4.             height : 150,  
  5.             width : 300,  
  6.             activeTab : 1,//預設激活第一個tab頁  
  7.             renderTo: Ext.getBody(),  
  8.             items: [  
  9.                 {title: 'tab标簽頁1',html : 'tab标簽頁1内容'},  
  10.                 {title: 'tab标簽頁2',html : 'tab标簽頁2内容'},  
  11.                 {title: 'tab标簽頁3',html : 'tab标簽頁3内容'},  
  12.                 {title: 'tab标簽頁4',html : 'tab标簽頁4内容'},  
  13.                 {title: 'tab标簽頁5',html : 'tab标簽頁5内容'}  
  14.             ]  
  15.         });  

Ext.tab.Panel示例（動态添加tab頁）: 

Javascript代碼  

ExtJS4學習筆記五－－面闆使用
  1. var tabPanel = Ext.create('Ext.tab.Panel',{  
  2.             title : 'Ext.tab.Panel示例（動态添加tab頁）示例',  
  3.             frame : true,  
  4.             height : 150,  
  5.             width : 300,  
  6.             activeTab : 0,//預設激活第一個tab頁  
  7.             renderTo: Ext.getBody(),  
  8.             items : [{  
  9.                 title: 'tab标簽頁1',  
  10.                 html : 'tab标簽頁1内容'  
  11.             }],  
  12.             buttons : [{  
  13.                 text : '添加标簽頁',  
  14.                 handler : addTabPage  
  15.             }]  
  16.         });  
  17.         function addTabPage(){  
  18.             var index = tabPanel.items.length + 1;  
  19.             var tabPage = tabPanel.add({//動态添加tab頁  
  20.                 title: 'tab标簽頁'+index,  
  21.                 html : 'tab标簽頁'+index+'内容',  
  22.                 closable : true//允許關閉  
  23.             })  
  24.             tabPanel.setActiveTab(tabPage);//設定目前tab頁  
  25.         }  
ext4 extjs javascript html layout autoload flex
上一篇: 使用高德地圖，點選位置定位，可搜尋，帶周邊搜尋點選可選，氣泡事件
下一篇: extjs4下datefield+timefield組成datetimefield

繼續閱讀