ExtJs學習系列(2)--Ext.Panel

//html代碼
<div id="container">
    </div>

//js代碼
var p = new Ext.Panel({
        title: 'My Panel',//標題
        collapsible:true,//右上角上的那個收縮按鈕，設爲false則不顯示
        renderTo: 'container',//這個panel顯示在html中id爲container的層中
        width:400,
        height:200,
        html: "<p>我是內容，我包含的html可以被執行！</p>"//panel主體中的內容，可以執行html代碼
    });

因爲panel組件的子類組件包括TabPanel,GridPanel,FormPanel,TreePanel組件，所以非常有必要介紹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'}],
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：高度
13.title:標題

14.titleCollapse：設爲true，則點擊標題欄的任何地方都能收縮，默認爲false.

15.applyTo：（id）呈現在哪個html元素裏面
16.contentEl：（id）呈現哪個html元素裏面，把el內的內容呈現
17.renderTo：（id）呈現在哪個html元素裏面

1.可拖動的panel實例

//下面創建一個允許拖動的panel，但是拖動的結果不能保存
var p=new Ext.Panel({
    title: 'Drag me',
    x: 100,
    y: 100,
    renderTo: Ext.getBody(),//x,y,renderTo:Ext.getBody()初始化panel的位置
    floating: true,//true
    frame: true,//圓角邊框
    width: 400,
    height: 200,
    draggable:true
}).show();//在這裏也可以不show（）

但是還不能拖到其他的地方，我們需要改寫draggable：

draggable: {
        insertProxy: false,//拖動時不虛線顯示原始位置

        onDrag : function(e){
            var pel = this.proxy.getEl();
            this.x = pel.getLeft(true);
            this.y = pel.getTop(true);//獲取拖動時panel的座標
        },

        endDrag : function(e){
            this.panel.setPosition(this.x, this.y);//移動到最終位置
        }
    }

實現了可保存的拖動，如圖：

拖動的時候陰影還在原位置，我們再在draggable中的onDrag事件中添加代碼：

 

var s = this.panel.getEl().shadow;
            if (s) {
                s.realign(this.x, this.y, pel.getWidth(), pel.getHeight());
            }
//shadow的realign方法的四個參數，改變shadow的位置大小屬性

var p=new Ext.Panel({
    title: 'Drag me',
    x: 100,
    y: 100,
    renderTo: Ext.getBody(),
    floating: true,
    frame: true,
    width: 400,
    height: 200,
    draggable: {
        insertProxy: false,

        onDrag : function(e){
            var pel = this.proxy.getEl();
            this.x = pel.getLeft(true);
            this.y = pel.getTop(true);

            var s = this.panel.getEl().shadow;
            if (s) {
                s.realign(this.x, this.y, pel.getWidth(), pel.getHeight());
            }
        },
        endDrag : function(e){
            this.panel.setPosition(this.x, this.y);
        }
    }
})2.帶頂部，底部，腳部工具欄的panel

var p=new Ext.Panel({
   id:"panel1",
        title:"標題",
        collapsible:true,
        renderTo:"container",
        closable:true,
        width:400,
        height:300,
        tbar:[{text:"按鈕1"},{text:"按鈕2"}], //頂部工具欄
        bbar:[{text:"按鈕1"},{text:"按鈕2"}],  //底部工具欄
        html:"內容",
        buttons:[{text:"按鈕1"},{text:"按鈕2"}] //footer部工具欄
   });

我們已經在各種工具欄上添加了按鈕，但是卻沒有激發事件，下面我們來添加按鈕事件代碼：

tbar:[{text:"按鈕1",handler:function(){Ext.MessageBox.alert("我是按鈕1","我是通過按鈕1激發出來的彈出框！")}},{text:"按鈕2"}],
//改寫tbar，添加handler句柄，點擊頂部工具欄上按鈕1，彈出提示框，效果圖大家想象下，就不貼出來了

當然，一般情況下，我們只要一個工具欄，這裏只是爲了演示！
3.panel工具欄

//添加下面的代碼到panel配置參數中
tools:[{id:"save"},{id:"help"},{id:"up"},{id:"close",handler:function(){Ext.MessageBox.alert("工具欄按鈕","工具欄上的關閉按鈕時間被激發了")}}],
//id控制按鈕，handler控制相應的事件
//id的枚舉值爲：
toggle (collapsable爲true時的默認值)
close
minimize
maximize
restore
gear
pin
unpin
right
left
up
down
refresh
minus
plus
help
search
save
print

來源:http://www.cnblogs.com/qianxudetianxia/archive/2008/06/27/1230805.html