1. Sencha Touch – 시작하기

(1) Sencha Touch?

– EXT JS : PC 용 버전으로 Sencha Touch 의 시작이라고 볼수 있다.

-> 링크 : http://www.sencha.com/products/extjs/

– Sencha Touch : Javascript 기반으로 HTML5, CSS3 등을 활용하여 MVC 기반으로 개발할수 있도록 지원함

-> 링크 : http://www.sencha.com/products/touch/

(2) Sencha Touch 설치

– Sencha Touch , Sencha Cms, JDK1.7, JRE1.7, RUBY 필요

가) Sencha Cmd

Sencha Touch 로 개발한 코드를 최적화 해주는 Cmd , 또한 MVC 기반으로 개발할수도 도롸주는 역할도 함

형태 : EXE 실행파일

다운로드 : http://www.sencha.com/products/sencha-cmd/download

다큐먼트 : http://docs.sencha.com/touch/2.3.1/

나) Sencha Touch

형태 : JS

다운로드 : http://www.sencha.com/products/touch/download/

다큐먼트 : http://developer.sencha.com/product/touch

http://docs.sencha.com/touch/2.3.1/

다) JDK/JRE 1.7 이상 필요

라) RUBY 필요 (CSS 컴파일을 위해 필요함)

형태 : EXE 파일

다운로드 : http://rubyinstaller.org/downloads/

주의 : 설치시 Ruby 명령어 사용을 위한 환경설정 추가 Check

(3) Sencha Touch 사용 – LIB Import

가) JS 디버깅 해제

라이브러리에서 애러가 나서 실행되지 않는 경우가 있음

projuect -> properties -> builder -> 전부 해제

나) CSS, JS Import

– JS Import : all / dubug / link 세가지중 Import

<script src=”../framework/sencha-touch-debug.js”></script>

– CSS Import : resources->sencha-touch.css 추가
<link rel=”stylesheet” type=”tet/css” href=”../framework/resources/sencha-touch.css”/>

(3) Sencha Touch 사용 – 기본 Class 만들기

1) 동적 클래스 로딩 허용

동일한 파일에 클래스가 없을 경우에도 ext 에 정의된 클래스를 동적으로 로딩함

ps. Ext.create 로 클래스럴 생성하는 경우 자동으로 적용됨

//동적 클래스 로딩 허용

Ext.Loader.setConfig({enabled:true});

1) 클래스 Import

Ext.require(“User”);
Ext.onReady(function(){

});

1) 클래스 정의

Ext.define(“User”, {
//생성자
constructor : function(config){
this.initConfig(config);
},
//구성옵션
config:{
name:null,
age:null
}
});
2) 클래스 생성
var user = Ext.create(“User”,
{
name : “sencha Touch”,
age : 2
});

3) 변수 접근
user.setName = “변경”;
//구성 옵션에 만든 value 에 대해서는 Set, Get 메서드가 자동으로 생성됨
console.log(“구성옵션 값 :” + user.getName());

4) 상속
//상속
Ext.define(“Member” , {
extend:”User”,
constructor : function(config){
this.initConfig(config);
},
//구성옵션
config:{
mid:null
}
});

var member = Ext.create(“Member”, {
name : “touch1”,
age : 10,
mid : 4
});
console.log(“상속 Name” + member.getName());
console.log(“상속 Age” + member.getAge());
console.log(“상속 Mid” + member.getMid());