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.             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代码   收藏代码
  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代码   收藏代码
  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>1td><td>张三td>tr>  
  32.         <tr><td>2td><td>李四td>tr>  
  33.         <tr><td>3td><td>王五td>tr>  
  34.         <tr><td>4td><td>赵六td>tr>  
  35.         <tr><td>5td><td>陈七td>tr>  
  36.         <tr><td>6td><td>杨八td>tr>  
  37.         <tr><td>7td><td>刘九td>tr>  
  38.     table>  
  39.  BODY>  
  40. HTML>  

使用html配置项自定义面板内容: 
Javascript代码   收藏代码
  1. var htmlArray = [  
  2.             '',  
  3.                 '员工列表',  
  4.                 '序号姓名',  
  5.                 '1张三',  
  6.                 '2李四',  
  7.                 '3王五',  
  8.                 '4赵六',  
  9.                 '5陈七',  
  10.                 '6杨八',  
  11.                 '7刘九',  
  12.             ''  
  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代码   收藏代码
  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="../../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>1td><td>张三td>tr>  
  44.         <tr><td>2td><td>李四td>tr>  
  45.         <tr><td>3td><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.                 width:100//指定列宽为100像素  
  16.             },{  
  17.                 title:'子面板二',  
  18.                 width: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.                 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代码   收藏代码
  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.                 width: 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.         }  

你可能感兴趣的:(EXT4)