NumberPicker.js


직접 제작한 NumberPicker입니다.


그냥 키패드로 입력받아도 되지만 이렇게만 받아야 하는 상황이 있어 만들어봤습니다.



백의 자리까지 소수점은 첫째짜리까지 입력받습니다.


사용법은 다음과 같습니다.


일단 다운받은 파일을 아래 경로에 복사합니다.


touch -> src -> ux -> field



그리고 view class에 다음과 같이 추가하여 사용하면 됩니다.




line chart의 최근 데이터는 그래프의 끝에 위치하게 되서 점도 반절정도 잘리고 선택하기도 좀 불편할때가 있다.



이 chart의 마지막 점을 한칸 앞으로 당기는 방법은 마지막 데이터에 'nan'(Not A Number)값을 넣어주면 된다.


정리하면 데이터 저장후 마지막 데이터에 nan값을 추가로 넣어주고 다시 데이터가 삽일될때 마지막 데이터에 정보를 저장 후


다시 nan값을 마지막에 추가로 넣어준다.


마지막이 빈공간으로 표현되 한칸 앞으로 당겨진 효과가 나타나난다.



로컬스토리지에 저장된 데이터를 보면 다음과 같다.




http://www.sencha.com/products/touch/download/ 로 이동해 센차 gpl버전을 다운받습니다.




그리고 http://www.sencha.com/products/sencha-cmd/download 들어가 cmd를 다운받습니다.



cmd를 설치해야 mvc형식으로 프로젝트를 생성하고 빌드를 할 수 있습니다.


다운을 받아 압축을 풀고 설치를 합니다.


설치가 완료되면 터미널 창으로 띄운후 다음과 같이 입력해 sencha touch프로젝트를 생성합니다.


sencha -sdk <다운받은 sencha gpl폴더경로> generate app <프로젝트 이름> <프로젝트가 생성될 경로>



다음과 같이 프로젝트가 생성됩니다.


sencha touch를 사용하다보면 네이티브 기능을 활용할때가 있다습니다.


센차터치에서도 네이티브 기능을 사용할 수 있지만 기능도 적고 phonegap은 수많은 플러그인이 있기 때문에 많은 기능을 쉽게


활용할 수 있습니다.


그리고 직접 네이티브 기능을 쓰는 플러그인도 만들 수 있습니다.


다음에는 직접 phonegap 플러그인 만드는 방법을 포스팅하겠습니다.


이 phonegap과 sencha touch를 연동하는 방법을 잘 모르시는분이 많아서 설명해 보겠습니다.


일단 폴더를 하나 만든후 폴더안에 2개의 폴더를 만듭니다.



저는 SenchaTouch라는 폴더를 만든 후 phonegap 폴더와 sencha폴더를 만들었습니다.


phonegap폴더에는 phonegap프로젝트를 생성할 것이고 sencha 폴더에는 sencha touch프로젝트를 생성할 것입니다.


같이 관리하기 쉽게 하기 위해서 한폴더 안에 생성했습니다.


우선 phonegap프로젝트먼저 생성해 보겠습니다.


http://phonegap.com/ 사이트로 가서 phonegap을 다운받습니다.





다운을 받은 후 압축을 풀고 


아래 그림과 같은 경로로 들어가보면 bin폴더가 있습니다.





이제 터미널창으로 이용해서 프로젝트를 생성해 보겠습니다.


터미널을 띄우고 위의 bin경로로 이동합니다.


쉽게 이동하는 방법은 cd를 입력후 bin폴더를 터미널창에 끌어다 놓거나




bin 폴더를 바로 터미널 실행아이콘으로 끌어다 놓는 방법이 있습니다.



이렇게 이동후 프로젝트를 생성하는 방법은 다음과 같이 입력합니다.


./create <프로젝트가 생성될 폴더> <페키지 이름> <프로젝트 이름>



다음과 같이 ios phonegap 프로젝트가 생성됩니다.



이제 phonegap의 www폴더안에 있는 cordova파일을 sencha 폴더로 이동하고 기존의 www폴더는 삭제합니다.






이제 sencha 프로젝트를 생성해 연동시켜보도록 하겠습니다.


http://www.sencha.com/products/touch/download/ 로 이동해 센차 gpl버전을 다운받습니다.




그리고 http://www.sencha.com/products/sencha-cmd/download 들어가 cmd를 다운받습니다.



cmd를 설치해야 mvc형식으로 프로젝트를 생성하고 빌드를 할 수 있습니다.


다운을 받아 압축을 풀고 설치를 합니다.


설치가 완료되면 터미널 창으로 띄운후 다음과 같이 입력해 sencha touch프로젝트를 생성합니다.


sencha -sdk <다운받은 sencha gpl폴더경로> generate app <프로젝트 이름> <프로젝트가 생성될 경로>



다음과 같이 프로젝트가 생성됩니다.



이제 생성된 파일중 app.json파일을 수정해야 합니다.


app.json파일을 열어 이전에 phonagap폴더에서 가져온 cordova.js파일을 추가해줍니다.




이제 마지막으로 phonegap 폴더안에 www폴더를 생성해야 합니다.


터미널 창에서 다음과 같이 입력합니다.


ln -s <sencha 프로젝트 경로> <phonagap 프로젝트 경로 /www>


다시 말하면 ln -s를 입력 후 처음에 한폴더에 생성한 두개의 프로젝트중 sencha 프로젝트를 터미널창에 끌어다놓고 다음으로 


phonegap프로젝트를 끌어다 놓은후 뒤에 /www를 붙어주고 입력합니다.



이렇게 입력하면 phonagap폴더안에 www폴더가 생성되고 이 폴더안에 sencha폴더 내용이 들어있습니다.





이제 xcode를 열고 실행해 보면




다음과 같이 잘 연동되는걸 확인할 수 있습니다.




안드로이드도 같은 방식으로 하면됩니다.


다운받은 phonegap폴더 lib->android->bin 폴더를 가지고 아이폰과 같은 방식으로 프로젝트를 생성후


./create <프로젝트가 생성될 폴더> <페키지 이름> <프로젝트 이름>


assets 폴더안에 www폴더를 생성하면 됩니다.


ln -s <sencha 프로젝트 경로> <phonagap 프로젝트 경로 /www>

sencha touch 에서 300개 이상의 icon을 제공한다.


하지만 기본적으로 쓸 수 있는건 20여개 정도다 이 300여개 icon 사용법을 알아보자


생성한 프로젝트 폴더안이나 다운받은 센차폴더안에 touch-> resources-> themes-> images-> default-> pictos 폴더안을 보면


수많은 icon이미지들이 있다.




이 아이콘을 센차에서 사용하는 방법을 살펴보자


우선 사용할 아이콘을 고른후 


resources-> sass-> 사용자 scss파일(프로젝트 생성시 app.scss이 적용된다)에 쓰고 싶은 아이콘을 추가한다.




이 scss파일을 컴파일 해야 이 아이콘 이미지들을 사용할 수 있다.


컴파일을 하면 이 scss파일을 참조해 css파일을 생성합니다. 


우리는 이 생성된 css 파일을 사용하게 되는 것입니다.


터미널 창에서 sass폴더로 경로를 이동합니다.


이동방법을 모르면 cd를 입력후 해당 폴더를 터미널 창에 끌어다 놓습니다.




그리고 compass compile <scss파일이름>을 입력해 컴파일 합니다.



컴파일이 끝나면 이미지를 사용할 수 있습니다.


사용은 iconCls에 추가한 이미지 이름을 그대로 사용하면 됩니다.





다음과 같이 추가된 icon 이미지가 나타납니다.




sencha touch 로 달력 구현은 이 플러그인이면 되겠네요


월간, 주간, 일간 까지 구현돼 있고 이벤트 추가시 달력에 표시까지 됩니다.


Download : https://github.com/SwarmOnline/Ext.ux.TouchCalendar


Documentation : http://www.swarmonline.com/Ext.ux.TouchCalendar/docs/ 




분명 store도 잘 지정해 주고 틀린곳이 없다고 생각하고 몇번이나 다시 봐도 이상이 없었다.


문제는 layout을 지정해 주지 않은것


layout을 fit으로 지정해 주니 리스트가 잘 나타났다.




작업을 하다보면 label의 width값이 글자보다 작아 글씨가 잘리는 경우가 발생한다.


이럴때 width값을 조정하려면 


laebelWidth로 설정해주면된다.






radiofiled는 선택이 하나만 되어야 한다.


이런증상이 발생한다면 name의 값이 각각 다르기 때문에 발생할 것이다.


name의 값을 통일하자





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를 설정합니다.

}

+ Recent posts