3. Sencha Touch – MVC

(1) xType

Ext.Create 가 즉시 객체가 생성되는 것과 달리 xtype 은 Root Container 에

추가되는 시점에서 객체가 생성이 된다. 이는 메모리의 관리라는 측면에서

이점이 될수 있다.

또 당연하게도 xtype 객체는 정의된 하나의 객체로 복수의 객체를 생성할수 있다.

[예제] X-Type 객체의 생성과 Ext.Create 와의 차이 비교

var panel1 = Ext.create(“Ext.Panel”,{
style:”background-color:red”,
html: “Ext.create() 이용”
});

var panel2 = {
xtype:”panel”,
style:”background-color:#00ff00″,
html:”xtype 이용”
};
var rootPanel = Ext.create(“Ext.Panel”,{
items:[panel1, panel1, panel2, panel2]
});

Ext.Viewport.add(rootPanel);

(2) Default 컴포넌트 구성 옵션

지금까지는 구성옵션을 자식 컴포넌트에 정의하였다면, root Container 에 기본 값을 지정하여

동일한 속성을 자식 컴포넌트에 일일히 지정하는 수고를 덜어 줄 수 있다.

[예제]

var rootPanel = Ext.create(“Ext.Panel”,{
items:[panel1, panel1, panel2, panel2],
defaults:{
handler:function(button,event){
Ext.Msg.alert(“알림” , button.getText() + “을 클릭” , Ext.emptyFn)
}
}
});

(3) 버튼

[예제] 아래는 버튼을 생성하는 예제이다.

– ui 색상을 정의하는 테그 : confirm-roudnd (confirm 은 색상, roound 는 모서리를 둥글게)

{
xtype: ‘button’,
ui: ‘confirm’,
test : ‘confirm’,
iconCls:”locate”,
inconMAsk:true,
badgeText:”2″
},

(4) 툴바 타이틀바

[예제] 아래는 툴바를 생성하고 툴바에 메뉴를 하나 추가한 후 메뉴를 누르면 메세지를 띄워주는 예제이다.

{
xtype: ‘toolbar’,
docked: ‘bottom’,
scrollable:’horizontal’,
items:[
{
text:’info’,
iconCls:’info’,
badageText:’2′,
iconMask:true,
handler:function(button,event){
Ext.Msg.alert(“알림” , button.getText() + “을 클릭” , Ext.emptyFn)}
}

]
}

(5) 세그먼트 버튼

{
xtype: ‘segmentedbutton’,

items:[
{
text:’Button 1′,
ui:’decline’,
pressed:true
},
{
text:’Button 2′,
ui:’decline’
},
{
text:’Button 3′,
ui:’decline’
}
],
listeners:{
toggle:function(segmentedButton, button, pressed)
{
Ext.Msg.alert(‘알림’,button.getText());
}
}
},

(6) 이미지

[예제] 이미지를 출려고하는 테그

{
xtype:’img’,
src:’http://www.sencha.com/assets/images/sencha-avatar-64×64.png’ ,
height:500,
width:500
}

(7) 필드셋과 필드 아이템

[예제] 필드 아이템은 필드셋 안에 정의하는 것을 원칙으로 한다.

items: [
{
xtype:’fieldset’,
title:’Login’,

items:
[
{
xtype: ‘textfield’,
name: ‘name’,
id : ‘name’,
label: ‘Name’
},
{
xtype: ’emailfield’,
name: ’email’,
id: ’email’,
label: ‘Email’
},
{
xtype: ‘passwordfield’,
name: ‘password’,
id: ‘pssword’,
label: ‘Password’
}

]
},

(8) 필드셋과 필드 아이템