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