ExtJS学习之路第五步：认识最常见组件Panel
文档中描述
Panel(面板)是一个容器，它具有特定的功能和结构部件，这使它成为面向应用用户界面的完美基石。
面板，继承自Ext.container.Container,能够配置布局以及子组件(Child Components)。
当向Panel中添加指定的子项(Child Items)或者动态的添加组件时，记得要考虑如何排版Panel中的子元素，这些子元素是否需要Ext内建Layout布局的方案。默认情况下，Panel使用自动(Auto)布局。这种方式，只是呈现子组件，一个接一个向Container容器中追加，并且不能适用于任意大小。
Panel可以包含底部和顶部的工具栏，以及独立的页眉，页脚和正文部分。Panel还提供了内置可折叠、可扩展和可关闭的行为。Panel能够很容易的添加到Container或Layout。布局和渲染管线完全由框架管制。
注意：默认情况下，关闭页眉工具破坏了Panel，导致移动Panel和所有子组件的破坏。这使得Panel对象和它的所有后代元素无法使用。要启动关闭工具(close tool)简单的隐藏面板，供以后再次使用，配置面板closeAction:'hide'。
通常情况下，在应用中，Panel被用来作为Container的子项，并且自己使用Ext.Components作为子项。
基本用法
为了简单的说明如何把Panel渲染到文档中，我们这样做。
//配置参数(只列举部分常用参数)
1.autoLoad：有效的url字符串，把那个url中的body中的数据加载显示，但是可能没有样式和js控制，只是html数据
2.autoScroll:设为true则内容溢出的时候产生滚动条，默认为false
3.autoShow:设为true显示设为"x-hidden"的元素，很有必要，默认为false
4.bbar:底部条，显示在主体内，//代码：bbar:[{text:'底部工具栏bottomToolbar'}],
5.tbar:顶部条，显示在主体内，//代码:tbar:[{text:'顶部工具栏topToolbar'}],tbar,lbar,rbar,bbar:分别设置上、左、右、下四个部位的工具栏
6.buttons:按钮集合，自动添加到footer中（footer参数，显示在主体外）//代码：buttons:[{text:"按钮位于footer"}]
7.buttonAlign:footer中按钮的位置，枚举值为："left","right","center",默认为right
8.collapsible：设为true，显示右上角的收缩按钮，默认为false
9.draggable:true则可拖动，但需要你提供操作过程，默认为false
10.html:主体的内容
11.id：id值，通过id可以找到这个组件，建议一般加上这个id值
12.width：宽度
13.height：高度
14.title:标题
15.item:主体部分组件如何
16.titleCollapse：设为true，则点击标题栏的任何地方都能收缩，默认为false.
18.contentEl：（id）组件渲染之后，将该元素添加到内部。
19.renderTo：（id）在该元素里渲染组件html元素里面
例子：
<div id="conPanel">测试contentEl</div> <div id="addPanel">测试renderTo</div>
Ext.onReady(function(){ Ext.create('Ext.panel.Panel',{ title:'目标', width:200, height:300, html:'<p>好好学习，天天向上！</p>', contentEl:"conPanel", renderTo:Ext.get("addPanel") //常用的还有Ext.getBody() }); });
效果：
xtype
xtype：在EXTJS的可视化组件部署中的一种机制，即通过指定xtype的值，来告诉容量如何初始化所包含的级件，如xtype:"textfiled",表示使用Ext.form.TextFile来进行初始化当前组件。
Ext.create('Ext.panel.Panel',{
bodyPadding: "15px 10px 0 10px", //距离边框的距离
title:'目标',
width:300,
height:300,
html:'<p>好好学习，天天向上！</p>',
items: [{
xtype: 'datefield',
fieldLabel: '起始日期'
}, {
xtype: 'datefield',
fieldLabel: '结束日期'
}], //子项
contentEl:"conPanel",
renderTo:Ext.get("addPanel") //常用的还有Ext.getBody()
});
chrome截图代码
添加按钮栏
var myPanel=Ext.create('Ext.panel.Panel',{ bodyPadding: "15px 10px 0 10px", //距离边框的距离 title:'目标', width:300, height:220, html:'<p>好好学习，天天向上！</p>', bodyStyle:'background:pink;color:white',//添加style tbar:[ { xtype: 'button', text: '测试1',handler:function(){ Ext.MessageBox.alert(myPanel.title,"测试1"); } } ], bbar:[ { xtype: 'button', text: '测试2',handler:function(){ Ext.MessageBox.alert(myPanel.title,"测试2"); } } ], /* dockedItems: [{ xtype: 'toolbar', dock: 'top', buttonAlign:'right', items: [ { xtype: 'button', text: 'Top 1',handler:function(){//content}}, { xtype: 'button', text: 'Top 2' } ] }, { xtype: 'toolbar', dock: 'bottom', items: [ { xtype: 'button', text: 'Bottom 1' }, { xtype: 'button', text: 'Bottom 2' } ] }], 上面按钮的写法也可以这样来*/ items: [{ xtype: 'datefield', fieldLabel: '起始日期' }, { xtype: 'datefield', fieldLabel: '结束日期' }], //子项 contentEl:"conPanel", renderTo:Ext.get("addPanel") //常用的还有Ext.getBody() });
对Panel是否有个大概的了解呢？
