반응형
Sencha Touch 관련 개발 문서
Sencha touch 2.0 Migration
버전에 따른 개발 방식 변화
- ExtJS4 스타일의 MVC 패턴으로 앱을 만들어야 함
- 센차1.0은 MVC 패턴 방식이 아님.
- 모델, 뷰, 컨트롤러를 따로 클래스 정의하여 사용함.
- 앱의 entry point 변경
- 센차 1.0 → Ext.onReady 함수사용
- 센차 2.0 → Ext.application 함수.
- 객체 생성시, 생성자 호출 문법 변경됨. → Ext.create('Ext.Panel', { … });
- 탭패널에서 bottom 탭 생성하는 문법 변경됨. → tabBarPosition 프로퍼티가 새로 추가.
- 패널에서 툴바 생성시 dockedItems 프로퍼티 없어짐. → items 안에 툴바도 같이 넣고, 해당 툴바의 속성중 docked를 top선언.
- model 선언부분 변경됨. → 클래스 상속받아서 정의해야 함.
- Ext.data.JsonPStore 는 센차 내부에서만 사용됨 → Ext.Data.Strore 를 사용하고, proxy의 type, reader 의 type 등을 알맞게 선택하여 사용한다.
- 기존에 탭바 안에서, 리스트를 패널에 붙여서 사용했지만, 이제는 리스트를 패널에 붙여서 탭바에서 보여주면 화면에 나오지 않는다. → 리스트 자체의 아이템으로 툴바를 가지고 있으면 되고, 이 리스트 자체를 탭바의 아이템으로 사용하라. → 5시간 동안 삽질해서 알아냈음.
- 패널에 탭이벤트 등을 넣고자 할때, initialize 함수 안에서, this.body.on('tap', function() { alert('hi')}); 이런식으로, body에 on메소드 사용.
- 각 패널에 html의 스타일을 원하는 대로 적용할 수 있다. styleHtmlContent, style, styleHtmlCls 를 참고 바람.
- 패널의 바디에 탭 이벤트를 처리하고, 그 이벤트에서 태그이름을 비교하고, 태그 이름의 속성에 필요한 값을 정의하여 사용하는 방법.
this.getCategoryView().body.on('tap', function(event, el){ console.log(el); if(el.tagName.toLowerCase() == 'p'){ console.log(el.getAttribute('_id'), el.getAttribute('_name'), el.getAttribute('_parent')); } });
- 로컬스토리지 사용시 주의!
- 로컬스토리지 사용하여, 데이터를 저장할때, store.sync() 가 아닌, model객체에 저장할 스트링을 담아서 생성하고, model.save()함수 이용
- xtype 중 form 이 formpanel 로 변경되었음. 클래스는 Ext.form.Panel 을 사용함.
결론
- 개발 언어의 변화(ExtJS3 → ExtJS4) 로 인한 개발할때의 구조와 문법이 바꼈고, ExtJS4 에 대한 공부가 먼저 되어야함.
- 클래스를 바탕으로 MVC 패턴으로 개발해야 하므로, 현재 앱 소스코드의 설계부터 다시 해야함.
- 처음부터 2.0으로 짜는것보다, 기존의 1.0을 2.0으로 바꾸는 것은 그리 단순하지 않으나, 스떠디 진행하여 해결합시다.
참고자료
MVC 패턴 적용시 컨벤션
- 파일및 디렉토리 구조가 정해져있음.
- app 디렉토리
- controller 디렉토리
- model 디렉토리
- store 디렉토리
- view 디렉토리
- app.js 에서 Ext.application함수 안에서 정의한 name 과, 모델, 뷰, 컨트롤러에서 사용하는 클래스 패키지명에서의 맨 앞이 일치해야 함.
클래스 정의 관련
view 정의
- 센차의 클래스를 상속받아서 정의함.
- xtype 을 따로 정의하여, 이것을 다른 클래스에서 아이템으로 사용할 수 있음.
- config 에는 센차의 정의된 클래스의 config을 사용하여 기존에 작업했던 대로 정의함.
- 이때 이벤트 핸들러는 여기에 정의하지 않는다. → 컨트롤러에서 정의하여 처리함.
controller 정의
- 센차의 Ext.app.Controller 클래스를 상속받아서 정의함.
- 사용할 views, stores 를 배열로 정의함.
- refs 는 셀렉터와 ref 로 구성되며, 셀렉터는 뷰 클래스의 xtype 을 사용하거나, 아이드를 사용할수있다.
- 아이디를 사용할 경우에는 '#아이디' 식으로 사용함.
- ref는 이 컨트롤러에서 사용할 레퍼런스이며, 자동으로 getter, setter 함수를 제공하게 된다.
- init 함수 에서 this.control 함수 사용 → 여기에 버튼등의 원하는 이벤트를 리스닝 하게 만들고, 해당 핸들러를 등록한다.
- 하나의 객체에 여러 이벤트 등록할때에는, 'xtype' : {이벤트:함수, 이벤트:함수, … } 식으로 등록함.
- 이때 이벤트 핸들러는 여기에 정의하지 않는다. → 컨트롤러에서 정의하여 처리함.
- onLaunch 함수 : 컨트롤러가 런치 완료 되면 실행됨.
model 정의
- Ext.data.Model 클래스 상속받아서 정의함.
- 필드, 프록시등을 정의함.
store 정의
- 실제로 데이터를 담게 되는 클래스로서,
- Ext.data.Store 를 상속받아 정의함.
- requires 에 사용될 모델의 페키지명까지 적고,
- model 에 정의해줌.
- 인라인 데이터를 사용할 경우에는 data 필드를 만들고 여기에 정의를 해준다.
테스트 코드
유용한 기능
- 리스트에서 스크롤을 맨 위로 올리기.
- 리스트객체에서 스크롤러블을 구하고, 거기서 스크롤러 구한후 scrollTo함수 이용.
- this.getCheckinCompanyList().getScrollable().getScroller().scrollTo(0,0);
반응형