/*

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

});