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);
});