2. Sencha Touch – Layout

(1) Layout

 

layout 은 각각의 Container 객체에 layout 항목에 정의할 수 있다.

참조 : http://docs.sencha.com/touch/2.3.1/#!/api/Ext.layout.VBox

문서 경로 : layout > VBox(각각포맷) > configs

– type

->vbox : vertical 정렬

->hbox: horizental 정렬

->fit : 꽉 채우기

->card : 교체?

– align : 수펴

start : child items are packed together at left side of container

center : child items are packed together at mid-width of container

end : child items are packed together at right side of container

stretch : child items are stretched vertically to fill the height of the container

– pack

start : child items are packed together at left side of container

center : child items are packed together at mid-width of container

end : child items are packed together at right side of container

justify : child items are packed evenly across the container. Uses the ‘justify-content: space-between’ css property

cf) align, pack 은 type 에 따라 수직, 수평의 의미가 바뀜

[예제] 수직정렬, Panel 에 3개의 버튼을 lay을 지정하여 배치하는 예

var rootPanel = Ext.create(“Ext.Panel”, {
layout: { type: “hbox”, align: “center”, pack: “justify” },
items: [ btn1, btn2, btn3 ]
});

[예제] 수평정렬, Panel 에 3개의 버튼을 lay을 지정하여 배치하는 예

var rootPanel = Ext.create(“Ext.Panel”, {
layout: { type: “vbox”, align: “center”, pack: “justify” },
items: [ btn1, btn2, btn3 ]
});

[예제] Flex 예제 : Flex 속성을 이용하여 차지하는 비율을 정의할 수 있다.

cf) Flex 는 HBox , VBox 에만 적용된다.

launch: function() {
var item1 = Ext.create(“Ext.Panel”, {
flex: 1,
style: “background-color:red; color:white;”
});

var item2 = Ext.create(“Ext.Panel”, {
flex: 2,
style: “background-color:green; color:white;”
});

var item3 = Ext.create(“Ext.Panel”, {
flex: 1,
style: “background-color:blue; color:white;”
});

var rootPanel = Ext.create(“Ext.Panel”, {
layout: { type: “hbox”, align: “stretch”, pack: “center”},
items: [ item1, item2, item3 ]
});
Ext.Viewport.add(rootPanel);
}

[예제] Fit 속성은 items 한개만 적용된다.

var rootPanel = Ext.create(“Ext.Panel”, {
layout: “fit”,
items: [ imagePanel ]
});

[예제] Card : Fit 과 마찬가지로 꽉 채우는 속성이 적용되지만

복수개의 아이템에 곂치는 형태로 적용된다.

– setActiveItem 사용 : cardPanel.setActiveItem(0); 을 사용하여 화면에 보여지는 Card 를 변경할 수 있다.

launch: function() {
var card1 = Ext.create(“Ext.Panel”, {
style: “background-color:#ff0000”
});

var card2 = Ext.create(“Ext.Panel”, {
style: “background-color:#00ff00”
});

var card3 = Ext.create(“Ext.Panel”, {
style: “background-color:#0000ff”
});

var cardPanel = Ext.create(“Ext.Panel”, {
flex:1,
layout: “card”,
items: [ card1, card2, card3 ]
});

var toolbar = Ext.create(“Ext.Toolbar”, {
docked: “top”,
items: [
Ext.create(“Ext.Button”, {
text: “Red”,
handler: function(btn, event) {
cardPanel.setActiveItem(0);
}
}),
Ext.create(“Ext.Button”, {
text: “Green”,
handler: function(btn, event) {
cardPanel.setActiveItem(1);
}
}),
Ext.create(“Ext.Button”, {
text: “Blue”,
handler: function(btn, event) {
cardPanel.setActiveItem(2);
}
})
]
});

var rootPanel = Ext.create(“Ext.Panel”, {
layout: “vbox”,
items: [ toolbar, cardPanel ]
});
Ext.Viewport.add(rootPanel);
}

[예제] TabPanel 을 이용한 화면 전환

– Button 을 생성하지 않아도 items: [ card1, card2, card3 ] 이런식으로 넣는 것 만으로

버튼이 생성된다. 버튼의 val 값은 각 아이템의 title 을 따른다.

– 적용되는 Layout 은 CArd Layout 이다.

launch: function() {
var card1 = Ext.create(“Ext.Panel”, {
title: “Red”,
style: “background-color:#ff0000”
});

var card2 = Ext.create(“Ext.Panel”, {
title: “Green”,
style: “background-color:#00ff00”
});

var card3 = Ext.create(“Ext.Panel”, {
title: “Blue”,
style: “background-color:#0000ff”
});

var rootPanel = Ext.create(“Ext.tab.Panel”, {
items: [ card1, card2, card3 ]
});
Ext.Viewport.add(rootPanel);
}