캘로셀 사용하기 (Using Carousels in Sencha Touch)

원본 :  http://docs.sencha.com/touch/2.2.1/#!/guide/carousel 번역본 :  http://sencha.or.kr/?p=1293 번역자 : 컴퓨터 공학과 양우현 탭과 같이 캘로셀은  여러개의 전체화면 페이지를 통해서 사용자가 두드릴 수 있는 좋은 방법이다. 하나의 캘로셀은 한번에 하나의 페이지를 보여주지만, 두드리는 행동을 함으로써 다른 페이지를 탐색 할 수 있습니다. 좌우로 넓게 펼처진 항목들의 나머지와 같은 하나의 활성 항목으로 캘로셀을 생각 할 수 있습니다. 표지 점들이(…)

저장소 이용하기 (Using Stores)

원문 : http://docs.sencha.com/touch/2.3.1/#!/guide/stores 번역문 :http://sencha.or.kr/?p=1267 번역자 : 고경환(제주대학교 컴퓨터공학과) Models 은 일반적으로 스토어와 함께 사용되고, 기본적으로 모델인스턴스 컬렉션 입니다. 저장소 설정과 데이터로드는 다음과 같이 수행합니다: Models are typically used with a Store, which is basically a collection of model instances. Setting up a store and loading its data is done as follows: Ext.create(‘Ext.data.Store’, { model: ‘User’, proxy: { type:(…)

[Sencha Touch / Ext JS] Loading… Mask 자동으로 표시하기

[Sencha Touch / Ext JS] Loading… Mask 자동으로 표시하기

안녕하세요. 김종광입니다. 이번엔 Sencha Touch/Ext JS 에서 Loading… 표시를 자동으로 show/hide 하는 방법에 대해 말씀 드리겠습니다. 소스코드 마다 Ext.Viewport.setMasked(…) 했다가 Ext.Viewport.setMasked(false) 하는건 여간 귀찮은 것이 아닙니다. 대부분 이러한 표시는 Ajax 통신 할 때 표시 합니다. Ajax 사용하지 않을 때는 그다지 느린 경우가 없으니 잘 사용 안하지요. 방법은 Ext.Ajax 객체의 Event 를 잡아서 show/hide 하는 것입니다.(…)

[Sencha Touch 성능] 안드로이드에서 formpanel 사용에 주의 하세요.

안녕하세요. 김종광입니다. 안드로이드에서 formpanel 사용 하실 땐 성능에 주의 하세요. 안드로이드 내장 브라우저(PhoneGap 포함)에서 formpanel 이 무척 느리게 동작 할 수 있습니다. 내껀 늘 느리고, Sencha 공식 예제는 늘 빠르다고 느끼는 것 중에 하나인데요. 여러가지 이유가 있지만, formpanel 의 경우 크게 차이가 나네요. [상황] 안드로이드 기본 브라우저(크롬 아님) 또는 폰갭에서 formpanel 이 Scrollable:true 상태로 스크롤(…)

[Sencha Touch] 실행 환경 확인하기 ( is Android? or iOS? )

[Sencha Touch] 실행 환경 확인하기 ( is Android? or iOS? )

안녕하세요. 꺽달이 김종광입니다. Sencha 에는 User-Agent 를 확인해서 어떤 환경에서 실행 되고 있는지 쉽게 파악 할 수 있습니다. (User-Agent 확인 하는 일이 은근 골치 아프죠.;;) 참조 URL : http://docs.sencha.com/touch/2.3.1/#!/guide/environment_package [OS 구분] iOS Android webOS BlackBerry RIMTablet MacOS Windows Linux Bada Other 그리고 ​iPhone iPad iPod Desktop Phone Table 이렇게 있습니다. 사용 방법은.. [브라우저 구분] Safari Chrome(…)

[Sencha Theme] .scss 컴파일 옵션 : config.rb 샘플

[Sencha Theme] .scss 컴파일 옵션 : config.rb 샘플

안녕하세요. 김종광입니다. Sencha Touch 나 Ext JS 테마를 변경 하실 때, .scss 파일을 다루셔야 합니다. .scss 다루는 방법 : https://www.sencha.com/blog/an-introduction-to-theming-sencha-touch Compass 가 .scss 파일을 컴파일 하는 방법은 config.rb 에 기록되어 있습니다. 제 config.rb 를 올려 두도록 하겠습니다. 이 파일에는 .css 가 생성 될 때, 어떤 scss 로 부터 만들어 졌는데 위치가 표시되고 귀찮은 .sass-cache 폴더 위치를(…)

Sencha Touch 에 외부 이미지 추가하기

안녕하세요. 김종광입니다. Sencha Touch 에 외부 이미지를 추가 하셔도 보통은 잘 작동 합니다. 하지만 이렇게 코딩 하시면 배포용 빌드(Production build) 하시면 a.png 파일이 포함되지 않습니다. 이럴 떄는 app.json 파일에 해당 폴더를 포함 시켜 주시면 됩니다. (물론 sass.scss 를 이용하셔도 됩니다만, 컴파일 해야 하고 복잡하지요 ^^;;) app.json 파일 107line 정도에 이런 주석이 있습니다. Extra resources to(…)

Ajax cross domain 문제, Chrome 시작 옵션으로 무시 하는 방법

Ajax cross domain 문제, Chrome 시작 옵션으로 무시 하는 방법

Sencha Touch 개발 할 때, Ajax 통신이 편리하다. JSONp 통신은 request 의 255자 제한이 있지 않은가? (긴 글을 작성 해서 전송 할 수 없다.) 그런데, Ajax 로 다른 도메인(cross domain)에 접근하면 문제가 발생한다. (CORS를 이용하여 해결하는 방법도 있지만, 귀찮아서..;;;) 이는, 브라우저에서 보안상 막는 것으로 간단히 브라우저 시작 옵션으로 disable 시킬 수 있다. 하이브리드앱을 위해 PhoneGap(…)

[Sencha 객체 비교] Container vs. Panel 어떤 것을 써야 하는가?

안녕하세요. 김종광입니다. 가장 자주 쓰는 객체인 Container 와 Panel 에 대해 비교 해 보겠습니다. 사실 별 차이가 없어서 구분 없이 쓰기도 하는데요. 어느 정도 차이가 나는지 보도록 하겠습니다. 먼저 Ext JS 의 경우 입니다. 당연히 Panel 보다는 Container 를 쓰셔야 합니다. Hierarchy를 보시면 container 가 panel 보다 상위 객체 이지요. 상속 구조에서는 자식이 항상 기능이(…)

Ext JS 5 beta 출시!!

안녕하세요. 한국센차유저그룹의 김종광입니다. Ext JS 5 beta 가 출시 되었답니다.!! Blog : http://www.sencha.com/blog/announcing-public-beta-of-ext-js-5/ Guides : http://docs.sencha.com/extjs/5.0.0/index.html What`s New in Ext JS 5 : http://docs.sencha.com/extjs/5.0.0/whats_new/5.0/whats_new.html 메이져 업그레이드 답게 많인 기능들이 추가 되었는데요. 저는 그중에서도 Touch 제스쳐의 지원이 가장 반가웠습니다!! 사실 Ext JS가 Desktop 용 이긴 하지만, 워낙 코딩이 잘 되어 있어서 Mobile/Tablet 에서 봐도 문제가 없이 깨끗이 나왔었습니다. 단(…)

Leather Throw Pillows