Ext的Panel總結（好文章）

我剛才禁不住**去看了一下ext.window的api文件，發現只是比panel多了點什麼最大化、最小化、關閉、置前、置後、動畫引發目標設定、可調整大小這些功能。像什麼標題欄、工具欄之類的東西在ext.panel早就封裝好了。搞定了ext.panel終於可以悶聲發大財羅。哈哈哈。

這一文主要總結一下，panel的常見用法。

一、使panel的標題欄隱藏

這是常有的事，常常，乙個欄目並不需要標題。有什麼辦法呢，建立時config中加上：header:false。就ok了。

二、如何使panel能被拖動

確保config中如下設定：

var config1=

},enddrag : function(e)

},html:'這是面板的內容！！！',

layout:'fit',

collapsible:true};

好了，關鍵就是上面紅色部分了，由前面的文件可知：ext.panel.dd這個類只是提供移動proxy元素的效果，滑鼠一鬆，panel仍在老地方，所以得寫**實現。關於ext.panel.dd，這個類是非公開的，我在源**中也沒有找到。不曉得放在哪。最後，我只得開啟firefox+firebug才看到它裡面的東西。

為什麼一定要floating:true呢？原因很簡單，要能拖動，那麼這個div就是absolute的，而乙個panel.el預設不會是absolute。所以非得設成floating，以讓它能浮動。

三、如何有panel能摺疊、展開效果。

這個很簡單，panel在title tools中提供乙個toggle的工具，就是用它幹這事的，不過，預設情況下，panel的這個功能是被關閉的。panel還提供乙個功能，單擊title的任意一處都會產生toggle collapse效果。相關的config屬性我提出來如下：

animcollapse : boolean

collapsefirst : boolean

collapsed : boolean

collapsedcls : string

collapsible : boolean　　//事實上，把它設成true就ok了，其它幾個可以不設定。

titlecollapse : boolean

關於它們的使用說明請參見前面的api文件。不過，單看名字應當就曉得用了，取名很直觀。

四、怎樣為panel設定title tools。

就是怎樣為panel的標題欄新增按鈕，這個容器，在config中類似如下**即可：

tools:[}],

格式一般是：tools:[,,]

五、怎樣顯示、隱藏panel

這個很容易,panel.show()/hide()就行了。但是，如果floating:true的話，那就麻煩了，show都顯示不了，我在firebug中一看，panel.el.dom.style.left="-10000px"。這當然是顯示不出來的。所以，你show了還要setposition一下。這才行了。

六、為panel新增子元件

簡單，在config中加items屬性，類似於如下**：

items:,

格式一般是：items:[,,]

如果在定義時，沒有設定xtype，則子元件建立是xtype取defaulttype的值。像上面，由於window建立後是不顯示的，所以，只得show出來。所以，我在定義時給它乙個id。這樣在ext.onready()中就可以：ext.getcmp("win1").show()。嘿，就出來了。其他元件的加入類似。乙個{}是乙個元件。

像上面那樣的叫惰性呈現，還有一種寫法是：items:[new ***(config)]。這樣的定義會在元件建立時直接呈現。

七、為panel設定布局

這個是關鍵了。就是要設layout、layoutconfig。這個要詳細的講一下。平常要用嘛。這兒用borderlayout的文件上的**為例：

layout:'border',

items: [,,],

其實，布局類的api介面很簡單，使用也不複雜。果然是把swing的那一套學過來了。

ext.layout.borderlayout是乙個比較特殊的布局類，它沒有什麼正兒八經的config，不像panel它們。只需設一下layout，然後，在成員元件那兒用region標明是哪個區域就是了。ext.layout.borderlayout把一塊地盤分成五個區：east、west、south、north、center。

八、怎樣使得panel能被改變大小

var resizer = new ext.resizable("element-id", );

由上可知，它的功能是為乙個指定的元素提供可改變大小的功能。這個功能不出奇吧。怎麼把它用於panel。嘿，其實就乙個關鍵，怎樣取得x-panel所在元素的id。這個好辦，事實上，這件事我曾在ext.panel篇一中就論述了。二種方法：panel.el或者panel.getel()都一樣。

因此，**應當這麼寫：

var resizer=new ext.resizable(panel1.getel(),);

resizer.on('resize'，function());

在建立好panel之後，緊跟著加上這兩行**就行了。為什麼要加上後面的那行呢？因為這個ext.resizable只會改變panel.getel()的大小，但是裡面的內容並不會因此而發生變化，結果是新增加的那一部分是灰色的。那是proxy的顏色吧。要把panel的子元件調整到實質大小必須要updatebox，可者是setwidth、setheight。

這個功能蠻簡單，如果要對ext.resizable的詳情進行了解，請參見其官方文件。

九、怎樣為panel提供工具欄

這個問題重要，panel提供兩種工具欄：tbar、bbar。但是定義的方法都一樣。首先，我要研究一下tbar的型別：object/array，api文件說：可以是*******物件、可以是*******的config、還可以是按鈕的陣列，當然也可以是前兩者的陣列。目標清楚了，就要小小地研究一下*******，*******這個主題比較大，事實上應當作為乙個專題來搞的。不過，先搞清楚個大概用著先吧。

至此，關於ext.panel的常見問題都在這兒了，搞清楚了這些，基本上常規需求都可以實現了。

Ext的Panel總結（好文章）

Ext的Panel總結（好文章）

好文章備忘

IT好書好文章

Ext的Panel總結（好文章）

Ext的Panel總結（好文章）

好文章備忘

IT好書好文章

相關推薦