ExtJS4学习笔记五－－面板使用标准面板：Ext.create(Ext.panel.Panel,{title:面板头部（header）,tbar : [
ExtJS4学习笔记五－－面板使用
标准面板：
Ext.create('Ext.panel.Panel',{title:'面板头部（header）',tbar : ['顶端工具栏(top toolbars)'],bbar : ['底端工具栏(bottom toolbars)'],height:200,collapsible : true,collapseDirection : 'left',width:300,frame:true,renderTo: Ext.getBody(),bodyPadding: 5,bodyStyle:'background-color:#FFFFFF',html:'面板体（body）',tools : [{id:'toggle'},{id:'close'},{id:'maximize'}],buttons:[{text:'面板底部（footer）'}]});面板加载远程页面：
Ext.create('Ext.panel.Panel',{title:'面板加载远程页面',height:150,//设置面板的高度width:250,//设置面板的宽度frame:true,//渲染面板autoScroll : true,//自动显示滚动条collapsible : true,//允许展开和收缩renderTo: Ext.getBody(),bodyPadding: 5,autoLoad :'page1.html',//自动加载面板体的默认连接bodyStyle:'background-color:#FFFFFF'//设置面板体的背景色});面板加载本地资源：
<HTML> <HEAD> <TITLE>面板加载本地资源</TITLE> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <link rel="stylesheet" type="text/css" href="../../ext-4.0/resources/css/ext-all.css" /> <script type="text/javascript" src="../../ext-4.0/bootstrap.js"></script> <script type="text/javascript" src="../../ext-4.0/locale/ext-lang-zh_CN.js"></script> <script type="text/javascript">Ext.onReady(function(){Ext.create('Ext.panel.Panel',{title:'面板加载本地资源',height:150,//设置面板的高度width:250,//设置面板的宽度frame:true,//渲染面板collapsible : true,//允许展开和收缩autoScroll : true,//自动显示滚动条renderTo: Ext.getBody(),bodyPadding: 5,contentEl :'localElement',//加载本地资源bodyStyle:'background-color:#FFFFFF'//设置面板体的背景色});}); </script> </HEAD> <BODY STYLE="margin: 10px"><table border=1 id='localElement'><tr><th colspan=2>本地资源---员工列表</th></tr><tr><th width = 60>序号</th><th width = 80>姓名</th><tr><tr><td>1</td><td>张三</td></tr><tr><td>2</td><td>李四</td></tr><tr><td>3</td><td>王五</td></tr><tr><td>4</td><td>赵六</td></tr><tr><td>5</td><td>陈七</td></tr><tr><td>6</td><td>杨八</td></tr><tr><td>7</td><td>刘九</td></tr></table> </BODY></HTML>使用html配置项自定义面板内容：
var htmlArray = ['<table border=1>','<tr><td colspan=2>员工列表</td></tr>','<tr><th width = 60>序号</th><th width = 80>姓名</th><tr>','<tr><td>1</td><td>张三</td></tr>','<tr><td>2</td><td>李四</td></tr>','<tr><td>3</td><td>王五</td></tr>','<tr><td>4</td><td>赵六</td></tr>','<tr><td>5</td><td>陈七</td></tr>','<tr><td>6</td><td>杨八</td></tr>','<tr><td>7</td><td>刘九</td></tr>','</table>' ];Ext.create('Ext.panel.Panel',{title:'使用html配置项自定义面板内容',height:150,//设置面板的高度width:250,//设置面板的宽度frame:true,//渲染面板collapsible : true,//允许展开和收缩autoScroll : true,//自动显示滚动条renderTo: Ext.getBody(),bodyPadding: 5,html:htmlArray.join(''),bodyStyle:'background-color:#FFFFFF'//设置面板体的背景色});使用items配置项添加单一组件示例：
Ext.create('Ext.panel.Panel',{title:'日历',frame:true,//渲染面板collapsible : true,//允许展开和收缩renderTo: Ext.getBody(),width : 200,bodyPadding: 5, items: [{//向面板中添加一个日期组件 xtype: 'datepicker', minDate: new Date() }]});使用items配置项添加多个组件示例：
<HTML> <HEAD> <TITLE>使用items配置项添加多个组件示例</TITLE> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <link rel="stylesheet" type="text/css" href="../../ext-4.0/resources/css/ext-all.css" /> <script type="text/javascript" src="../../ext-4.0/bootstrap.js"></script> <script type="text/javascript" src="../../ext-4.0/locale/ext-lang-zh_CN.js"></script> <script type="text/javascript">Ext.onReady(function(){Ext.create('Ext.panel.Panel',{title:'使用items进行面板嵌套',frame:true,//渲染面板collapsible : true,//允许展开和收缩height : 200,width : 250,renderTo: Ext.getBody(),bodyPadding: 5,layout : 'vbox',defaults : {//设置默认属性bodyStyle:'background-color:#FFFFFF',//设置面板体的背景色collapsible : true,//允许展开和收缩width : 230,autoScroll : true//自动显示滚动条},items: [{title : '嵌套面板一',height : 80,//子面板高度为80contentEl : 'localElement'//加载本地资源},{title : '嵌套面板二',autoLoad : 'page1.html'//加载远程页面}]});}); </script> </HEAD> <BODY STYLE="margin: 10px"><table border=1 id='localElement'><tr><th colspan=2>本地资源---员工列表</th></tr><tr><th width = 60>序号</th><th width = 80>姓名</th><tr><tr><td>1</td><td>张三</td></tr><tr><td>2</td><td>李四</td></tr><tr><td>3</td><td>王五</td></tr></table> </BODY></HTML>Ext.layout.container.Auto布局示例：
Ext.create('Ext.panel.Panel',{title:'Ext.layout.container.Auto布局示例',frame:true,//渲染面板width : 250,renderTo: Ext.getBody(),bodyPadding: 5,layout : 'auto',//自动布局defaults : {//设置默认属性bodyStyle:'background-color:#FFFFFF'//设置面板体的背景色},//面板items配置项默认的xtype类型为panel，//该默认值可以通过defaultType配置项进行更改items: [{title : '嵌套面板一',html : '面板一'},{title : '嵌套面板二',html : '面板二'}]});Ext.layout.container.Fit布局示例：
Ext.create('Ext.panel.Panel',{layout : 'fit',title:'Ext.layout.container.Fit布局示例',frame:true,//渲染面板height : 150,width : 250,renderTo: Ext.getBody(),defaults : {//设置默认属性bodyStyle:'background-color:#FFFFFF'//设置面板体的背景色},//面板items配置项默认的xtype类型为panel，//该默认值可以通过defaultType配置项进行更改items: [{title : '嵌套面板一',html : '面板一'},{title : '嵌套面板二',html : '面板二'}]})Ext.layout.container.Accordion布局示例：
Ext.create('Ext.panel.Panel',{layout:'accordion',title:'Ext.layout.container.Accordion布局示例',frame:true,//渲染面板height : 150,width : 250,renderTo: Ext.getBody(),bodyPadding: 5,defaults : {//设置默认属性bodyStyle:'background-color:#FFFFFF;padding:15px'//设置面板体的背景色},items: [{title : '嵌套面板一',html : '说明一'},{title : '嵌套面板二',html : '说明二'},{title : '嵌套面板三',html : '说明三'}]});Ext.layout.CardLayout布局示例:
var panel = Ext.create('Ext.panel.Panel',{layout : 'card',activeItem : 0,//设置默认显示第一个子面板title:'Ext.layout.container.Card布局示例',frame:true,//渲染面板height : 150,width : 250,renderTo: Ext.getBody(),bodyPadding: 5,defaults : {//设置默认属性bodyStyle:'background-color:#FFFFFF;padding:15px'//设置面板体的背景色},items: [{title : '嵌套面板一',html : '说明一',id : 'p1'},{title : '嵌套面板二',html : '说明二',id : 'p2'},{title : '嵌套面板三',html : '说明三',id : 'p3'}],buttons:[{text : '上一页',handler : changePage},{text : '下一页',handler : changePage}]});//切换子面板function changePage(btn){var index = Number(panel.layout.activeItem.id.substring(1));if(btn.text == '上一页'){index -= 1;if(index < 1){index = 1;}}else{index += 1;if(index > 3){index = 3;}}panel.layout.setActiveItem('p'+index);}百分比（Percentage）定位示例:
Ext.create('Ext.panel.Panel',{layout : 'anchor',title:'Ext.layout.container.Anchor布局示例',frame:false,//渲染面板height : 150,width : 300,renderTo: Ext.getBody(),defaults : {//设置默认属性bodyStyle:'background-color:#FFFFFF;padding:15px'//设置面板体的背景色},items: [{anchor : '50% 50%',//设置子面板的宽高为父面板的50%title : '子面板'}]});偏移值（Offsets）定位:
Ext.create('Ext.panel.Panel',{layout : 'anchor',title:'Ext.layout.container.Anchor布局示例',frame:false,//渲染面板height : 150,width : 300,renderTo: Ext.getBody(),defaults : {//设置默认属性bodyStyle:'background-color:#FFFFFF;padding:15px'//设置面板体的背景色},items: [{anchor : '-10 -10',//设置子面板的宽高偏移父面板10像素title : '子面板'}]});参考边（Sides）定位:
Ext.create('Ext.panel.Panel',{layout : 'anchor',title:'Ext.layout.container.Anchor布局示例',autoScroll : true,//自动显示滚动条frame:false,//渲染面板height : 150,width : 300,renderTo: Ext.getBody(),defaults : {//设置默认属性bodyStyle:'background-color:#FFFFFF;padding:15px'//设置面板体的背景色},items: [{anchor : 'r b',//相对于父容器的右边和底边的差值进行定位width : 200,height : 100,title : '子面板'}]});Ext.layout.container.Absolute布局示例:
Ext.create('Ext.panel.Panel',{layout : 'absolute',title:'Ext.layout.container.Absolute布局示例',frame:false,//渲染面板height : 150,width : 300,renderTo: Ext.getBody(),defaults : {//设置默认属性frame : true,height : 70,width : 100,bodyStyle:'background-color:#FFFFFF;padding:15px'//设置面板体的背景色},items: [{x : 10,//横坐标为距父容器左边缘90像素的位置y : 10,//纵坐标为距父容器上边缘10像素的位置html : '子面板一',title : '子面板一'},{x : 130,//横坐标为距父容器左边缘130像素的位置y : 40,//纵坐标为距父容器上边缘40像素的位置html : '子面板二',title : '子面板二'}]});指定固定列宽示例:
Ext.create('Ext.panel.Panel',{title:'Ext.layout.container.Column布局示例',layout : 'column',frame:true,//渲染面板height : 150,width : 250,renderTo: Ext.getBody(),defaults : {//设置默认属性bodyStyle:'background-color:#FFFFFF;',//设置面板体的背景色height : 100,frame : true},items: [{title:'子面板一',width:100//指定列宽为100像素},{title:'子面板二',width:100//指定列宽为100像素}]});使用百分比指定列宽:
Ext.create('Ext.panel.Panel',{title:'Ext.layout.container.Column布局示例',layout : 'column',frame:true,//渲染面板height : 150,width : 250,renderTo: Ext.getBody(),defaults : {//设置默认属性bodyStyle:'background-color:#FFFFFF;',//设置面板体的背景色height : 100,frame : true},items: [{title:'子面板一',columnWidth:.3//指定列宽为容器宽度的30%},{title:'子面板二',columnWidth:.7//指定列宽为容器宽度的70%}]});固定值与百分比结合使用:
Ext.create('Ext.panel.Panel',{title:'Ext.layout.container.Column布局示例',layout : 'column',frame:true,//渲染面板height : 150,width : 350,renderTo: Ext.getBody(),defaults : {//设置默认属性bodyStyle:'background-color:#FFFFFF;',//设置面板体的背景色height : 100,frame : true},items: [{title:'子面板一',width : 100//指定列宽为100像素},{title:'子面板二',columnWidth:.3//指定列宽为容器剩余宽度的30%},{title:'子面板三',columnWidth:.7//指定列宽为容器剩余宽度的70%}]});Ext.layout.container.Table布局示例:
Ext.create('Ext.panel.Panel',{title:'Ext.layout.container.Table布局示例',layout : {type : 'table',//表格布局columns : 4 //设置表格布局默认列数为4列},frame:true,//渲染面板height : 150,width : 210,renderTo: Ext.getBody(),defaults : {//设置默认属性bodyStyle:'background-color:#FFFFFF;',//设置面板体的背景色frame : true,width : 50,height : 50},items: [{title:'子面板一',width : 150,colspan : 3//设置跨列},{title:'子面板二',rowspan : 2,//设置跨行height : 100},{title:'子面板三'},{title:'子面板四'},{title:'子面板五'}]});Ext.layout.container.Border布局示例:
Ext.create('Ext.panel.Panel',{title : 'Ext.layout.container.Border布局示例',layout:'border',//边框布局height : 250,width : 400,frame : true,renderTo: Ext.getBody(),defaults : {//设置默认属性collapsible : true},items: [{title: 'north Panel',html : '上边',region: 'north',//指定子面板所在区域为northheight: 50},{title: 'South Panel',html : '下边',region: 'south',//指定子面板所在区域为southheight: 50},{title: 'West Panel',html : '左边',region:'west',//指定子面板所在区域为westwidth: 100},{title: 'east Panel',frameHeader : true,frame : false,html : '右边',region:'east',//指定子面板所在区域为eastwidth: 100},{title: 'Main Content',html : '中间',region:'center'//指定子面板所在区域为center}]});Ext.layout.container.HBox布局示例:
Ext.create('Ext.panel.Panel',{title : 'Ext.layout.container.HBox布局示例',layout:{type : 'hbox',//水平盒布局align : 'stretch'//子面板高度充满父容器},height : 150,width : 300,frame : true,renderTo: Ext.getBody(),items: [{title: '子面板一',flex : 1,html : '1/4宽(flex=1)'},{title: '子面板二',flex : 1,html : '1/4宽(flex=1)'},{title: '子面板三',flex : 2,html : '1/2宽(flex=2)'}]});Ext.container.Viewport示例:
Ext.create('Ext.container.Viewport',{layout:'border',//表格布局items: [{title: 'north Panel',html : '上边',region: 'north',//指定子面板所在区域为northheight: 100},{title: 'West Panel',html : '左边',region:'west',//指定子面板所在区域为westwidth: 150},{title: 'Main Content',html : '中间',region:'center'//指定子面板所在区域为center}]});Ext.tab.Panel示例:
Ext.create('Ext.tab.Panel',{title : 'Ext.tab.Panel示例',frame : true,height : 150,width : 300,activeTab : 1,//默认激活第一个tab页renderTo: Ext.getBody(),items: [{title: 'tab标签页1',html : 'tab标签页1内容'},{title: 'tab标签页2',html : 'tab标签页2内容'},{title: 'tab标签页3',html : 'tab标签页3内容'},{title: 'tab标签页4',html : 'tab标签页4内容'},{title: 'tab标签页5',html : 'tab标签页5内容'}]});Ext.tab.Panel示例（动态添加tab页）:
var tabPanel = Ext.create('Ext.tab.Panel',{title : 'Ext.tab.Panel示例（动态添加tab页）示例',frame : true,height : 150,width : 300,activeTab : 0,//默认激活第一个tab页renderTo: Ext.getBody(),items : [{title: 'tab标签页1',html : 'tab标签页1内容'}],buttons : [{text : '添加标签页',handler : addTabPage}]});function addTabPage(){var index = tabPanel.items.length + 1;var tabPage = tabPanel.add({//动态添加tab页title: 'tab标签页'+index,html : 'tab标签页'+index+'内容',closable : true//允许关闭})tabPanel.setActiveTab(tabPage);//设置当前tab页} 1 楼 SHUIMOMO 2011-12-15 请问，我在form panel中连续放了几个button，这几个按钮之间几乎一点间距空隙也没有。用表格布局也不行，有什么办法解决吗？
您遇到过么……