1. Hello World 출력하기
Ext.define("HelloWorld.view.Main", {
extend: 'Ext.Panel',
requires: ['Ext.Panel'],
config: {
layout: 'card',
html:'helloworld!',
}
});
2. 기본 패널
1) 주요keyword
{
xtype: 'panel',
sytle: '...',
layout: {},
items: [],
html: '...',
}
2)Layout 속성
|
종류 |
type 속성 |
align 속성 |
pack 속성 |
|
Value |
auto
vbox
hbox
fit
card |
center
end
start
stretch
|
center
end
start
justify
|
3) 아이템
ㄱ. 단일 아이템 생성
items: {아이템 객체}
ㄴ. 복수 아이템 생성
items: [{아이템 객체}, {아이템 객체}, ...]
3. 실습
1) panel, flex
Ext.define("HelloWorld.view.Main", {
extend: 'Ext.Panel',
config: {
layout: {
type: 'vbox',
align:'stretch',
pack:'center'
},
defaults: {
scrollable:true
},
items: [
{
flex:1,
xtype: 'panel',
style : 'background-color:red',
html:'1',
},
{
flex:2,
xtype: 'panel',
style : 'background-color:green',
html:'2',
},
{
flex:3,
xtype: 'panel',
style : 'background-color:blue',
html:'3',
},
{
flex:4,
xtype: 'panel',
style : 'background-color:yellow',
html:'4',
},
],
}
});
워드 파일 : 
모바일 웹앱 전문 개발자 과정_0405.docx
'프로그래밍 > Mobile Web App 개발' 카테고리의 다른 글
| [모바일 웹앱 전문 개발자 과정] 6일차 4/7 #1 (0) | 2012.04.07 |
|---|---|
| [모바일 웹앱 전문 개발자 과정] 5일차 4/6 (0) | 2012.04.06 |
| [모바일 웹앱 전문 개발자 과정] 3일차 4/4 (0) | 2012.04.05 |
| [모바일 웹앱 전문 개발자 과정] 2일차 4/3 (0) | 2012.04.05 |
| [모바일 웹앱 전문 개발자 과정] 1일차 4/2 (1) | 2012.04.05 |
