일반적으로 많은양의 데이터 목록을 출력할 경우, ExtJS외에도 다른 그리드제품에서 버벅이는 현상이 존재합니다.물론, 미리 이 문제점을 감지하고 개선을 하여 부드럽게 데이터 출력을 하는 그리드제품들도 다양합니다.ExtJS 4.2 부터 그리드에 발생되었던 BigData 부분이 개선되어 그동안의 대용량 데이터에 대한 문제점이 해결되었습니다. 그리드에 많은 양의 데이터 목록을 출력할때, 버벅이는 현상들이 나타날수 밖에 없는 이유는 기존 TABLE/TR/TD 태그만을 이용한 가볍게 디자인이 적용이 되지 않은 화면이 아닌, 각 TABLE/TR/TD 마다 스타일 적용 및 기타 디자인적인 요소가 들어가있는 코드들이 들어가다보니 느려지게 되는 현상이 발생될수밖에 없다고 본인은 생각합니다. 본격적으로 그리드에 대용량 데..

이번장에서는 파일이 아닌, DB 통신을 하여 데이터 조회 후, 그리드 페이지에 출력하여 페이징처리를 해보도록 하겠습니다. 테이블 생성 및 데이터 INSERT 테이블 및 데이터 관련 스크립트는 하단 첨부파일을 다운 받으신 후, 자신이 사용하는 DB에 IMPORT 시켜주세요 ▽ 파일을 받으 신 후 데이터 조회를 해보시면 다음과 같이 총 12개의 데이터가 존재합니다. ▽ 결과 화면을 ExtJS의 그리드화면에 페이징기능까지 적용하여 출력시켜보도록 하겠습니다. 클라이언트페이지 샘플코드 Ext.onReady(function(){ var data_store = Ext.create('Ext.data.Store',{ autoLoad : true, pageSize : 5, fields : ['title','contents..

이번장은 "그리드 재설정" 에 관한 강좌를 진행 하도록 하겠습니다.그리드 재설정은 간혹가다 한 화면에 그리드 하나를 생성한 후, 데이터 및 컬럼을 변경해야 할 상황이 존재합니다. 예를들어 SQL Client GUI 를 예를 들어보도록 하겠습니다. 특정 테이블을 조회한 결과입니다. △이번에는 다른 테이블을 조회해보도록 하겠습니다. 한 화면에서 그리드의 컬럼 및 데이터만 변경되어 다른 테이블을 조회하였습니다. △ 한페이지에 Grid Reconfigure 를 구현하고자 하는 분에게는 유용한 내용이 되지 않을까 싶습니다. 이전 시간 웹서버 연동한 후 진행한것과 동일한 구조로 시작하겠습니다.전에 생성한 index.html을 코드 변경을 하셔도 되고, 파일을 신규로 생성하셔도 무관합니다. 이번 장 역시, DB통신없..

지난 시간까지 데이터 스토어에 직접 다중 배열 또는 JSON 규격의 데이터를 고정하여 그리드에 데이터를 출력해보았습니다. ▽2015/06/16 - [ExtJS] - ExtJS 기초강좌 16 - 그리드패널(Grid) 에 데이터를 출력해보자 이번에는 연동 되어있는 웹서버를 이용하여 Ajax 방식을 이용하여 프로젝트내에 존재하는 JSON 및 XML 파일을 이용하여 그리드에 데이터 출력을 시켜보도록 하겠습니다. 앞으로는 웹서버 연동 + JSON 파일을 이용하여 대부분의 강좌를 진행할 예정입니다. DB연동 및 로직을 처리하는 과정은 그 이후 진행을 하도록 하겠습니다. 지난시간에 말씀 드렸다시피, 제가 구성한 환경의 웹서버는 JAVA 1.7 + Tomcat 7.0 + 이클립스 기반으로 강좌를 진행하도록 하겠습니다...

이번장은 그리드편 되겠습니다.그리드란, 표형식의 대용량 데이터를 나타내기위해 주로 사용되는 컴포넌트입니다.테이블태그로부터 파생되었고, 대용량 데이터 처리가 가능합니다. 기본적인 그리드 형태를 코드로 작성해보도록 하겠습니다.▶ 샘플코드 Ext.onReady(function(){ Ext.create('Ext.grid.Panel',{ title : 'Grid Example', columns : [{ flex : 1, text : 'first column' },{ flex : 1, text : 'second column' },{ flex : 1, text : 'third column' }], renderTo : Ext.getBody(), }) }) ▶ 실행결과 그리드패널의 columns config 속성을 이용..

※ ExtJS 강좌가 벌써 15번째 강좌가 진행됐습니다. 대략 제가 정한 커리큘럼으로 진행을 하고 있습니다만, 만족스러운 강좌 포스팅일지 애매하기만 합니다. 하지만, 조금 더 열심히 작성하여 ExtJS 문법에 대해서 쉽게 접근할 수 있도록 최선을 다해서 글을 작성하도록 하겠습니다. 이번 강좌는 데이터뷰(dataview) 이용하게 되면 우리가 원하는 커스텀 레이아웃 템플릿과 서식을 사용하여 데이터스토어에 담겨있는 데이터를 표시할 수 있습니다.데이터뷰 구성에서 뷰는 Ext.XTemplate 클래스를 이용하고, Ext.data.Store 클래스에 바인드 되어 있습니다. 그럼 dataview를 이용하여 간단한 목록을 출력해보도록 하겠습니다.이번장에는 레이아웃 구성을 위해서 부트스트랩과 함께 사용해보도록 하겠습니..

가공된 데이터를 화면에 출력을 시켜주는 데이터스토어(Ext.data.Store) 에 대해서 알아보도록 하겠습니다. 데이터스토어의 정의▼● 스토어 클래스는 모델 객체의 클라이언트 측의 캐시를 캡슐화합니다. 스토어는 프록시를 경유하여 데이터를 로드하고 또 그 안에 포함되어 있는 모델·인스턴스를 정렬 필터링 및 조회하기 위한 기능을 제공합니다. 스토어의 작성은 간단합니다. 우리는 로드하고 그 데이터를 저장하는데 사용합니다. 데이터 스토어는 여러 컴포넌트에서 사용이 되고 있습니다. 대략적으로 Store 클래스의 사용처에 관하여 몇가지 예를 들 수 있겠습니다. ▼◆ 콤보박스[Ext.form.field.ComboBox] ◆ 데이터뷰[Ext.view.View] ◆ 그리드[Ext.grid.Panel] ◆ 트리[Ext...

ExtJS에서 제공하는 다양한 폼종류에 대해서 간단하게 알아보도록 하겠습니다.보통 html 태그를 예를 들면 다음과 같은 태그들이 존재할 수 있겠습니다. text : password : file : textarea : checkbox : radio : ADD HTML5 TAG ▼ color : date(day) : date(month) : tiem : week : 신규 추가된 HTML5의 태그들을 제외한다면 text/file/textarea/checkbox/radio이 정도 태그 밖에 존재하지 않는 것입니다.그럼 ExtJS에서 제공하는 폼필드들을 한번 코드 작성 후, 결과를 확인 해보겠습니다.▶ 샘플코드 Ext.onReady(function(){ Ext.create('Ext.Panel',{ title :..

탭패널 내부에 여러 패널을 생성하여 탭별로 각 화면을 출력해보도록 하겠습니다. 탭 개념 ▼ 하나의 영역에 여러개의 패널을 탭으로 나누어서 탭을 클릭할때마다 정의된 패널에 존재하는 화면이 각각 출력되는 것입니다. 1차적으로 제일 간단한 각 탭별로 패널을 출력해보도록 하겠습니다. ▶ 샘플코드 Ext.onReady(function(){ Ext.create('Ext.tab.Panel',{ width : 300, height : 300, items : [{ title : 'TAB1', html : 'Tab1 Body' },{ title : 'TAB2', html : 'Tab2 Body' }], renderTo : Ext.getBody() }); }) ▶ 실행결과[첫번째 탭] [두번째 탭] 탭패널 컴포넌트 하위에 ..

이번에 진행할 강좌는 ExtJS에서 제공하는 Window 컴포넌트입니다.흔히 모달창 또는 레이어팝업으로 불리우고 있습니다.ExtJS의 윈도우컴포넌트를 이용하여 레이어팝업을 띄워보도록 하겠습니다. ▶ 샘플코드 Ext.onReady(function(){ Ext.create('Ext.window.Window',{ width : 300, height : 200, autoShow : true }); }) ▶ 실행결과빈껍데기의 윈도우창이 출력되었습니다.하지만, 현재 autoShow config 속성을 true로 주었기때문에 항상 load 후에 자동으로 화면중앙에 출력이 됩니다.autoShow 속성을 false로 주고 (선언하지 않을시 default : false)패널에 버튼을 생성하여 클릭이벤트 발생 후, 윈도우 ..

자바스크립트에서 제공하는 메시지창이 alert, confirm, prompt 가 대표적으로 존재합니다. 하지만 프롬프트창은 개발을 진행해오면서 적용한 사례를 본적이 없어서 이번장에서 제외하도록 하겠습니다. 자바스크립트에서 제공하는 alert과 confirm의 화면입니다. ▼ 화면에서 항상 필요로 하는 메시지창입니다. 메시지박스를 ExtJS에서 제공하는 컴포넌트로 생성을 하여 다양하게 출력시켜보도록 해보겠습니다. 'alert' MessageBoxExtJS 강좌 1장에서 연동시 출력해봤던 메시지 박스입니다. 위와같은 내용으로 출력을 시켜보았습니다. ▶ 샘플코드 Ext.onReady(function(){ Ext.Msg.alert("자바스크립트 알림","이것이 ALERT창입니다."); }) ▶ 실행결과 동일하게..

ExtJS에서 제공하는 버튼컴포넌트는 위처럼 단순한 버튼말고도 여러 종류의 버튼제작이 가능합니다.이번 강좌에서는 다음 종류의 버튼들에 대해서 다뤄보고자 합니다. ▷ 기본버튼 ▷ 토글버튼▷ 메뉴버튼▷ 분할된 메뉴버튼▷ 그룹버튼▷ 크기별 버튼 우선 코드와 실행결과를 먼저 확인 후, 이어서 설명하도록 하겠습니다. ▶ 샘플코드 ▶ 실행결과 간격문제로 인해서 상단과 하단 툴바를 생성하여 각각 버튼을 생성하였으며, 패널 body영역에는 사이즈별로 버튼을 추가하였습니다. 각 코드를 보면서 설명을 진행하도록 하겠습니다. 1. items에 정의된 코드 설명 items : [ // Button Small Size { xtype : 'button', text : 'small', scale : 'small' }, // But..

이전 강좌에서 진행한 기본패널코드를 이용하여 타이틀의 위치변경과 툴바 생성 및 포지션 변경에 대해서 알아보도록 하겠습니다. 위치 변경 역시 Configs 속성값 하나만 추가해주시면 타이틀을 원하는 위치에 놓을 수 있습니다.패널 타이틀의 위치변경에 대한 속성은 "headerPosition" 입니다.해당 Configs에 지정해줄수 있는 value값은 다음과 같습니다.headerPosition : 'top' or 'bottom' or 'left' or 'right' 선언하지 않을 시, default 'top'이 지정됩니다. 각 포지션별 위치를 한 화면에 확인을 하기 위하여 기존의 body태그에 renderTo를 적용해주었으나, 이번에는 4개의 패널을 한번에 출력시키기위하여 div태그 4개를 작성하고 각 태그들..

이번장부터 본격적으로 각 대표적인 컴포넌트들을 생성해보고, 생성한 컴포넌트들의 Configs 설정만으로 화면을 제작할 수 있습니다. 오늘은 컴포넌트들을 붙이기 위하여 도화지 역할을 하는 패널에 대해 알아보도록 하겠습니다. 이전 기본 문법 습득 및 ExtJS가 무슨역할을 하는 녀석인지 알아보기위해 자주 생성했던 컴포넌트입니다. 1. 기본패널 기존의 샘플용으로 제작했던 Gray 테마대신 Neptune 테마로 변경하여 코드작업을 해봤습니다. ▶ 샘플코드 ▶ 실행결과 WIDTH/HEIGHT 를 준 크기만큼으로 패널이 생성되었습니다. 영역을 제외한 나머지 공간은 회색으로 덮어져있습니다. 아까 적은 것처럼 하얀 도화지(= 'panel') 가 되었군요. 2. 기본패널 + TITLE ▶ 샘플코드 ▶ 실행결과 title..

이번 장에서는 컴포넌틑 생성 후, 해당 컴포넌트들이 지원하는 이벤트 핸들러를 일부 이용하여 강의를 시작해보겠습니다. 자바스크립트,는 이벤트를 적용하기 위해서 onClick / onKeyup 등과 같은 속성의 함수를 정의해서 동작을 시켜줍니다.그리고 jQuery의 경우 자바스크립트처럼 태그의 속성을 이용하여 호출하는 방법이나 스크립트의 $(XXX).click / $(XXX).keyUp 등을 이용하여 특정 태그의 이벤트 핸들러를 선언합니다. 이처럼 ExtJS에서 제공되는 각종 다양한 컴포넌트들 또한 이벤트 핸들링이 다양하며, 이벤트들을 각각 어떻게 적용해야 하는지 설명을 진행해보도록 하겠습니다. 지난 포스팅의 API 문서사이트 관련 내용을 숙지 하신 후 진행하시길 바랍니다. ExtJS 기초강좌 5 - Ext..