Sencha Touch 썸네일형 리스트형 [sencha touch] picker title button 수정하기 위와 같이 title의 Done버튼과 Cancel버튼을 한글로 수정해 보겠습니다. 이런것들을 수정하려면 datepicker가 뭘 상속받는지 extend 와 뭘 필요로 하는지 requires를 살펴봐야 합니다. 그럼 다음 파일로 이동해서 수정해 보겠습니다. touch -> src -> picker -> Picker.js Picker.js파일을 열고 applyDoneButton 메소드를 수정해 봅시다. applyDoneButton: function(config) { if (config) { if (Ext.isBoolean(config)) { config = {}; } if (typeof config == "string") { config = { text: config }; } Ext.applyIf(confi.. 더보기 [sencha touch] datepickerfield month 영문자 숫자로 변경하기 위와 같이 datepickerfield를 사용하면 month영역이 영문자로 나타납니다. 국내와 비영어권 국가에서 불편할 수 있으니 숫자로 바꿔봅시다. 이를 위해서 다음 파일을 수정해야 합니다. touch -> src -> picker -> Date.js Date.js파일을 열고 createSlots 메소드를 수정해 봅시다. for (i = 0, ln = Ext.Date.monthNames.length; i < ln; i++) {months.push({// text : Ext.Date.monthNames[i],text: i + 1, value : i + 1});} 위와 같이 숫자가 잘 나타납니다. month부분이 지나치게 비율이 넓어 안좋아 보이니 비율을 createSlot메소드에서 수정해 봅시다. cre.. 더보기 [sencha touch] custom icon 사용하기 sencha 2.2.1 에서는 pictos폴더에 이미지를 넣고 사용하면 됐었다. 아래 링크 설명(http://squll1.tistory.com/entry/sencha-touch-300%EC%97%AC%EA%B0%9C%EC%9D%98-icon-image-%EC%82%AC%EC%9A%A9%ED%95%98%EA%B8%B0) 2.3.1도 같은줄 알았는데 컴파일중 에러 발생.. 이제 @include icon를 사용해야 한다. 그리고 이미지 파일이 아니라 font파일을 사용.. 실습을 위해서 http://icomoon.io/app/방문후 폰트 파일을 다운해 보자 아이콘 선택후 하단 폰트 버튼 클릭 아이콘 옆에 화살표 모양 클릭 Reset codes버튼 클릭 그러면 ㅁ 으로 있던 공간에 문자가 생겼다. 이 문자가 해.. 더보기 [sencha touch] io7에서 titlebar가 status bar와 겹치는 현상 위와 같이 tiltebar와 ios7의 status bar와 겹치는 현상은 아래 소스를 추가하자 if (parseFloat(window.device.version) === 7.0) { document.body.style.paddingTop = "20px";} 네이티브단에서 해결하기(http://squll1.tistory.com/entry/ios-dev-ios7-status-bar-%EC%95%84%EB%9E%98%EB%A1%9C-%EB%B7%B0-%EB%82%98%EC%98%A4%EA%B2%8C-%ED%95%98%EA%B8%B0) 더보기 [sencha touch] tabpanel안 cardlayout 고찰 cardlayout에서 레이아웃에 담길 뷰들을 미리 담아 생성하는 경우들이 많다. Ext.define('xxx.view.Card1',{extend:'Ext.Panel',xtype:'card1',config:{layout:'card',items:[{xtype:'panel1'},{xtype:'panel2'},{xtype:'panel3'}]}}); 위와 경우 card1라는 이름으로 cardlayout의 패널을 생성후 그 안에 이미 정의한 panel1, panel2, panel3 을 생성해놓았다. 이럴경우 card1패널을 생성하고 card1패널이 보여진다면 panel1이 화면에 보여지게 된다. 그리고 panel1에 show함수를 등록했다면 show함수가 실행된다. 문제가 되는 경우는 다음과 같다. tab패널을 .. 더보기 [sencha touch] setRecord 오늘 일하다 실수한 부분을 정리 field에 데이터를 셋팅해주는 setRecord함수는 반드시 모델객체를 넣어주어야 한다. var data={name:'노준혁',gender:'male'}formpanel.serRecord(data);이러면 데이터 바인딩이 안된다. (model 폴더안에 PersonModel클래스를 정의 했다고 가정)var data=Ext.create('MyProject.model.PersonModel',{name:'노준혁',gender:'male'});formpanel.serRecord(data); 더보기 [sencha touch] theme 설정하기 이전 내용에서 scss파일을 수정하여 이미지 버튼과 버튼효과 버튼 색깔설정에 대해 경험해 보았습니다. 이번에는 sencha theme를 수정해보는 내용을 설명하겠습니다. sencha project를 생성하여 (project 생성방법 : http://squll1.tistory.com/entry/sencha-touch-mvc%ED%8C%A8%ED%84%B4-%ED%94%84%EB%A1%9C%EC%A0%9D%ED%8A%B8-%EC%83%9D%EC%84%B1%ED%95%98%EA%B8%B0 ) 실행을하면 다음과 같은 화면이 나타납니다. 이 파란 색깔이 마음에 드시는분도 있겠지만 저는 마음에 들지 않아 바꿔 보도록 하겠습니다. 그럼 resources -> sass -> app.scss 파일을 열어 줍니다. 파일을.. 더보기 [sencha touch] formpanel안에서 titlebar가 패널 안으로 들어가 있을때 formpanel안에서 다음과 같은 증상이 나타난다면 titlebar에 docked:'top' 속성을 추가하면 상단에 붙는다. 더보기 [sencha touch] 다양한 색깔의 button 만들어보기 다양한 색깔의 버튼을 만드는 방법도 scss파일을 사용하여 만듭니다. 이 scss파일을 다루는 방법을 조금만 익히면 sench touch잡업하는데 많은 도움이 될 것입니다. 간단한 코드 몇줄로 전체 theme을 수정하고 설정할 수 있습니다. 이 부분은 다음에 알아보기로 하고 오늘은 다양한 색깔의 button을 만드는 방법을 알아보겠습니다. scss파일을 열고 아래와 같이 추가해 봅니다. 첫번째는 사용할 이름을 설정합니다. 여기서는 black이란 이름으로 설정했습니다. 두번째는 버튼의 color를 설정합니다. 세번째는 버튼의 효과를 설정합니다. 효과로는 bevel, glossy, matte, flat이 있습니다. bevel glossy matte flat 다음과 같이 추가한 후 scss파일을 컴파일 합니다.. 더보기 [sencha touch] image button 만들기 지난번에는 버튼에 여러가지 icon을 넣는 방법을 알아봤었습니다. 이번에는 버튼이미지를 가지고 버튼을 만들어 보겠습니다. 일단 버튼모양의 이미지가 필요합니다. 이미지는 평상시 버튼이미지와 버튼을 눌렀을때의 이미지 두장이 필요합니다. 이미지는 http://www.iconfinder.com/에서 button으로만 검색해도 쉽게 찾을 수 있습니다. 이미지를 센차프로젝트안에 복사합니다. 어디에 넣든 경로만 알고 참조해 오면 상관 없지만 필자는 resources -> images 폴더안에 복사해 넣었습니다. 그리고 위 사진에서 sass폴더안에 scss파일에 해당 버튼이미지를 등록시켜 사용하면 됩니다. 전에 icon이미지를 사용할때도 설명했지만 프로젝트를 생성한후 기본적으로 적용되는 scss는 app.scss입니다.. 더보기 이전 1 2 다음
