panel的常見用法小計

2021-07-10 09:46:04 字數 3270 閱讀 1348

我剛才禁不住**去看了一下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、還可以是按鈕的陣列,當然也可以是前兩者的陣列。*******,*******這個主題比較大。不過,先搞清楚個大概用著先吧。

block用法小計

預設情況下,任何block都是在棧中,隨時可能會被 對block設定copy屬性,block的記憶體就會放到堆裡面。book b book alloc init b.block 如果像上述寫法block所指向的 塊會強引用book的記憶體位址,使得book物件不能釋放,造成記憶體洩露。book b ...

C語言常見知識小計

malloc和new的區別 主要從 申請記憶體所在位置 返回型別安全性 記憶體分配失敗時的返回值 是否需要制定記憶體大小 這四個方面進行區分 申請的記憶體所在位置不同new操作符從自由儲存區 free store 上為物件動態分配記憶體空間。自由儲存區是c 基於new操作符的乙個抽象概念,凡是通過n...

sql小計彙總 rollup用法

rollup在oracle sql server裡面都有有。這裡介紹sql server2005裡面的乙個使用例項 create table tb province nvarchar 10 city nvarchar 10 score int insert tb select 陝西 西安 3 uni...