zoukankan      html  css  js  c++  java

  • ExtJS4学习笔记五－－面板使用

    标准面板： 

    Javascript代码  收藏代码
    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.             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代码  收藏代码
    1. Ext.create('Ext.panel.Panel',{  
    2.             title:'面板加载远程页面',  
    3.             height:150,//设置面板的高度  
    4.             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代码  收藏代码
    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="http://www.cnblogs.com/ext-4.0/resources/css/ext-all.css" />  
    6.   <script type="text/javascript" src="http://www.cnblogs.com/ext-4.0/bootstrap.js"></script>  
    7.   <script type="text/javascript" src="http://www.cnblogs.com/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.             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代码  收藏代码
    1. var htmlArray = [  
    2.             '<table border=1>',  
    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.             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代码  收藏代码
    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代码  收藏代码
    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="http://www.cnblogs.com/ext-4.0/resources/css/ext-all.css" />  
    6.   <script type="text/javascript" src="http://www.cnblogs.com/ext-4.0/bootstrap.js"></script>  
    7.   <script type="text/javascript" src="http://www.cnblogs.com/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代码  收藏代码
    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代码  收藏代码
    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代码  收藏代码
    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代码  收藏代码
    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代码  收藏代码
    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代码  收藏代码
    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代码  收藏代码
    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代码  收藏代码
    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代码  收藏代码
    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.                 100//指定列宽为100像素  
    16.             },{  
    17.                 title:'子面板二',  
    18.                 100//指定列宽为100像素  
    19.             }]  
    20.         });  


    使用百分比指定列宽: 

    Javascript代码  收藏代码
    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.             },{  
    18.                 title:'子面板二',  
    19.                 columnWidth:.7//指定列宽为容器宽度的70%  
    20.             }]  
    21.         });  


    固定值与百分比结合使用: 

    Javascript代码  收藏代码
    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代码  收藏代码
    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代码  收藏代码
    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.                  100  
    26.             },{  
    27.                 title: 'east Panel',  
    28.                 frameHeader : true,  
    29.                 frame : false,  
    30.                 html : '右边',  
    31.                 region:'east',//指定子面板所在区域为east  
    32.                  100  
    33.             },{  
    34.                 title: 'Main Content',  
    35.                 html : '中间',  
    36.                 region:'center'//指定子面板所在区域为center  
    37.             }]  
    38.         });  


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

    Javascript代码  收藏代码
    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代码  收藏代码
    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.                  150  
    13.             },{  
    14.                 title: 'Main Content',  
    15.                 html : '中间',  
    16.                 region:'center'//指定子面板所在区域为center  
    17.             }]  
    18.         });  


    Ext.tab.Panel示例: 

    Javascript代码  收藏代码
    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代码  收藏代码
      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.         }  
  • 相关阅读:
    h5 喜帖
    h5 录音
    UglifyJS-- 对你的js做了什么
    SimpleCaptcha生成图片验证码内容为乱码
    Spring.profiles多环境配置最佳实践
    eclipse maven 导出项目依赖的jar包
    cygwin下切换到其他磁盘
    chrome 浏览器的插件权限有多大？
    windows系统tomcat日志输出至catalina.out配置说明
    Windows10远程报错:由于CredSSP加密Oracle修正
  • 原文地址：https://www.cnblogs.com/zhaoxd/p/3049239.html
Copyright © 2011-2022 走看看