ExtJS的使用方法彙總 5 布局

2021-09-30 06:50:52 字數 2488 閱讀 5407

所謂布局,簡單來說就是決定把什麼東西放到什麼位置上,對於管理軟體來說,一般都是首部放標題,左邊放選單欄,空餘的右下方用來顯示具體的內容。本章將詳細介紹ext中布局的用法。

我們可以用ext.viewport類對整個頁面進行整體布局,具體使用方法如下:

view plain

copy to clipboard

print?

var viewport=new  ext.viewport(,,]  

});  

效果圖如圖1所示:

圖1 傳統的布局形式

ext.layout.borderlayout布局把整個布局區域分成東、西、南、北、中5個部分,除了中間區域以外,其他的區域又都是可以省略的,因此我們可以利用它製作出更複雜、更靈活的布局。具體**如下:

view plain

copy to clipboard

print?

var viewport2=new  ext.viewport(,,,,]  

});  

效果圖如圖2所示。 

圖2 使用borderlayout的布局

注意:center是絕對不能省略的,如果items中缺少了region:'center'就會報錯,會造成程式中斷。

2.1 設定子區域的大小

我們僅僅需要新增width和height引數,這樣就可以指定每個子區域的大小了。但是,north和south兩個區域只能指定高度值,寬度值 由borderlayout自動計算;east和west只能指定寬度值,高度值由borderlayout自動計算;center區域的大小由其他4個 部分決定。設定的**如下所示:

view plain

copy to clipboard

print?

var viewport2=new  ext.viewport(,,,,]  

});  

2.2 使用split並限制它的範圍

使用split後,我們可以允許使用者自動拖放以改變某乙個區域的大小,實現的方式只要設定split:true引數即可實現,具體**如下。

實現效果圖如圖3所示。

圖3 設定split:true後的效果圖

2.3 子區域的展開和摺疊

該功能可以讓乙個區域展開和摺疊(相當於隱藏),實現的方式只需要配置幾個引數即可,具體**如下,主要配置引數是collapsible:true,這個引數啟用了某個區域的摺疊功能,而且前面的title引數也是必須設定的。實現**和效果圖如下所示。

圖4 帶有摺疊效果的布局

accordion是ext中預設布局的一部分,如果想用它,直接將區域加上layout:'accordion'即可,其他部分基本無需改動。我 們利用viewport製作出只有west和center兩個區域的borderlayout,在west部分放上accordion,實現方式如下面代 碼所示。

view plain

copy to clipboard

print?

var viewport=new  ext.viewport(,  

items:[,,]  

},]  

});  

效果圖如圖5所示。

圖5 使用了accordion的示例

設定了layout:'accordion'後,再使用items新增3個元素,記得每個子元素裡都要加上title引數,accordion沒有提供預設的標題,不設定標題是一定會出錯的。與布局有關的配置項都寫到layoutconfig裡。

ExtJS的使用方法彙總5 布局

所謂布局,簡單來說就是決定把什麼東西放到什麼位置上,對於管理軟體來說,一般都是首部放標題,左邊放選單欄,空餘的右下方用來顯示具體的內容。本章將詳細介紹ext中布局的用法。我們可以用ext.viewport類對整個頁面進行整體布局,具體使用方法如下 c sharp view plain copy va...

談談Ext JS的元件 布局的使用方法

在ext js中,包含兩類布局 元件類布局和容器類布局。由於有些元件是有不同的元件組合而成的,如字段就由標題和輸入框構成,他們之間也是存在布局關係的,而這 就需要元件類布局來處理元件內自己特有的布局關係。如果我們不定義自己的元件,基本不需要使用到元件布局,知道就行了。本文主要介紹的是容器類布局,因為...

談談Ext JS的元件 布局的使用方法續二

絕對布局讓我回想到了使用foxpro開發的時候,哪時候的介面布局就是這樣,通過設定控制項的左上角座標 x,y 和寬度來進行的,因為輸入控制項的 高度基本是固定的,所以不需要設定。在視覺化程式設計沒有出現之前,開發介面算是個苦差事,因為布局是需要花費不少功夫的,例如想要在已經定義好的元件中插入 乙個元...