VoidNoble IT Zone

공식 사이트에서 제공하는 서론을 보면 *.sass파일 Compass 컴파일, Ruby, RubyGems 가 등장한다. SASS와 Compass는 CSS3 에서 변수도 사용하고... 프로그래밍을 가능하게 해주는 것으로 보인다. 컴파일 하여 스타일시트 결과물을 얻는 CSS3의 사촌간이라고 판단하고 넘어간다. 해외 사이트에서 튜토리얼을 발견했다. 문법도 있고 제법 골때려주신다. Sencha Touch 테마를 다루기 위해서는 준비물이 필요한 것이군... Ruby, RubyGems, Compass를 설치해야 한다. 개발환경: Windows 에서의 설치법을 다룬다. Ruby의 홈은 이곳인데 다운로드받으러 이동한다. 환경이 Windows인 관계로 해당 섹션을 찾아 스크롤을 내린 뒤 Ruby 1.8.6 원클릭 인스톨러..

Sencha Touch2 MVC 코딩중... /theApp/app/view/etc.js Ext.define('theApp.view.etc', { extend: 'Ext.List', requires: [ ' theApp.view.etc.ListItem.js' ] ...... }); 했더니 Ext.createByAlias Cannot create an instance of unrecognized alias 오류를 받았다. 해결은? 위 코드에서 etc와 etc는 달라야 한다. 아래와 같이 변경해서 해결하였다. ListItem.js 가 있는 폴더의 이름을 etc 에서 Etc 로 변경하였다. (자바스크립트는 대소문자를 구분한다.) Ext.define('theApp.view.etc', { extend: 'Ext.L..

MVC 환경에서 [WARN][Anonymous] [Ext.Loader] Synchronously loading 'app.view.Viewport'; consider adding 'app.view.Viewport' explicitly as a require of the corresponding class 오류 발생시 아래와 같이 views: 에 추가하니 사라졌다. Ext.application({ views: [ 'Viewport' ] }); 다른 이유와 해결법이 발생하면 추가예정.

index.html 와 같이 app.js 를 구동하는 페이지의 에 와 같이 정의 해 주면 된다.

SDK 에서 제공되는 샘플 중 /examples/toolbars/app.js 의 부분 입니다. 최종 목적은 아래와 같이 보여지게 하는것입니다. Ext.application({ // 앱 이름 name: 'bottomToolbarApp', // 앱 실행 main() 함수 같은 역할 launch: function() { // 보이는 영역에 구성요소를 추가합니다 Ext.Viewpot.Add({ // 뷰팟에 추가되는 구성요소들을 이 안에 기술. // 구성요소가 하나면 items: { } 로 해도 됩니다. items: [ // 툴바 구성요소 추가 { // 툴바 형식 xtype: 'toolbar', // 화면의 아래에 붙어있게 합니다. 자바 GUI 구현과 비슷. docked: 'bottom', // 가로 스크롤 가능..

xtype은 컴포넌트 클래스명입니다. 컴포넌트가 뭔지는 아래 xtype 목록의 이름들을 보면 감이 옵니다. iOS에서 등장하는 액션시트도 있고 웹프로그래밍시 항상 보던 이미지, 라벨, 폼 요소 등도 있습니다.xtype Class ----------------- --------------------- actionsheet Ext.ActionSheet audio Ext.Audio button Ext.Button component Ext.Component container Ext.Container image Ext.Img label Ext.Label loadmask Ext.LoadMask map Ext.Map mask Ext.Mask media Ext.Media panel Ext.Panel segmentedb..

아래 경로에서 '/' 는 Sencha Touch SDK 압축 푼 루트경로를 의미합니다. 테마(CSS)에 따라 다르지만, sencha-touch 테마 사용시 /resources/css-debug/sencha-touch.css 을 편집기로 열고 $include-default-icons 로 내부 검색을 하면 아래에 기본 아이콘으로 사용할 수 있는 이름 목록이 기술되어 있다. action add arrow_down arrow_left arrow_right arrow_up bookmarks compose delete download favorites home info locate maps more organize refresh reply search settings star team time trash user ..

여기서 제목과 본문에 칭하는 '포함'은 프레임웍이나 라이브러리를 포함하는 php의 include() 나 c의 #import 등과 같은것입니다. Sencha Touch 2에서는 application 내부나 클래스 안에서의 두가지 주요한 포함법이 가능하다. 앱에서 포함을 선언 하는 몇가지 방법을 알아봅시다. Application 포함MVC 프로그램 제작시, Ext.application에 모델, 뷰, 컨트롤러, 스토어와 프로파일 선언이 간편하다. 사례를 보죠: Ext.application({ name: 'MyApp', views: ['Login'], models: ['User'], controllers: ['Users'], stores: ['Products'], profiles: ['Phone', 'Table..

현재 버젼2는 베타인 관계로 http://www.sencha.com/blog/ 에서 최신 버젼을 받아서 루트 아래에 /touch/ 디렉토리를 만들고 그 아래에 압축을 풀어준다. 그 다음엔 http://docs.sencha.com/touch/2-0/#!/guide/getting_started 에 접근하여 그대로 따라 하면 된다.

Ext.setup({ tabletStartupScreen: 'tablet_startup.png', phoneStartupScreen: 'phone_startup.png', icon: 'icon.png', glossOnIcon: true, onReady: function() { Showtime.MasterPanel = new Showtime.MasterPanel(); } }); http://docs.sencha.com/touch/2-0/#!/api/Ext.app.Application-cfg-phoneStartupScreen