본문 바로가기

Sencha Touch

[sencha touch] 자작 NumberPicker 직접 제작한 NumberPicker입니다. 그냥 키패드로 입력받아도 되지만 이렇게만 받아야 하는 상황이 있어 만들어봤습니다. 백의 자리까지 소수점은 첫째짜리까지 입력받습니다. 사용법은 다음과 같습니다. 일단 다운받은 파일을 아래 경로에 복사합니다. touch -> src -> ux -> field 그리고 view class에 다음과 같이 추가하여 사용하면 됩니다. 끝 더보기
[sencha touch] mvc패턴 프로젝트 생성하기 http://www.sencha.com/products/touch/download/ 로 이동해 센차 gpl버전을 다운받습니다. 그리고 http://www.sencha.com/products/sencha-cmd/download 들어가 cmd를 다운받습니다. cmd를 설치해야 mvc형식으로 프로젝트를 생성하고 빌드를 할 수 있습니다. 다운을 받아 압축을 풀고 설치를 합니다. 설치가 완료되면 터미널 창으로 띄운후 다음과 같이 입력해 sencha touch프로젝트를 생성합니다. sencha -sdk generate app 다음과 같이 프로젝트가 생성됩니다. 더보기
[sencha touch] sencha touch와 phonegap 연동시키기 sencha touch를 사용하다보면 네이티브 기능을 활용할때가 있다습니다. 센차터치에서도 네이티브 기능을 사용할 수 있지만 기능도 적고 phonegap은 수많은 플러그인이 있기 때문에 많은 기능을 쉽게 활용할 수 있습니다. 그리고 직접 네이티브 기능을 쓰는 플러그인도 만들 수 있습니다. 다음에는 직접 phonegap 플러그인 만드는 방법을 포스팅하겠습니다. 이 phonegap과 sencha touch를 연동하는 방법을 잘 모르시는분이 많아서 설명해 보겠습니다. 일단 폴더를 하나 만든후 폴더안에 2개의 폴더를 만듭니다. 저는 SenchaTouch라는 폴더를 만든 후 phonegap 폴더와 sencha폴더를 만들었습니다. phonegap폴더에는 phonegap프로젝트를 생성할 것이고 sencha 폴더에는 .. 더보기
[sencha touch] 300여개의 icon image 사용하기 sencha touch 에서 300개 이상의 icon을 제공한다. 하지만 기본적으로 쓸 수 있는건 20여개 정도다 이 300여개 icon 사용법을 알아보자 생성한 프로젝트 폴더안이나 다운받은 센차폴더안에 touch-> resources-> themes-> images-> default-> pictos 폴더안을 보면 수많은 icon이미지들이 있다. 이 아이콘을 센차에서 사용하는 방법을 살펴보자 우선 사용할 아이콘을 고른후 resources-> sass-> 사용자 scss파일(프로젝트 생성시 app.scss이 적용된다)에 쓰고 싶은 아이콘을 추가한다. 이 scss파일을 컴파일 해야 이 아이콘 이미지들을 사용할 수 있다. 컴파일을 하면 이 scss파일을 참조해 css파일을 생성합니다. 우리는 이 생성된 css.. 더보기
[sencha touch] calendar plugin 소개합니다. sencha touch 로 달력 구현은 이 플러그인이면 되겠네요 월간, 주간, 일간 까지 구현돼 있고 이벤트 추가시 달력에 표시까지 됩니다. Download : https://github.com/SwarmOnline/Ext.ux.TouchCalendar Documentation : http://www.swarmonline.com/Ext.ux.TouchCalendar/docs/ 더보기
[sencha touch]checkboxfiled color 바꾸기 sencha touch에서 checkboxfield색깔을 바꾸는 방법을 알아보겠습니다. 색깔을 바꾸려면 scss파일을 수정해야 합니다. 프로젝트파일안에 resources -> sass 폴더로 이동합니다. 현재 자신의 scss파일에 다음과 같이 추가 합니다. 2.2.1기준.x-field .x-input-radio:checked::after, .x-field .x-input-checkbox:checked::after { background-color: #555; //checkbox color를 설정합니다.} 2.3.1기준.x-input-el:checked + .x-field-mask::after { color: #555; //checkbox color를 설정합니다.} 더보기
[sencha touch]tabbar animation 없에기 sencha touch 탭바를 만들면 기본적으로 slide에니메이션이 적용되 있다. 이를 없에기 위해서는 view의 tabbar패널의 config안에 layout:{animation:false}를 넣어준다. 더보기