|
我剛才禁不住誘惑去看了一下Ext.Window的API文檔，發(fā)現(xiàn)只是比Panel多了點什么最大化、最小化、關(guān)閉、置前、置后、動畫引發(fā)目標設(shè)置、可調(diào)整大小這些功能。像什么標題欄、工具欄之類的東西在Ext.Panel早就封裝好了。搞定了Ext.Panel終于可以悶聲發(fā)大財羅。哈哈哈。 這一文主要總結(jié)一下，panel的常見用法。 一、使Panel的標題欄隱藏 這是常有的事，常常，一個欄目并不需要標題。有什么辦法呢，創(chuàng)建時config中加上：header:false。就ok了。 二、如何使Panel能被拖動 確保config中如下設(shè)置： var config1={title:'這是標題欄', 好了，關(guān)鍵就是上面紅色部分了，由前面的文檔可知：Ext.Panel.DD這個類只是提供移動Proxy元素的效果，鼠標一松，panel仍在老地方，所以得寫代碼實現(xiàn)。關(guān)于Ext.Panel.DD，這個類是非公開的，我在源代碼中也沒有找到。不曉得放在哪。最后，我只得打開FireFox+FireBug才看到它里面的東西。 為什么一定要floating:true呢？原因很簡單，要能拖動，那么這個div就是absolute的，而一個panel.el默認不會是absolute。所以非得設(shè)成floating，以讓它能浮動。 三、如何有Panel能折疊、展開效果。 這個很簡單，panel在title tools中提供一個toggle的工具，就是用它干這事的，不過，默認情況下，panel的這個功能是被關(guān)閉的。panel還提供一個功能，單擊title的任意一處都會產(chǎn)生toggle collapse效果。相關(guān)的config屬性我提出來如下： animCollapse : Boolean collapseFirst : Boolean collapsed : Boolean collapsedCls : String collapsible : Boolean //事實上，把它設(shè)成true就ok了，其它幾個可以不設(shè)置。 titleCollapse : Boolean 關(guān)于它們的使用說明請參見前面的API文檔。不過，單看名字應當就曉得用了，取名很直觀。 四、怎樣為panel設(shè)置title tools。 就是怎樣為Panel的標題欄添加按鈕，這個容器，在config中類似如下代碼即可： tools:[{id:close,handler:function(event, toolEl, panel){panel.hide();}}], 格式一般是：tools:[{……},{……},{……}] 五、怎樣顯示、隱藏panel 這個很容易,panel.show()/hide()就行了。但是，如果floating:true的話，那就麻煩了，show都顯示不了，我在FireBug中一看，panel.el.dom.style.left="-10000px"。這當然是顯示不出來的。所以，你show了還要setPosition一下。這才行了。 六、為panel添加子組件 簡單，在config中加items屬性，類似于如下代碼： items:[{id:'win1',xtype:'window',title:'title',height:100,width:100}], 格式一般是：items:[{……},{……},{……}] 如果在定義時，沒有設(shè)置xtype，則子組件創(chuàng)建是xtype取defaultType的值。像上面，由于window創(chuàng)建后是不顯示的，所以，只得show出來。所以，我在定義時給它一個id。這樣在Ext.onReady()中就可以：Ext.getCmp("win1").show()。嘿，就出來了。其他組件的加入類似。一個{}是一個組件。 像上面那樣的叫惰性呈現(xiàn)，還有一種寫法是：items:[new XXX(config)]。這樣的定義會在組件創(chuàng)建時直接呈現(xiàn)。 七、為panel設(shè)置布局 這個是關(guān)鍵了。就是要設(shè)layout、layoutConfig。這個要詳細的講一下。平常要用嘛。這兒用BorderLayout的文檔上的代碼為例： layout:'border', 其實，布局類的api接口很簡單，使用也不復雜。果然是把swing的那一套學過來了。 Ext.layout.BorderLayout是一個比較特殊的布局類，它沒有什么正兒八經(jīng)的config，不像Panel它們。只需設(shè)一下layout，然后，在成員組件那兒用region標明是哪個區(qū)域就是了。Ext.layout.BorderLayout把一塊地盤分成五個區(qū)：east、west、south、north、center。 我個人非常喜歡這個布局，因為以它作為外層布局的話，就能很方便的實現(xiàn)cnblogs一樣的效果，我到現(xiàn)在還不知道那個左邊列固定寬，右邊列占滿剩余屏幕的布局是怎么搞的，除非寫javascript代碼在window.onload中手工調(diào)，否則，全靠css，真的是想不出辦法來，后來，我也找到一個辦法：用table。table有一個特性，可以把它設(shè)成占滿整個水平方向，第一列固定寬，第二列自動就是剩余的。不過，不曉得有沒有純css的解決方式，老實說，div+css實在太難控制了，table在水平方向上的布局優(yōu)勢還是很大的。比如，同一行，放兩個內(nèi)容，左邊的左對齊，右邊的右對齊，用div就麻煩了，又是浮動，挖空心思，用table就很顯然，兩個格：一個align=left，一個align=right。這話題扯遠了。發(fā)牢騷罷了。 八、怎樣使得Panel能被改變大小 事實上，如果真的panel能被改變大小，那么可以考慮使用window。只要把dragable設(shè)成false就成了。如果不喜歡那些按鈕，應當也可以想到辦法去掉的。panel本身沒有這個功能。不過，ExtJs有一個類提供這種功能，即：Ext.Resizable。它的用法很簡單，如下： var resizer = new Ext.Resizable("element-id", { 由上可知，它的功能是為一個指定的元素提供可改變大小的功能。這個功能不出奇吧。怎么把它用于panel。嘿，其實就一個關(guān)鍵，怎樣取得x-panel所在元素的id。這個好辦，事實上，這件事我曾在Ext.Panel篇一中就論述了。二種方法：panel.el或者panel.getEl()都一樣。 因此，代碼應當這么寫： var resizer=new Ext.Resizable(panel1.getEl(),{handlers:'all',pinned:true}); resizer.on('resize'，function(){panel1.updateBox(panel1.getSize());}); 在創(chuàng)建好panel之后，緊跟著加上這兩行代碼就行了。為什么要加上后面的那行呢？因為這個Ext.Resizable只會改變panel.getEl()的大小，但是里面的內(nèi)容并不會因此而發(fā)生變化，結(jié)果是新增加的那一部分是灰色的。那是proxy的顏色吧。要把panel的子組件調(diào)整到實質(zhì)大小必須要updateBox，可者是setWidth、setHeight。 這個功能蠻簡單，如果要對Ext.Resizable的詳情進行了解，請參見其官方文檔。 九、怎樣為Panel提供工具欄 這個問題重要，panel提供兩種工具欄：tbar、bbar。但是定義的方法都一樣。首先，我要研究一下tbar的類型：Object/Array，api文檔說：可以是toolbar對象、可以是toolbar的config、還可以是按鈕的數(shù)組，當然也可以是前兩者的數(shù)組。目標清楚了，就要小小地研究一下toolbar，toolbar這個主題比較大，事實上應當作為一個專題來搞的。不過，先搞清楚個大概用著先吧。 這兒有一篇關(guān)于Ext.Toolbar的好文章，點此處查看！關(guān)于在Ext.Panel中使用工具欄，最直觀、傻瓜式的用法，點此處查看。關(guān)于toolbar的更詳細的研究、使用方法將在下一篇中給出。
至此，關(guān)于Ext.Panel的常見問題都在這兒了，搞清楚了這些，基本上常規(guī)需求都可以實現(xiàn)了。 |
|
|
