天天看點
傳回

Extjs layout 布局

轉載：http://www.cnblogs.com/lipan/archive/2011/12/27/2302719.html  

一般的容器類控件都是通過配置項items來添加子控件，那麼如何定位子控件和父控件的布局，某些容器類控件，本身就繼承了布局方式，如Ext.container.Viewport本身是

一個border布局，有如Ext.form.Panel、Ext.tab.Panel等

大緻有十種布局方式

absolute、accordion、anchor、border、card、tale、vbox、hbox、fit.columne

1.   absolut::子元素相對于父元素絕對定位，其中包含了x、y兩個配置項在其中

[Js

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27

//absolute

Ext.create(

'Ext.Panel'

, {

title: 

'容器面闆'

,

renderTo: 

'div1'

,

width: 400,

height: 300,

layout: 

'absolute'

,

items: [{

title: 

'面闆1'

,

xtype: 

"panel"

,

html: 

"子元素1"

,

width: 200,

height: 100,

x: 50,

y: 50

}, {

title: 

'面闆2'

,

xtype: 

"panel"

,

html: 

"子元素2"

,

width: 200,

height: 100,

x: 100,

y: 80

}]

});

二、accordison 有的js插件裡面accordion都是一個ui控件，但是Ext是通過布局的方式實作的，我們可以用面闆控件作為它的折疊項，并且還可以用js來翻動活動項。

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34

//accordion

Ext.create(

'Ext.Panel'

, {

title: 

'容器面闆'

,

renderTo: 

'div2'

,

width: 400,

height: 300,

layout: 

'accordion'

,

items: [{

tools: [{ type: 

'gear'

, handler: 

function

() {

Ext.Msg.alert(

'提示'

, 

'配置按鈕被點選。'

);

}

}, { type: 

'refresh'

}],

title: 

'面闆1'

,

xtype: 

"panel"

,

html: 

"子元素1"

}, {

title: 

'面闆2'

,

xtype: 

"panel"

,

html: 

"子元素2"

}, {

id: 

'panel3'

,

title: 

'面闆3'

,

xtype: 

"panel"

,

html: 

"子元素3"

}]

});

Ext.create(

"Ext.Button"

, {

renderTo: 

'div2'

,

text: 

"打開第三頁"

,

handler: 

function

() {

Ext.getCmp(

'panel3'

).expand(

true

);

}

});

三、anchor 這種布局是表單預設的布局方式，每一項代表一行，支援用anchor配置各子項的width和height，為是表時百分比示占目前容器的百分比，為數字一般為負數，表示父容器的值減去內插補點，剩下的就是子項的大小

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29

//anchor

Ext.create(

'Ext.Panel'

, {

title: 

'容器面闆'

,

renderTo: 

'div3'

,

width: 400,

height: 300,

layout: 

'anchor'

,

items: [{

tools: [{ type: 

'gear'

, handler: 

function

() {

Ext.Msg.alert(

'提示'

, 

'配置按鈕被點選。'

);

}

}, { type: 

'refresh'

}],

title: 

'面闆1'

,

xtype: 

"panel"

,

html: 

"子元素1"

,

anchor: 

'80% 20%'

}, {

title: 

'面闆2'

,

xtype: 

"panel"

,

html: 

"子元素2"

,

anchor: 

'-50 -200'

}, {

title: 

'面闆3'

,

xtype: 

"panel"

,

html: 

"子元素3"

,

anchor: 

'100% 30%'

}]

});

四border 邊界布局， 這個布局可以定義東南西北四個方向的子元素，還有一個居中的子元素，一般用它來做頁面整頁布局，是以Ext.container.Viewport預設就支援了這個布局方式。

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45

//border

Ext.create(

'Ext.Panel'

, {

title: 

'容器面闆'

,

renderTo: 

'div4'

,

width: 400,

height: 300,

layout: 

'border'

,

defaults: {

split: 

true

,                 

//是否有分割線

collapsible: 

true

,           

//是否可以折疊

bodyStyle: 

'padding:15px'

},

items: [{

region: 

'north'

,            

//子元素的方位：north、west、east、center、south

title: 

'北'

,

xtype: 

"panel"

,

html: 

"子元素1"

,

height: 70

}, {

region: 

'west'

,

title: 

'西'

,

xtype: 

"panel"

,

html: 

"子元素2"

,

width: 100

}, {

region: 

'east'

,

title: 

'東'

,

xtype: 

"panel"

,

html: 

"子元素2"

,

width: 100

}, {

region: 

'center'

,

title: 

'主體'

,

xtype: 

"panel"

,

html: 

"子元素3"

}, {

region: 

'south'

,

title: 

'南'

,

xtype: 

"panel"

,

html: 

"子元素4"

,

height: 70

}]

});

五 card card像卡片一樣可以在各個子元素中切換，每個子元素都單獨占據整個容器，可以通過按鈕控制處于活躍狀态的子元素

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45

//card

var

cardNav = 

function

(incr) {

var

l = Ext.getCmp(

'cardPanel'

).getLayout();

var

i = l.activeItem.id.split(

'card'

)[1];

var

next = parseInt(i, 10) + incr;

l.setActiveItem(next);

Ext.getCmp(

'cardPrev'

).setDisabled(next === 0);

Ext.getCmp(

'cardNext'

).setDisabled(next === 2);

};

Ext.create(

'Ext.Panel'

, {

title: 

'容器面闆'

,

renderTo: 

'div5'

,

width: 400,

height: 300,

layout: 

'card'

,

activeItem: 1,                  

//預設活動項

id: 

'cardPanel'

,

items: [{

id: 

'card0'

,

title: 

'面闆1'

,

xtype: 

"panel"

,

html: 

"子元素1"

}, {

id: 

'card1'

,

title: 

'面闆2'

,

xtype: 

"panel"

,

html: 

"子元素2"

}, {

id: 

'card2'

,

title: 

'面闆3'

,

xtype: 

"panel"

,

html: 

"子元素3"

}],

bbar: [

'->'

, {

id: 

'cardPrev'

,

text: 

'« 前一頁'

,

handler: Ext.Function.bind(cardNav, 

this

, [-1])

}, {

id: 

'cardNext'

,

text: 

'後一頁 »'

,

handler: Ext.Function.bind(cardNav, 

this

, [1])

}]

});

六\column 列布局，按列劃分

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41

//column

Ext.create(

'Ext.Panel'

, {

title: 

'容器面闆'

,

renderTo: 

'div6'

,

width: 400,

height: 300,

layout: 

'column'

,

defaults: {                     

//設定沒一列的子元素的預設配置

layout: 

'anchor'

,

defaults: {

anchor: 

'100%'

}

},

items: [{

columnWidth: 4 / 10,        

//設定列的寬度

items: [{

title: 

'面闆1'

,

border: 

false

,

html: 

'子元素1'

}, {

title: 

'面闆2'

,

border: 

false

,

html: 

'子元素2'

}]

}, {

width: 120,

items: [{

title: 

'面闆3'

,

border: 

false

,

html: 

'子元素3'

}]

}, {

columnWidth: .40,

items: [{

title: 

'面闆4'

,

border: 

false

,

html: 

'子元素4'

}]

}]

});

七 fit 自适應布局，子元素會獨占全部空間，一般隻有一個子項

1 2 3 4 5 6 7 8 9 10 11 12 13

//fit

Ext.create(

'Ext.Panel'

, {

title: 

'容器面闆'

,

renderTo: 

'div7'

,

width: 400,

height: 300,

layout: 

'fit'

,

items: [{

title: 

'面闆'

,

html: 

'子元素'

,

border: 

false

}]

});

八、table 表格布局，用表格定位的方式去布局，可以使用rowpan和crolpans

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22

//table

Ext.create(

'Ext.Panel'

, {

title: 

'容器面闆'

,

renderTo: 

'div8'

,

width: 400,

height: 300,

layout: {

type: 

'table'

,

columns: 4

},

defaults: { frame: 

true

, width: 70, height: 50 },

items: [

{ html: 

'元素1'

, rowspan: 3, height: 150 },

{ html: 

'元素2'

, rowspan: 2, height: 100 },

{ html: 

'元素3'

},

{ html: 

'元素4'

},

{ html: 

'元素5'

, colspan: 2, width: 140 },

{ html: 

'元素6'

},

{ html: 

'元素7'

},

{ html: 

'元素8'

}

]

});

九、vbox 這個布局把所有的子元素按照縱向排成一列。’ Js]

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32

//vbox

Ext.create(

'Ext.Panel'

, {

title: 

'容器面闆'

,

renderTo: 

'div9'

,

width: 400,

height: 300,

layout: {

type: 

'vbox'

,

pack: 

'start'

,              

//縱向對齊方式 start：從頂部；center：從中部；end：從底部

align: 

'stretchmax'

//對齊方式 center、left、right：居中、左對齊、右對齊；stretch：延伸；stretchmax：以最大的元素為标準延伸

},

defaults: {

xtype: 

'button'

},

items: [{

text: 

'小按鈕'

,

flex: 1                      

//表示目前子元素尺寸所占的均分的份數。

}, {

xtype: 

'tbspacer'

,          

//插入的空填充

flex: 3

},

{

text: 

'中按鈕'

,

scale: 

'medium'

}, {

text: 

'大按鈕'

,

width: 120,

scale: 

'large'

,

flex: 1

}]

})

十、hbox

跟vbox類似，隻不過變成了橫向的。

[Js]

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25

//hbox

Ext.create(

'Ext.Panel'

, {

title: 

'容器面闆'

,

renderTo: 

'div10'

,

width: 400,

height: 300,

layout: {

type: 

'hbox'

,

pack: 

'end'

,

align: 

'middle'

//對齊方式 top、middle、bottom：頂對齊、居中、底對齊；stretch：延伸；stretchmax：以最大的元素為标準延伸

},

defaults: {

xtype: 

'button'

},

items: [{

text: 

'小按鈕'

},{

text: 

'中按鈕'

,

scale: 

'medium'

}, {

text: 

'大按鈕'

,

width: 120,

scale: 

'large'

}]

});
頁面 extjs 布局
上一篇: extjs 3.4 border布局
下一篇: ExtJS 列布局以及table布局的應用

繼續閱讀