ExtJS Panel主要配置列表

Ext.panel.Panel
屬性	值	描述
animCollapse	Boolean	設置面板折疊展開是否顯示動畫,Ext.Fx可用默認true,否則false
applyTo	Mixed	面板定位
autoDestroy	Boolean	是否自動銷毀從容器中移除組件(默認true)
autoHeight	Boolean	是否自動高度(默認false)
autoLoad	Object/String/Function	設置面板自動加載的url
autoScroll	Boolean	設置是否自動加載滾動條(默認false自動加滾動條)
autoShow	Boolean	是否移除組件的隱藏樣式(默認flase)
autoWidth	Boolean	是否自動寬度(默認false)
baseCls	String	面板的基本樣式類(默認x-panel)
bbar	Object/Array	設置面板底端工具欄,可是Ext.Toolbar,工具欄配置對象,button的數組
bodyBorder	Boolean	是否顯示面板體內部邊框(默認true，在border=true生效)
bodyStyle	String/Object/Function	應用於面板體的自定義樣式(默認null)
border	Boolean	是否顯示面板體邊框(默認true，2px)
buttonAlign	String	設置面板底部按鈕對齊方式(默認right,可為left,center)
buttons	Array	設置面板底部按鈕配置數組
collapseFirst	Boolean	該項決定展開收縮按鈕的位置(默認true)
collapsed	Boolean	設置面板在第一次渲染時是否處於收縮狀態(默認true)
collapsible	Boolean	是否允許面板展開收縮(默認false)
contentEI	String	設置面板的內容元素,可為頁面元素id，已存在的HTML節點
defaultType	String	面板中元素的默認類型(默認panel)
defaults	Object	應用到面板容器中所有元素配置對象,如:defaults:{bodyStyle:'padding:15px'}
floating	Boolean	設置面板是否可浮動(默認true,會導致面板顯示負偏移,位置要明確設置!)
footer	Boolean	設置是否創建面板底部元素(默認true)
frame	Boolean	設置是否渲染面板
header	Boolean	設置是否創建頭部(默認true)
headerAsText	Boolean	是否在面板header中顯示title(默認true)
height	Number	面板高度(默認auto)
hideBorders	Boolean	true隱藏面板中所有元素的邊框，false據組件具體配置
hideCollapseTool	Boolean	設置當collapsible為true是，是否顯示展開收縮按鈕
html	String/Object	設置面板元素內容為HTML片段或DomHelper生成內容
items	Mixed	單獨一個子組件或子組件數組
layout	String	面板布局類型(默認Ext.layout.ContainerLayout布局)
layoutConfig	Object	這個配置對象包含被選布局的配置項
maskDisabled	Boolean	設置當面板不可使用時是否遮罩面目(默認true)
shadow	Boolean/String	設置是否在面板后顯示陰影(默認true)
shadowOffset	Number	設置面板陰影偏移量(默認4)
tbar	Object/Array	設置面板頂端工具欄,可是Ext.Toolbar,工具欄配置對象,button配置對象數組,面板渲染后只能通過getTopToolbar方法訪問該工具欄
title	String	顯示在面板的頭部標題信息
titleCollapse	Boolean	設置是否允許單擊面板頭部進行展開收縮(默認false)
tools	Array	面板頭部工具按鈕配置對象數組
width	Number	面板寬度(默認auto)

/*
tools配置表: 
id String 必選 
handler Function 單擊按鈕后出發的處理函數 
scope Object 處理函數執行范圍 
qtip String/Object 為按鈕指定提示信息 
hidden Boolean 設置初次渲染是否隱藏 
on Object 為按鈕配置事件監聽 

tools配置項id對應不同按鈕 
 */
Ext.onReady(function() {
	var config = {
		title : '面板頭部(hear)',
		tbar : [ '頂端工具欄(top toolbars)' ],
		bbar : [ '底端工具欄(bottom toolbars)' ],
		height : 200,
		width : 300,
		frame : true,
		renderTo : 'panel',
		bodyStyle : 'background-color:#ffffff',
		html : '<div>面板體(body)',
		tools : [ {
			id : 'toggle '
		}, {
			id : 'close '
		}, {
			id : 'maximize '
		} ],
		buttons : [ new Ext.Button({
			text : '面板底部 (footer)'
		}) ]
	};
	new Ext.Panel(config);
});
通過面板加載內容的方式有：
1.通過autoLoad加載遠程頁面
/* 
    使用autoLoad加載遠程頁面 
 */
Ext.onReady(function() {
	var config = {
		title : '面板加載遠程頁面',
		height : 150,
		width : 250,
		frame : true,
		autoScroll : true,
		collapsible : true, // 允許展開和收縮
		applyTo : 'panel',
		autoLoad : {
			url : 'page1.html'
		}, // 自動加載面板體的鏈接
		bodyStyle : 'background-color:#ffffff'
	};

	var panel = new Ext.Panel(config);
});
2.通過contentEl加載本地資源
/* 
contentEI加載本地資源 
 */

Ext.onReady(function() {
	var config = {
		title : '面板加載本地數據',
		height : 150,
		width : 250,
		frame : true,
		collapsible : true,
		autoScroll : true,
		autoHeight : false,
		// autoHeight:true,
		renderTo : 'panel',
		contentEl : 'localElement', // 要加載的本地資源的id,contentEl中l為小寫的L!
		bodyStyle : 'background-color:#ffffff'
	};

	new Ext.Panel(config);
});

<table id='localElement'> 
        <tr> 
            <td colspan="2">遠程頁面</td> 
        </tr> 
        <tr> 
            <td width="60">編號</td> 
            <td width="80">姓名</td> 
        </tr> 
        <tr> 
            <td>編號</td> 
            <td>姓名</td> 
        </tr> 
        <tr> 
            <td>編號</td> 
            <td>姓名</td> 
        </tr> 
        <tr> 
            <td>編號</td> 
            <td>姓名</td> 
        </tr> 
        <tr> 
            <td>編號</td> 
            <td>姓名</td> 
        </tr> 
    </table>
3.通過html配置自定義面板內容
var htmlArray = [ '<table>', '<tr><td colspan="2">html配置自定義面板內容</td></tr>',
		'<tr><td width="60">編號</td><td width="80">姓名</td></tr>',
		'<tr><td>編號</td><td>姓名</td></tr>', '<tr><td>編號</td><td>姓名</td></tr>',
		'<tr><td>編號</td><td>姓名</td></tr>', '<tr><td>編號</td><td>姓名</td></tr>',
		'<tr><td>編號</td><td>姓名</td></tr>', '<tr><td>編號</td><td>姓名</td></tr>',
		'<tr><td>編號</td><td>姓名</td></tr>', '<tr><td>編號</td><td>姓名</td></tr>',
		'</table>' ];

var config = {
	title : '使用html配置自定義面板內容', // panel標題
	height : 150, // panel高
	width : 250, // panel寬
	frame : true, // 渲染
	collapsible : true, // 允許展開收縮
	autoScroll : true, // 允許顯示滾動條
	autoHeight : false, // 使用固定高度
	// autoHeight:true, //自適應高度
	renderTo : 'panel', // 定位
	html : htmlArray.join(''), // panel中顯示的自定義html代碼
	bodyStyle : 'background-color:#ffffff' // panel背景色
};

var panel = new Ext.Panel(config);
4.通過items配置在面板中添加組件
/* 
使用items配置在面板中添加組件 
 */

/*使用items配置添加單一組件實例*/
Ext.onReady(function() {
	var config = {
		headler : true, // 面板頭部
		title : '日歷', // 面板標題
		frame : true, // 渲染
		collapsible : true, // 允許伸展收縮
		autoHeight : true, // 允許自動高度
		width : 189, // 面板固寬度
		renderTo : 'panel', // 面板定位
		items : new Ext.DatePicker()
	// 向面板中添加一日期組件
	};

	var panel = new Ext.Panel(config);
});

/* 使用items配置添加多個組件實例 */
Ext.onReady(function() {
	var config = {
		headler : true,
		title : '使用items配置添加多個組件',
		frame : true,
		height : 200,
		width : 250,
		renderTo : 'panel',
		// 設置所有面板的默認屬性
		defaults : {
			bodyStyle : 'background-color:#ffffff', // 背景色
			height : 80, // 面板固定高度
			collapsible : true, // 允許伸展收縮
			autoScroll : true
		// 自動顯示滾動條
		},
		// 面板元素數組
		items : [
		// 嵌套面板一
		new Ext.Panel({
			title : '嵌套面板一',
			contentEl : 'localElement' // 加載本地數據
		}), new Ext.Panel({
			title : '嵌套面板而',
			autoLoad : 'page1.html' // 加載遠程頁面(失敗)
		}) ]
	};

	var panel = new Ext.Panel(config);
});