Repository

1 테마 패키지 생성 cmd : sencha generate theme myThemecmd 실행위치 : [APP_HOME]/1. 명령어 실행시 [APP_HOME]/packages/local 경로에 테마 패키지가 생성됨.2. [APP_HOME]/packages/local/myTheme/package.json 파일에서 네임스페이스를 blank로 설정 ↓↓ 3. [PACKAGE_HOME]/sass/var 폴더 하위에 Ext 폴더와 사용자 앱의 네임스페이스명(MyExtApp)으로 폴더생성. 두개의 폴더를 생성하는 이유는 위에서 package.json파일에서 namespace값을 "Ext"로 설정 할 경우 sencha cmd는 개발자가 앱에서 생성한 클래스는 무시하고 Ext에서 제공하는 기본적인 컴포넌트의 scs..

1 Ext.ux.IconsPanel Sencha Touch로 만든 ux 입니다. 기본 스마트폰의 화면처럼 아이콘들이 나열되어있는 화면을 ux로 만들어보았습니다.한 행에 생성될 아이콘 수 설정, 애니메이션 등 사용할 수 있도록 했고, 기본적으로 Sencha의 문법을 따라 store를 통하여 데이터를 가져오도록 설정했습니다. 생성될 아이콘의 숫자에 따라 자동적으로 화면에 표시되는 아이콘의 사이즈가 알맞게 변하게 되고, tap 이벤트의 중복을 피하기 위하여 IconsPanel을 사용할때에는 아이콘을 탭 할때 "icontap"이벤트가 발생되기 때문에 컨트롤러에서 해당 이벤트를 리스닝하면 탭 하였을때 이벤트 함수를 설정할 수 있습니다. 2 Store 구조 Store를 생성할때에는 다음과 같은 형식으로 데이터를 가..

Ext JS를 사용하면서 어떠한 모델의 데이터를 삭제해야하는 경우 저는 "erase"함수를 이용합니다.그런데 이 "erase" 함수를 사용할 때 모델에 설정해 두었던 idProperty를 지정해 주지 않으면 아무리 erase함수를 호출해도 모델에 설정한 destroy API가 호출이 되질 않았습니다. 때문에 항상 idProperty가 필요 하지 않은 데이터라도 불필요하게 idProperty를 강제로 선언하여 erase함수를 호출하고는 했습니다. 그런데!!!!! 강제로 idProperty를 설정 해두었는데도!! erase 함수가 동작을 안하는 상황이 발생했습니다. 도무지 어떻게 해결을 해야 할지 갈피를 못잡다 역시 구글신을 통해 해결법을 알게되었습니다. 우선 작성한 코드는 다음과 같습니다. 위에서 사용한 ..

1 CodeMirror textarea에 Syntax 하이라이터 효과가 필요하여 검색하는 도중 찾게되었습니다. 기본적으로 Ext JS에서 Htmleditor를 제공해주기 때문에 코드 하이라이터의 소스를 가공하면 Htmleditor에도 위와 같은 Syntax 하이라이터 효과를 입힐 수 있다고 합니다. 하지만 시간도 오래걸릴뿐더러 여러가지 오류덩어리를 양산해낼 수 있기때문에 누군가 자~알 만들어놓은 라이브러리를 가져다 쓰기로 했습니다. 코드는 매우 쉽습니다. 그저 textarea 컴포넌트에 Codemirror를 덮어씌워주기만 하면 되지요. 우선은 해당 Codemirror 라이브러리를 받을 수 있는 공식 홈페이지! Codemirror 홈페이지 : http://codemirror.net/ 라이브러리를 받았으면 ..

1 Ext Js Grid API를 보고 만든 가장 정석대로(제딴에는...) 만든 CRUD 코드입니다. CRUD에 많은 시간을 할애하고 가장 많이 쓰이는 Grid를 컨트롤하는 기술들이 굉장히 중요하다고 여기는 저에게는 그래도 하나하나 최대한 효율적으로 짜본 코드입니다. 혹시 이보다 더 나은 방법이 있다면 거침없이 태클걸어주세요. Link to github : https://github.com/Deoking/Extjs-notice 2 폴더구조 app model (게시판 모델 폴더) NoticeModel.js (게시판 레코드 모델소스 ) - 자바에서 DTO와 같은 개념 store view main (시작화면 폴더) main.js (메인화면 소스) MainController.js (컨트롤러 - 메인화면에서 발생..

1 ViewController의 lookupReference Ext Js로 샘플을 만들던 중 이상한 것을 발견했습니다. 뷰 컨트롤러에서 lookupReference 함수를 이용하여 지정된 뷰의 컴포넌트를 가져오는 코드였는데, 오타도 없고 분명 지정된 뷰에있는 reference임에도 불구하고 계속 null값을 던지는상황.. 혹시나 이 뷰가 아닌 다른 뷰를 참조하나 싶어 해당뷰에 한개의 reference를 더 추가하고 테스트 해봤는데.. 추가한 reference는 잘도 가져옵니다. 어쨌든 ! 해당 문제가 발생하는 코드는 다음과 같습니다. 코드의 상단에 주석처리한 부분만 보시면 됩니다. 확실히 뷰에서 컨트롤러를 지정하였고, reference도 설정했습니다. 이제 컨트롤러에서는 다음과 같은 방법으로 컴포넌트를 ..

1 Sencha CMD로 Ext JS 시작하기 Ext JS는 자바나 그 외 프레임워크같이 Jar파일 또는 Js 파일만 있어도 개발하는데 지장이 없다. 하지만 Sencha CMD라는 툴을 이용해 Ext JS 어플리케이션을 생성하게 되면 개발중 테스트나, 빌드등 여러 작업들을 명령어를 통해 수행할 수 있게되는 편리함이 있다. 우선 Sencha CMD 를 다운받을 수 있는 링크이다. Sencha CMD : http://www.sencha.com/products/sencha-cmd/ Sencha CMD를 설치하고 앱을 빌드하기 위해서는 루비가 필요한데 각 운영체제 비트수에 맞게 설치하면된다. Ruby on rails : http://rubyinstaller.org/downloads/ Sencha Cmd와 Rub..

1 파일업로드시 Ext JS 프로세스 Ext JS에서 파일업로드를 구현하던중 알지못하는 애러가 계속 터졌다. 분명 서버에서 제대로된 JSON Response를 리턴했는데 계속 잘못된 JSON String이라며 디코딩할 수 없다는 요상한 결과가 떨어졌다. 처음에는 서버에서 리턴하는 Map 데이터가 스프링의 JacksonMassageConverter를 거쳐 JSON 형식으로 변환해주는 것이 뭔가 잘못되었나 싶어 로직처리후 리턴되는 결과를 JSON 형식의 String으로 리턴을 해보았다. 그 결과 정상적으로 동작하는 것을보고 스프링의 메시지 컨버터가 이상한거였구나 하고 넘겼는데.. API를 살펴보고 여러 테스트를 한 결과 내 손톱만한 지식이 잘못된거라는 알게됬다. 우선 API의 내용은 이러하다. hasUplo..

1 소스정보 스토어의 Proxy를 사용하지 않고 Ajax request만 사용해서 작성한 저장용 코드. 현재 코드는 실제 서버와 통신하여 데이터를 불러오고 저장함. 그리드를 Grid가 아닌 Tree로 생성하여 트리그리드 형식으로 구성했고, 그리드 하단에 폼이 있어 해당 그리드에서 클릭한 내용이 폼에 바인딩되게 해놓음.각각 대분류추가 및 소분류 추가는 상이한 폼을 생성함.정리하고 수정해야할 부분 많음... 2 View source 3 Controller source

1 Proxy api update 사용시 파라미터 전송 모델에 프록시를 정의하고 프록시 내에서 update URL을 호출할 때 문제가 발생했다.update할 모델을 생성하고 save 메소드를 호출했는데 모델을 생성할때 세팅한 파라미터가 안넘어가고 그 모델의 id값만 넘어가는 상황이 발생했다. 구글 검색해보니 내가 못찾는건지 아니면 이렇게 사용하는 사람이 드문건지 파라미터 넘기는 방법이 안나온다. 그나마 나왔던 정보들은 전부 proxy에다 setExtraParams 메소드를 이용해 추가 파라미터를 지정하는 방법만 나온다.. 그래서 구글링 포기하고 그냥 무작정 API만 뒤졌다. 결국 찾아냈는데. 너무 간단한 설정이다 ㅋㅋㅋㅋ 밑의 코드처럼 설정 하면 server에서 파라미터를 받을때 모델에 정의 해놓았던 필..

1 스토어에 로드된 데이터 가져오기 Ext JS에서는 스토어를 로드할 때 로드된 데이터를 받아올 수 있는 방법들을 제공한다. 그것도 너무나 많은 방법을 제공해준다. 하나 외워두고 검색해보면 다른방법으로 데이터를 가져오는 자료가 너무도 많아서 외웠던 방법마져 햇갈리게 된다. 어쩔 수 없이 그냥 보이는 족족 블로그에 넣어놔야겠다. 그 중 가장 나은 방법을 골라 써야하는데 뭐가 나은지도 모르겠다. 스토어에서 load 메소드를 호출하고 매개변수로 오브젝트를 부여할 수 있다. 그 오브젝트 내에 callback 이란 이름으로 함수를 지정해 놓으면 그 함수는 load 메소드가 종료된 후 콜백 메소드로 실행되게 된다. 그때 콜백 메소드에는 세개의 인자가 자동으로 들어오게 된다. 그 세개의 인자를 통해 로드된 데이터를 ..

화면마다 다른 검색툴바를 만들어야하는 일이 생겼다. 일일이 화면에 코딩하기도 번거러울 것 같고, 한번 만들어두면 두고두고 써먹을거 같아서 만들어 봤다. 단지 내가 필요해서 만든거고 코드도 완벽하지 않다. 차후 Ext JS를 더 깊이 이해하면 완벽하게 만들 수 있겠지 뭐.. 필요한건 검색툴바에 들어가야 할 xtype 이름들 뿐이다. 데이터를 불러올때 이 데이터를 사용하는 화면에서 쓸 xtype의 이름들을 같이 보내주면 된다. 아직은 너무나도 미완성이라 필요한 콤보박스나 체크박스, 라디오 버튼등이 필요하면 컴포넌트를 만들어서 추가해야한다 ㅋㅋㅋ 1 View source 우선은 xtype 이름이 담겨있는 배열을 받아서 툴바로 만들어주는 클래스소스이다. 이름은 내맘대로 툴바메이커로 정했다. 로직은 단순하게 xt..

1 glyph를 이용한 아이콘삽입 Ext JS에서는 "glyph" 라는 프로퍼티를 이용하여 아이콘을 넣을 수 있다. 탭이건 그리드이건 헤더부분에 이쁘장한 아이콘이 생기면 더 세련되 보이기도 하고, 각각 컴포넌트의 특징을 쉽게 파악 할 수 있을것 같다. 한가지 더 좋은점은 버튼같은 컴포넌트에서 "iconCls" 프로퍼티를 사용 안해도 된다는거다. 크기도 조정해야하고, 여러가지 번거러운 작업등을 안해도 된다는건 가장큰 메리트인것 같다.Ext JS에서 glyph를 사용하기 위해선 몇가지 작업을 해야한다. CSS 파일의 경로도 등록해 주어야하고, glyph로 사용할 아이콘들도 준비해야한다. 특이한건 이 glyph 에서 사용하는 파일들이 이미지나, ico같은 아이콘 파일이 아닌 폰트라는 점이다. eot, woff..

rowexpander 플러그인을 사용해서 하나의 로우를 확장하면 그안에 새로운 그리드가 존재하는 방식이다.. 가장 필요하면서 가장 알맞은 형태의 그리드인데 문제가 한두개가 아니다. 심각한 문제가.. 자식 그리드가 생성된 후 부모 그리드의 정렬을 하면 자식그리드가 사라지는가 하면 Height 설정을 안하면 그리드가 짤려서 나온다. Height 설정을 안했으니 사이즈 넘어가면 당연히 잘리는건가 싶었는데 브라우저 크기를 줄였다 키우니 원래대로 나온다.... 이문제는 Height 설정을 해주면 해결 되는데 문제는 나머지 것들이다. 자식그리드가 사라지는것을 포함해서 자식그리드에서 클릭이벤트가 발생하면 콘솔창에 애러가 발생한다. 이 콘솔창 애러는 왜그러는가 싶어 구글링 해봤더니 외국인 개발자형님들도 해결못해 안달이..

그리드 안에 중첩 그리드를 생성하는 것 까지는 성공햇는데 그 이후가 문제여서 방향을 돌렸다.. 그리드 안에 중첩된 그리드에서 발생하는 이벤트가 부모 그리드와의 이벤트와 충돌가능성이 너무나 많아서 지금의 나로서는 도저히 해결을 할 수가 없다.. 그래서 Ext 에서 중첩그리드는 지원해주지 않나보다. 지원해주지도 않는거 억지로 해보려고 구글링을 몇시간동안 해봐도 돌아오는건 피꺼솟 밖에 없다.. 그래서 지금 만들어 본 Summray 그리드. 또는 그리드 옆에 그리드 하나를 더만들어서 A그리드에서 클릭하는 데이터를 B 그리드에 바인딩 되게하는 방식들을 생각해 봤다. 두번째 방법은 내일 구현해봐야지.. 우선적으로 원하는건 그루핑 된 데이터들의 정렬 및 클릭 이벤트를 원하는 것이니 지금 해본 Summary 그리드는 ..

1 중복 탭 생성 방지 탭을 생성할 때 만약 탭의 ID가 중복될 경우 당연히 애러가 발생한다. 컴포넌트를 생성할 때 ID값을 명시적으로 작성하지 않을 경우 Ext JS에서 자동으로 중복되지 않는 ID 값을 부여하지만 만약 명시적으로 작성하였을 경우 잘못하다간 ID가 중복되버리는 경우가 발생한다. 특별한 경우가 아니라면 ID값을 중복되게 작성하지는 않겠지만 의도치 않게 이런 상황이 발생시 미연에 방지하기 위해 중복체크 후 탭 생성 코드 작성해놓음..이 코드는 트리패널에서 각각의 트리 노드를 클릭했을 때 발생하는 이벤트로 트리노드를 클릭하면 탭패널이 중앙화면에 생성되는 로직이다.

그리드를 생성하고 하나의 레코드를 클릭하면 그 안에 다른 그리드를 생성해야 할 일이 생겼다. Ext 예제 중 SubTable 플러그인을 이용하면 되는데.. 이게 하나의 "그리드"를 또하나 생성하는 것이 아니라 그 안에 을 써서 그냥 표를 표현할 뿐이었다. 모양은 비슷하나. 할 수 있는 기능이 천지차이여서 써먹을 수 있을지 모르겠는데 우선 만들어 봤으니 기록해 둬야겠다. SubTable.js 를 지금 내 수준에서는 도저히 뜯어고칠 수가 없다 ㅋㅋ.. 다른 예제를 찾아봐야 할것같기도 하다.우선 SubTable.js의 코드는 다음과 같다. 1 SubTable.js Source 플러그인을 사용할때 ptype이라는 설정을 사용하는데 alias: 'plugin.subtable'이렇게 정의를 해놓으면 ptype으로 ..

무엇보다 서버에서 세션이 종료되었을 경우 자동으로 "세션이 종료되었다" 하고 클라이언트에 알려주는게 최고이겠지만.. 그러려면 푸시 서버를 구성해야 한다.. HTML 5의 웹소켓 기술을 사용하더라도 사용자들이 모두 HTML5를 지원하는 브라우저를 사용하는것도 아니니 그냥 Ext JS의 DelayedTask를 이용해서 세션체크 기능을 구성해 보았다. 대강 흐름은 세션체크 클래스는 싱글턴으로 구성하고, 최초 어플리케이션이 로딩될 때 딱 한번 초기화한다. 싱글턴으로 구성했기 때문에 차후 세션체크 클래스를 Ext.create() 로 생성하려 하다간 애러를 뱉어내게 된다. 초기화된 세션체크 클래스는 세션을 종료하는 URL(로그아웃 URL)이 아닌 그 외의 모든 URL 호출이 있을경우 이벤트 리스닝을 통하여 실행되게..

1 Session Storage HTML5에서 제공하는 저장소중 하나. 다른하나는 Local Storage이다. 하지만 지금 필요한건 Session Storage이기때문에 Local Storage는 나중에.. 근데 사용법같은건 동일한것같다. 우선 Session Storage는 이름 처럼 각각 Session 단위로 데이터를 저장한다. 브라우저를 열때마다, 즉 하나의 윈도우가 생성 될때마다 생성된다. 이렇게 생성된 Session Storage끼리는 서로 공유도 안될 뿐더러 윈도우를 종료하는순간 모든 데이터가 지워지게 된다. 보안상 노출되어도 되는것, 잠깐 저장했다 지워야하는 것들을 저장하면 될거같다. 2 Model Source Ext JS에서 Session Storage를 사용하기 위해 모델을 만들었다. 일..

1 Sencha CMD Ext JS에서 Chart를 이용하기 위해서는 Sencha 에서 제공하는 "ext-charts" 패키지를 빌드해야한다. 이 패키지를 빌드하지않고 그냥 차트를 가져다 쓰려고하면 "차트가 어딨는지도 모르겠고 정의된것 같지도 않다"의미를 담은 애러메시지를 띄우게 된다. 다음과 같이 커맨드창에서 "ext-charts" 패키지의 경로로 이동한다. 이동 후에 다음의 명령어를 실행. sencha package build 빌드가 완료되면 자신의 앱의 Home 경로로 가서 앱 리프레시를 위해 다음의 명령어 실행. sencha app refresh Sencha CMD에서 할일은 이게 끝이다. 여기까지 하면 "ext-chart" 패키지를 사용하기 위한 사전준비는 끝났음. 2 app.json Sourc..

1 View Source 체크박스 그룹을 통하여 체크박스데이터를 표현할 뷰이다. items 속성에 체크박스에 대한 내용은 없다. 데이터를 로드하면서 생성할것이다. View(컴포넌트)의 initComponent 속성을 이용하지 않고 View가 렌더링이벤트를 일으키면 담당 View Controller가 이를 감지하고 체크박스를 생성하도록 한다. 2 View Controller Source View가 렌더링이벤트를 발생시키면 이를 감지한다. Controller를 보면 init 속성에 'menus-v'항목은 View에서 지정한 xtype이다. 즉 뷰에서 afterrender 이벤트가 발생되면 정의된 함수가 실행되게 된다. var menus = this.getViewModel().getStore('menuList..

1 Controller event listening Controller사이에서의 이벤트 리스닝은 해당 Controller가 View Controller이건 Global Controller이건 상관없다. 하나의 컨트롤러에서 fireEvent를 호출하면 다른 하나의 컨트롤러에서는 발생된 이벤트를 리스닝한다. 2 Controller 1 (Global Controller) 다른 Controller에서 발생되는 이벤트들을 전부 감지하는 Controller 정의 3 Controller 2 (View Controller) 이벤트를 발생시키는 컨트롤러 정의

1 클래스 정의 및 생성 자바스크립트는 클래스 기반의 언어는 아니다. 하지만 프로토타입 구조를 이용한 클래스 구조를 흉내 낼수가 있다. Ext JS는 이러한 작업을 쉽게 해주는 메소드들을 제공해준다. Ext Js에서 클래스를 생성하기 위해서 Ext.define 메소드를 제공해주는데 이 메소드는 문자열 기반 정의를 사용하기 때문에 네임스페이스 충돌을 피해 클래스 정의를 유연하게 할수 있게 해준다. Ext.define 메소드는 세개의 인자를 전달 받는데 첫번째 인자로 정의될 클래스의 이름을 문자열로 받게된다. 두번째는 해당 클래스의 몸체가 되는 속성 및 메소드를 오브젝트 형태로 받는다. 마지막 세번 째는 이 클래스가 정의된 후 동작하는 콜백함수를 받게 된다. 이러한 구조를 따라 클래스를 정의하면 다음과 같은..

1 Javascript 상속 java에서의 상속과 기능면으로 같은 javascript의 상속구현 코드이다.부모형이라 할수 있는 Member 함수를 SubMember 함수가 상속을 한다 -> Member함수의 age변수와, getAge()함수를 가지게 된다. SubMember()함수에서 보이는 첫번째 구문 base는 상위 객체를 선언하는 키워드이다. 자신의 상위 객체가 Member라것을 선언그리고 base를 ()실행을 하였다. 이렇게 되면 base는 Member라는 함수의 코드가 저장되어있고 그 코드가 실행되었기 때문에 Member의 변수와 함수를 SubMember가 가지게 된다. Member의 prototype과 SubMember의 prototype을 공유함으로써 SubMember의 prototype에 ..

1 Javascript 캡슐화 캡슐화란 java에서 클래스내의 멤버 변수들을 외부로부터 숨기는 것을 말한다.javascript 역시 같은 기능을 하는 캡슐화 기법이 존재한다. function Member내의 지역변수 age는 Member함수가 끝나게 되면 사라지게 된다. 이것을 이용하여 캡슐화 기법을 구현할 수 있는데var m = new Member(10) 구문이 끝나면 지역변수 age는 사라지게 되기때문에 직접적으로 "m.age" 같이 접근을 할 수가없다. 하지만 함수내에 age를 참조하고있는 다른 내부함수들이 존재한다면(getAge(), setAge()와 같은..) age는 표면적으로는 사라지지만, 내부적으로는 계속하여 존재하게 된다. 그렇게때문에 getAge와 setAge로 지역변수인 age를 제어..

1 Javascript의 객체생성 자바스크립트에서 객체를 생성하는 방법은 3가지가 있다. 2 첫번째 방법 {}를 이용한 일반적인 객체생성 위같은 코드로 객체생성시 한번밖에 사용하지 못한다는 단점이 존재한다.(고로 단한번밖에 사용하지 않을 객체라면 첫번째 방법을 사용해도 무방) 3 두번째방법(객체지향적)과 세번째방법(함수지향적) 위와 같은 코드로 객체를 생성시 일반 객체지향 언어에서와 같이 객체의 반복 사용이 가능하다.객체지향적으로 생성한 객체는 JAVA나 C++과 같이 new연산자를 이용하여 객체생성이 가능하다.하지만 여기서 객체지향적 객체생성과 함수지향적 객체생성 모두 문제점을 가지고있다. 위의 두방법 모두 객체를 생성시 객체마다 함수를 새로 생성하게 된다.(getAge와 getName) 그렇기 때문에..