Sencha touch 2.0 Migration

버전에 따른 개발 방식 변화

1. ExtJS4 스타일의 MVC 패턴으로 앱을 만듬
   • 모델, 뷰, 컨트롤러를 따로 클래스 정의하여 사용함.
2. 앱의 entry point 변경
   • 센차 1.0 → Ext.onReady 함수사용
   • 센차 2.0 → Ext.application 함수.
3. 객체 생성시, 생성자 호출 문법 변경됨. → Ext.create('Ext.Panel', { … });
4. 탭패널에서 bottom 탭 생성하는 문법 변경됨. → tabBarPosition 프로퍼티가 새로 추가.
5. 패널에서 툴바 생성시 dockedItems 프로퍼티 없어짐. → items 안에 툴바도 같이 넣고, 해당 툴바의 속성중 docked를 top선언.
6. model 선언부분 변경됨. → 클래스 상속받아서 정의해야 함.
7. Ext.data.JsonPStore 는 센차 내부에서만 사용됨 → Ext.Data.Strore 를 사용하고, proxy의 type, reader 의 type 등을 알맞게 선택하여 사용한다.
8. 기존에 탭바 안에서, 리스트를 패널에 붙여서 사용했지만, 이제는 리스트를 패널에 붙여서 탭바에서 보여주면 화면에 나오지 않는다. → 리스트 자체의 아이템으로 툴바를 가지고 있으면 되고, 이 리스트 자체를 탭바의 아이템으로 사용하라. → 5시간 동안 삽질해서 알아냈음.
9. 패널에 탭이벤트 등을 넣고자 할때, initialize 함수 안에서, this.body.on('tap', function() { alert('hi')}); 이런식으로, body에 on메소드 사용.
10. 각 패널에 html의 스타일을 원하는 대로 적용할 수 있다. styleHtmlContent, style, styleHtmlCls 를 참고 바람.
11. 패널의 바디에 탭 이벤트를 처리하고, 그 이벤트에서 태그이름을 비교하고, 태그 이름의 속성에 필요한 값을 정의하여 사용하는 방법.

    • 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'));
      		        }
      	});

12. 로컬스토리지 사용시 주의!
    • 로컬스토리지 사용하여, 데이터를 저장할때, store.sync() 가 아닌, model객체에 저장할 스트링을 담아서 생성하고, model.save()함수 이용
    • http://docs.sencha.com/touch/2-0/#!/api/Ext.data.proxy.LocalStorage
13. xtype 중 form 이 formpanel 로 변경되었음. 클래스는 Ext.form.Panel 을 사용함.
    
    

    참고자료

    • ExtJS4 아키텍쳐 설명
    • 센차2.0 다큐먼트