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

[TOC]
###面板控件panel应用
```js
		new Ext.Panel({
			title:'面板头部（header）',
			tbar : ['顶端工具栏(top toolbars)'],
			bbar : ['底端工具栏(bottom toolbars)'],
			height:200,
			width:300,
			frame:true,
			applyTo :'panel',
			bodyStyle:'background-color:#FFFFFF',
			html:'<div>面板体（body）</div>',
			tools : [
				{id:'toggle'},
				{id:'close'},
				{id:'maximize'}
			],
			buttons:[
				new Ext.Button({
					text:'面板底部（footer）'
				})
			]
		})
```

### 面板panel加载远程页面
```js
		var panel = new Ext.Panel({
			title:'面板加载远程页面',
			height:150,//设置面板的高度
			width:250,//设置面板的宽度
			frame:true,//渲染面板
			autoScroll : true,//自动显示滚动条
			collapsible : true,//允许展开和收缩
			applyTo :'panel',
			autoLoad :'page1.html',//自动加载面板体的默认连接
			bodyStyle:'background-color:#FFFFFF'//设置面板体的背景色
		})
```
### 面板panel加载本地页面
```js
		var panel = new Ext.Panel({
			title:'面板加载本地资源',
			height:150,//设置面板的高度
			width:250,//设置面板的宽度
			frame:true,//渲染面板
			collapsible : true,//允许展开和收缩
			autoScroll : true,//自动显示滚动条
			autoHeight  : false,//使用固定高度
			//autoHeight  : true,//使用自动高度
			applyTo :'panel',
			contentEl :'localElement',//加载本地资源
			bodyStyle:'background-color:#FFFFFF'//设置面板体的背景色
		})
         本地资源
	<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>
```

### 使用html配置项定义面板panel内容
```js
		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>'
					  ];
		var panel = new Ext.Panel({
			title:'使用html配置项自定义面板内容',
			height:150,//设置面板的高度
			width:250,//设置面板的宽度
			frame:true,//渲染面板
			collapsible : true,//允许展开和收缩
			autoScroll : true,//自动显示滚动条
			applyTo :'panel',
			html:htmlArray.join(''),
			bodyStyle:'background-color:#FFFFFF'//设置面板体的背景色
		})
```

### 使用items添加panel内容
```js
		var panel = new Ext.Panel({
			header : true,
			title:'日历',
			frame:true,//渲染面板
			collapsible : true,//允许展开和收缩
			autoHeight : true,//自动高度
			width : 189,//固定宽度
			applyTo :'panel',
			items: new Ext.DatePicker()//向面板中添加一个日期组件
		})
```

### 面板panel嵌套的使用
```js
		var panel = new Ext.Panel({
			header : true,
			title:'使用items进行面板嵌套',
			frame:true,//渲染面板
			collapsible : true,//允许展开和收缩
			height : 200,
			width : 250,
			applyTo :'panel',
			defaults : {//设置默认属性
				bodyStyle:'background-color:#FFFFFF',//设置面板体的背景色
				height : 80,//子面板高度为80
				collapsible : true,//允许展开和收缩
				autoScroll : true//自动显示滚动条
			},
			items: [
				new Ext.Panel({
					title : '嵌套面板一',
					contentEl : 'localElement'//加载本地资源
				}),
				new Ext.Panel({
					title : '嵌套面板二',
					autoLoad : 'page1.html'//加载远程页面
				})
			]
		})
```

### FitLayout布局panel
```js
		var panel = new Ext.Panel({
			layout : 'fit',
			title:'Ext.layout.FitLayout布局示例',
			frame:true,//渲染面板
			height : 150,
			width : 250,
			applyTo :'panel',
			defaults : {//设置默认属性
				bodyStyle:'background-color:#FFFFFF'//设置面板体的背景色
			},
			//面板items配置项默认的xtype类型为panel，
			//该默认值可以通过defaultType配置项进行更改
			items: [
				{
					title : '嵌套面板一',
					html : '面板一'
				},
				{
					title : '嵌套面板二',
					html : '面板二'
				}
			]
		})
```

### layout.Accordion布局panel
```js
		var panel = new Ext.Panel({
			layout : 'accordion',
			layoutConfig : {
				activeOnTop : true,//设置打开的子面板置顶
				fill : true,//子面板充满父面板的剩余空间
				hideCollapseTool: false,//显示“展开收缩”按钮
				titleCollapse : true,//允许通过点击子面板的标题来展开或收缩面板
				animate:true//使用动画效果
			},
			title:'Ext.layout.Accordion布局示例',
			frame:true,//渲染面板
			height : 150,
			width : 250,
			applyTo :'panel',
			defaults : {//设置默认属性
				bodyStyle:'background-color:#FFFFFF;padding:15px'//设置面板体的背景色
			},
			items: [
				{
					title : '嵌套面板一',
					html : '说明一'
				},
				{
					title : '嵌套面板二',
					html : '说明二'
				}
				,
				{
					title : '嵌套面板三',
					html : '说明三'
				}
			]
		})
```

### layout.CardLayout布局panel
```js
		var panel = new Ext.Panel({
			layout : 'card',
			activeItem : 0,//设置默认显示第一个子面板
			title:'Ext.layout.CardLayout布局示例',
			frame:true,//渲染面板
			height : 150,
			width : 250,
			applyTo :'panel',
			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);
		}
```

### layout.AnchorLayout布局panel
```js
		var panel = new Ext.Panel({
			layout : 'anchor',
			title:'Ext.layout.AnchorLayout布局示例',
			frame:false,//渲染面板
			height : 150,
			width : 300,
			applyTo :'panel',
			defaults : {//设置默认属性
				bodyStyle:'background-color:#FFFFFF;padding:15px'//设置面板体的背景色
			},
			items: [
				{
					anchor : '50% 50%',//设置子面板的宽高为父面板的50%
					title : '子面板'
				}
			]
		})
       或者：
                        items: [
				{
					anchor : '-10 -10',//设置子面板的宽高偏移父面板10像素
					title : '子面板'
				}
			]

或者：
			items: [
				{
					anchor : 'r b',//相对于父容器的右边和底边的差值进行定位
					width : 200,
					height : 100,
					title : '子面板'
				}
			]

或者：
			items: [
				{
					x : '10%',//横坐标为距父容器宽度10%的位置
					y : 10,//纵坐标为距父容器上边缘10像素的位置
					width : 100,
					height : 50,
					title : '子面板一'
				},
				{
					x : 90,//横坐标为距父容器左边缘90像素的位置
					y : 70,//纵坐标为距父容器上边缘70像素的位置
					width : 100,
					height : 50,
					title : '子面板二'
				}
			]
```

### layout.FormLayout布局panel
```js
		var panel = new Ext.Panel({
			title:'Ext.layout.FormLayout布局示例',
			layout : 'form',
			labelSeparator : '：',//在容器中指定分隔符
			frame:true,//渲染面板
			height : 110,
			width : 300,
			applyTo :'panel',
			defaultType: 'textfield',//指定容器子元素默认的xtype类型为textfield
			defaults : {//设置默认属性
				msgTarget: 'side'//指定默认的错误信息提示方式
			},
			items: [
				{
					fieldLabel:'用户名',
					allowBlank : false
				},
				{
					fieldLabel:'密码',
					allowBlank : false
				}
			]
		})
```

### layout.ColumnLayout布局panel
```js
		var panel = new Ext.Panel({
			title:'Ext.layout.ColumnLayout布局示例',
			layout : 'column',
			frame:true,//渲染面板
			height : 150,
			width : 250,
			applyTo :'panel',
			defaults : {//设置默认属性
				bodyStyle:'background-color:#FFFFFF;',//设置面板体的背景色
				frame : true
			},
			items: [
				{
					title:'子面板一',
					width:100,//指定列宽为100像素
					height : 100
				},
				{
					title:'子面板二',
					width:100,//指定列宽为100像素
					height : 100
				}
			]
		})

或者：
			items: [
				{
					title:'子面板一',
					columnWidth:.3,//指定列宽为容器宽度的30%
					height : 100
				},
				{
					title:'子面板二',
					columnWidth:.7,//指定列宽为容器宽度的70%
					height : 100
				}
			]

或者：
			items: [
				{
					title:'子面板一',
					width : 100,//指定列宽为100像素
					height : 100
				},
				{
					title:'子面板二',
					width : 100,
					columnWidth:.3,//指定列宽为容器剩余宽度的30%
					height : 100
				},
				{
					title:'子面板三',
					columnWidth:.7,//指定列宽为容器剩余宽度的70%
					height : 100
				}
			]
```

### layout.TableLayout布局panel
```js
		var panel = new Ext.Panel({
			title:'Ext.layout.TableLayout布局示例',
			layout : 'table',
			layoutConfig : {
				columns : 4 //设置表格布局默认列数为4列
			},
			frame:true,//渲染面板
			height : 150,
			applyTo :'panel',
			defaults : {//设置默认属性
				bodyStyle:'background-color:#FFFFFF;',//设置面板体的背景色
				frame : true,
				height : 50
			},
			items: [
				{
					title:'子面板一',
					colspan : 3//设置跨列
				},
				{
					title:'子面板二',
					rowspan : 2,//设置跨行
					height : 100
				},
				{title:'子面板三'},
				{title:'子面板四'},
				{title:'子面板五'}
			]
		})
```

### layout.BorderLayout布局panel
```js
		var panel = new Ext.Panel({
			title : 'Ext.layout.BorderLayout布局示例',
			layout:'border',//表格布局
			height : 250,
			width : 400,
			applyTo : 'panel',
			items: [
			{
				title: 'north Panel',
				html : '上边',
				region: 'north',//指定子面板所在区域为north
				height: 50
			},
			{
				title: 'South Panel',
				html : '下边',
				region: 'south',//指定子面板所在区域为south
				height: 50
			},{
				title: 'West Panel',
				html : '左边',
				region:'west',//指定子面板所在区域为west
				width: 100
			},{
				title: 'east Panel',
				html : '右边',
				region:'east',//指定子面板所在区域为east
				width: 100
			},{
				title: 'Main Content',
				html : '中间',
				region:'center'//指定子面板所在区域为center
			}]
		});
```

### Ext.Viewport布局示例
```js
		new Ext.Viewport({
			title : 'Ext.Viewport示例',
			layout:'border',//表格布局
			items: [
			{
				title: 'north Panel',
				html : '上边',
				region: 'north',//指定子面板所在区域为north
				height: 100
			},{
				title: 'West Panel',
				html : '左边',
				region:'west',//指定子面板所在区域为west
				width: 150
			},{
				title: 'Main Content',
				html : '中间',
				region:'center'//指定子面板所在区域为center
			}]
		});
```

### Ext.TabPanel 标签页示例
```js
		var tabPanel = new Ext.TabPanel({
			height : 150,
			width : 300,
			activeTab : 0,//默认激活第一个tab页
			animScroll : true,//使用动画滚动效果
			enableTabScroll : true,//tab标签超宽时自动出现滚动按钮
			applyTo : 'panel',
			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.TabPanel(转换div)示例
```js
  <mce:script type="text/javascript"></mce:script>
 </HEAD>
 <BODY>
	<table width = 100%>
		<tr><td> <td></tr>
		<tr><td width=100></td><td>
		<div id='panel'>
			<div class='x-tab' title='tab标签页1'>tab标签页1内容</div>
			<div class='x-tab' title='tab标签页2'>tab标签页2内容</div>
			<div class='x-tab' title='tab标签页3'>tab标签页3内容</div>
			<div class='x-tab' title='tab标签页4'>tab标签页4内容</div>
			<div class='x-tab' title='tab标签页5'>tab标签页5内容</div>
		</div>
		<div class='x-tab' title='tab标签页6'>tab标签页6内容</div>
		<td></tr>
	</table>
 </BODY>
</HTML>
```

### Ext.TabPanel示例（动态添加tab页）
```js
		var tabPanel = new Ext.TabPanel({
			height : 150,
			width : 300,
			activeTab : 0,//默认激活第一个tab页
			animScroll : true,//使用动画滚动效果
			enableTabScroll : true,//tab标签超宽时自动出现滚动按钮
			applyTo : 'panel',
			resizeTabs : true,
			tabMargin : 50,
			tabWidth : 100,
			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页
		}
```

### 布局嵌套实现表单横排
```js
		var form = new Ext.form.FormPanel({
			title:'通过布局嵌套实现表单横排',
			labelSeparator :'：',//分隔符
			labelWidth : 50,//标签宽度
			bodyStyle:'padding:5 5 5 5',//表单边距
			frame : false,
			height:150,
			width:250,
			applyTo :'form',
			items:[
			{
				xtype : 'panel',
				layout : 'column',//嵌套列布局
				border : false,//不显示边框
				defaults : {//应用到每一个子元素上的配置
					border : false,//不显示边框
					layout : 'form',//在列布局中嵌套form布局
					columnWidth : .5//列宽
				},
				items : [
					{
						labelSeparator :'：',//分隔符
						items : {
							xtype : 'radio',
							name : 'sex',//名字相同的单选框会作为一组
							fieldLabel:'性别',
							boxLabel : '男'
						}
					},
					{
						items : {
							xtype : 'radio',
							name : 'sex',//名字相同的单选框会作为一组
							hideLabel:true,//横排后隐藏标签
							boxLabel : '女'
						}
					}
				]
			},
			{
				xtype : 'panel',
				layout : 'column',//嵌套列布局
				border : false,//不显示边框
				defaults : {//应用到每一个子元素上的配置
					border : false,//不显示边框
					layout : 'form',//在列布局中嵌套form布局
					columnWidth : .5//列宽
				},
				items : [
					{
						labelSeparator :'：',//分隔符
						items : {
							xtype : 'checkbox',
							name : 'swim',
							fieldLabel:'爱好',
							boxLabel : '游泳'
						}
					},
					{
						items : {
							xtype : 'checkbox',
							name : 'walk',
							hideLabel:true,//横排后隐藏标签
							boxLabel : '散步'
						}
					}
				]
			}
			]
		})

```

Information

官方订阅号

分类

About This Entry

About This Blog

最近发布

Friend Links