1. Sencha Touch – UI 구성 기초
(1) Applicaion 구조
UI 구성은 Ext.appliction 에서 정의되어진다. 아래는 기본적인 application 의 구조이다.
– name : Class 명
– requires : 사용하고자 하는 class 를 import 한다.
– lauch : 실질적으로 수행하고자 하는 내용을 넣으면 됨
<script type=”text/javascript”>
Ext.application({
name: “Myapp”,
requires:[],
launch: function()
{
var panel = Ext.create(“Ext.Panel” , {
style : “background-color:#ffff00”,
html: “Hello World”
});
Ext.Viewport.add(panel);
}
});
</script>
(2) Document 보기 팁
참조 : http://docs.sencha.com/touch/2.3.1/
보는 방법은 간단하다. 위의 샘플에서 보이는 Ext 는 Doc 의 두번째 탭에서 보이는
Root 라고 보면된다.
– 예를 들어 Ext.Panel 은 Doc 의 Ext 아래 정의되어 있다.
– Panel 을 선택하면 config , properties, method, event 를 볼수 있다.
-> config 는 객체 내부 변수 들을 정의하는 것
-> method 는 해당 객체에서 사용가능한 메서드
-> event 는 해당 객체에서 사용가능한 Event 이다.
(3) 웹앱의 구성
웹앱은 복수의 JS 파일과 하나의 HTML 파일로 구성된다. 아래는 3개의 JS 파일과
하나의 HTML로 구성된 예제 이다.
[예제] HTML 페이지 3개의 JS 페이지를 Import 하여 Ext.tab.Panel 패널에 추가한다.
<script type=”text/javascript”>
Ext.application({
name: “MyApp”,
requires: [
“HomeView”,
“LoginView”,
“ListView”,
“Ext.tab.Panel”
],
launch: function() {
var homeView = Ext.create(“HomeView”);
var loginView = Ext.create(“LoginView”);
var listView = Ext.create(“ListView”);
var tabPanel = Ext.create(“Ext.tab.Panel”, {
items: [ homeView, loginView, listView ]
});
Ext.Viewport.add(tabPanel);
}
});
</script>
[예제] import 하는 JS 파일중 하나의 예제
패널을 만들고 패널의 배경색을 정하는 것으로 끝
Ext.define(“HomeView”, {
extend:”Ext.Panel”,
config: {
title: “Home”,
style: “background-color: red; color:white;”,
html: “homeView”
}
});
(4) 컴포넌트 구성의 종류
컴포넌트의 종류는 크게 일반, 네비게이션, 폼, 스토어 바운드 컴포넌트로 구분된다.
가) 일반컴포넌트
– 컨탠이너 컴포넌트 : 자식 컴포넌트를 포함할 수 있음, Doc 상으로 보면 Container 를 상속 받는지 여부로 확인 가능
panel, viewport, tab.panel,
– 뷰어 컴포넌트 : 자식 컴포넌트를 포함할 수 없음
나) 네비게이션 컴포넌트 : 화면 네비게이션 UI를 구성하는 컴포넌트들을 말한다.
다) 폼 컴포넌트 : 필드, 체크박스, 라벨과 같은 입력 폼을 생겅하는 컴포넌트
라) 스토어 바운드 컴포넌트 : 모델 데이터를 바인딩하여 UI를 구성하는 컴포넌트
(5) Container
가) 컨테이너에 아이템 추가
[예제] 아래와 같은 방법으로 컴포넌트 추가 가능
var panel = Ext.create(“panel”,{items:[a,b,c]}]);
나) 컨테이너에 아이템 동적 추가
[예제] add 메서드를 사용하여 추가 가능하다. Container 상속 객체는 동일
panel.add(btn02);
다) 컨테이너에서 아이템을 삭제
[예제] remove 메서드를 사용하여 삭제가 가능하다 . Contariner 상속 객체는 동일하다.
panel.remove(btn);
[예제] 버튼을 누르면 버튼을 동적으로 추가하고 추가된 버튼을 누르면 버튼이 삭제되는 예제
<script type=”text/javascript”>
Ext.application({
name: “MyApp”,
requires: [
“Ext.Button”,
“Ext.Panel”
],
launch: function()
{
var btn01 = Ext.create(“Ext.Button” ,
{
text:”add” ,
handler:function()
{
var btn02 = Ext.create(“Ext.Button”,
{
text:”temp”,
handler:function(btn){
panel.remove(btn);
}
}
);
panel.add(btn02);
}
});
var panel = Ext.create(“Ext.Panel”,{
items:[btn01]
});
Ext.Viewport.add(panel);
}
});
</script>
(6) Dock
Container 에 객체를 추가하면서 추가하는 객체의 위치를 지정하는 방법
– docked:”bottom” : 요소객체 중 docked 에 원하는 위치를 지정한 후에 Root Container 에 Add 하여야 한다.
[예제] 이제 부터는 lunch 부분의 소스만 첨부함 .
launch: function()
{
var dockedItem1 = Ext.create(“Ext.Panel” ,
{
docked:”top”,
style:”background-color:red”,
html:”top”
});
var dockedItem2 = Ext.create(“Ext.Panel” ,
{
docked:”bottom”,
style:”background-color:green”,
html:”bottom”
});
var dockedItem3 = Ext.create(“Ext.Panel” ,
{
docked:”left”,
style:”background-color:blue”,
html:”left”
});
var dockedItem4 = Ext.create(“Ext.Panel” ,
{
docked:”right”,
style:”background-color:white”,
html:”right”
});
var rootPanel = Ext.create(“Ext.Panel” , {
items:[dockedItem1,dockedItem2,dockedItem3,dockedItem4]
});
Ext.Viewport.add(rootPanel);
}