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是否有个大概的了解呢？