Repository

화면마다 다른 검색툴바를 만들어야하는 일이 생겼다. 일일이 화면에 코딩하기도 번거러울 것 같고, 한번 만들어두면 두고두고 써먹을거 같아서 만들어 봤다. 단지 내가 필요해서 만든거고 코드도 완벽하지 않다. 차후 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..