지난 강좌에는 ExtJS에서 제공하는 센차차트에 대해서 간략하게 설명을 진행하였습니다. 2015/07/16 - [ExtJS] - ExtJS 기초강좌 25 - 차트 컴포넌트에 대한 간단소개 이어서 차트관련 스크립트를 include 후에 간단한 막대그래프를 출력을 해보도록 하겠습니다. 추가 INCLUDE 파일 1장부터 진행해오신 분들이시라면 기존 작업 한 웹프로젝트 내에 "packages" 라는 폴더내에 ExtJS 관련 테마 디렉토리들을 INCLUDE 해놓았을 것입니다. 만약 바로 검색해서 들어오신 분들이시라면 1장 연동부분을 참고해주세요 ▼2015/05/28 - [ExtJS] - ExtJS 기초강좌 1 - ExtJS 5.1 GPL 다운로드 및 연동하기 INCLUDE 해준 파일들 중 우리는 "sencha-c..

ExtJS에서 제공하는 차트그래프에 대해서 알아보도록 하겠습니다.이번장에서는 컴포넌트 출력관련 강좌가아닌, ExtJS에서 제공하는 센차차트(Sencha Chart)의 종류 및 중요한 config 속성에 대해서 간단하게 설명을 진행하고자 합니다. ExtJS에서 제공하는 차트의 종류는 아래와 같습니다. ▼Column ChartsBar ChartsLine ChartsArea ChartsScatter ChartsFinancial ChartsPie ChartsRadial ChartsGauge ChartsCombination Charts ExtJS 5.1버전부터 3D 차트 그래프가 추가가 되어 이전보다 화려한 그래프 표현이 가능합니다.차트관련 클래스는 2가지가 존재합니다. ▼Ext.chart.CartesianCha..

오랫만에 ExtJS에 관련한 포스팅을 하게 되었습니다. 요즘 프로젝트 기간이 타이트하게 진행되다보니, 포스팅을 못하고 있네요.. ExtJS 6 가 출시되면서, ExtJS 5 에 대해서 포스팅을 계속 해야되는지 고민을 했었습니다. 하지만, 문법은 거의 흡사하므로, ExtJS 5에 대해서 포스팅을 계속 진행하기로 결정하였습니다. ExtJS 6 가 정식적으로 나왔지만, 이전버전과 동일한 문법으로 진행이 되는거 같습니다. 본인 역시, 아직 ExtJS 6를 파악해보지는 못했으나, 조만간 ExtJS 기초강좌 포스팅을 마무리하고, 천천히 훑어보도록 해야겠습니다. 이번 강좌는 Ajax 클래스를 이용한 비동기 호출을 진행해보도록 하겠습니다. Question ExtJS는 항상 비동기 호출방식으로 데이터를 가공했던거 아니였..

요즘 프로젝트 진행을 하여 정신없이 개발만하다보니, 오랫만에 포스팅이네요. 이번 포스팅을 마지막으로 JSP 페이지 출력하는 방법에 대해서 마무리를 하도록 하겠습니다. Perspective 모드를 Java EE 로!! 이클립스 실행 후, Perspective가 "Java EE" 인지 확인을 하도록 합니다.화면 우측상단에 보시면 어떤 버전인지 확인이 됩니다. (아마 Default Java EE 로 되어있겠지만, 한번 더 확인해주도록 합니다. ▼ 해당 모드가 아니라면, Java EE 로 변경을 해주도록 합니다. 변경은 좌측 아이콘을 클릭하면 모드를 선택 할 수 있는 팝업이 뜨는데, 팝업에서 Java EE 를 선택합니다. ▼ 이클립스에 WAS(Tomcat) 등록 이제는 미리 다운로드 받아놓은 톰캣을 등록시켜주어..

지난 포스팅에 JAVA / TOMCAT / ECLIPSE 파일을 다운로드 후, 설치까지 진행해 봤습니다. 2015/06/25 - [Tip] - 첫번째 팁, 자바+톰캣+이클립스 다운로드 및 설치하기 이번에는 이클립스의 각종 파일및 워크스페이스에 대한 인코딩을 UTF-8로 설정하도록 하겠습니다.우선 이클립스를 실행합니다.Window → Preferences 메뉴를 클릭합니다.▼ "Web" 이라는 메뉴를 열어서 다음 3개의 파일에 대한 인코딩을 "UTF-8" 로 설정해줍니다. ▼ 인코딩을 변경하고자 하는 메뉴는 3가지입니다. ▼ CSS FilesHTML FilesJSP Files 각 메뉴마다 인코딩을 "UTF-8"로 변경시켜줍니다. 이어서 워크스페이스 자체의 인코딩을 "UTF-8"로 변경해줍니다. 워크스페이스..

어제까지만 해도 이클립스가 정상적으로 실행이 잘 되다가 갑자기 아래와 같은 오류메시지가 출력됨녀서 실행이 되지 않습니다. ▼A Java Runtime Environment (JRE) or Java Development Kit (JDK) must be available in order to run Eclipse. No Java virtual machine was found after searching the following locations :C:\xxxxxx\jre\bin\javaw.exejavaw.exe in your current PATH 에러를 보아하니, JDK 인식이 되지 않는 것 같습니다.CMD 창을 띄워서 자바 버전을 확인해보도록 하겠습니다.▼ java 명령어를 인식하지 못하는군요.그럼 환경..

웹개발 입문하시는 분들을 위한 JSP 웹서버를 한방에 설치하는 방법을 알려드리고자 합니다.얼마 전, 지인이 집에서 개발환경을 구축을 해놨지만, 실행이 되지 않는다고 해서 잠깐 봐준적이 있었는데, 문제가 되었던 부분은 JRE설치만 되있고 JDK 설치가 되지 않아서였던 것으로 기억하고 있습니다.그래서 집에서도 실무에서도 손쉽게 환경을 세팅하여 바로 개발이 진행할 수 있게 구동을 시켜보도록 하겠습니다.설치할 파일들에 대한 버전은 아래와 같습니다. ▼ JAVA 1.7 / Tomcat 7 / 이클립스 루나(4.4.2) JAVA 1.8 / Tomcat 8 도 버전이 올라서 다운로드 받아도 되지만, 본인은 위 버전으로 연동을 진행하도록 하겠습니다.※ 버전은 각자 진행하고자 하는 버전에 맞춰서 다운로드 받으시면 되겠습..

지난 시간에 이어서 트리패널에 대해서 조금 더 알아보는 시간을 가져보도록 하겠습니다.이번강좌는 Ajax 통신을하여 트리의 하위노드들을 Load 해보도록 하겠습니다.파일로 데이터를 한번에 로드하는 방식과 DB내에 테이블을 생성하여 데이터 조회 후, 하위노드를 호출하는방식을 이용하여 이번 강좌를 진행해보겠습니다.코드는 이전 포스팅에서 작성했던 코드를 이용하여 변경 작업 후, 테스트를 해보도록 하겠습니다. ① 트리패널 Ajax 파일호출 클라이언트코드와 JSON 파일내에 입력 할 데이터를 작성 후, 설명을 드리도록 하겠습니다. ExtJS 샘플코드 Ext.onReady(function(){ Ext.create('Ext.tree.Panel',{ width : 500, height : 800, title : 'Tre..

이번 ExtJS 강좌는 트리에 대해서 간략하게 진행하겠습니다.트리패널은 이전 그리드패널에 사용했던 Ext.data.Store 저장소대신, Ext.data.TreeStore 저장소를 이용해야 합니다.트리패널을 출력하기 전, 제일먼저 알아두어야 할 것이 트리의 데이터구조에 대해서 알아야 합니다.계층형구조로 화면에 출력이 되는것이니, 데이터 구조 또한 계층형으로 정의되어야 하겠습니다.아래 샘플구조에 대해서 알아보도록 하겠습니다. ▼ 위처럼 JSON 구조가 계층형으로 작성되어있습니다.그럼 각 JSON Key값에 대한 설명은 아래와 같습니다.text - 해당위치 depth에 표출되어지는 각 노드의 타이틀 expanded - 자식노드를 open하기 위한 boolean 형식의 값(true/false)expanded ..

ExtJS의 기초강좌가 아닌 지금까지 배운 내용과 별도의 기능을 적용하여 간단하게 엑셀의 기능을 벤치마킹해보는 시간을 가져보도록 하겠습니다. 오늘 따라해보고자 하는 기능은 엑셀화면에서의 내용이 입력된 데이터를 수정 해본 후, Ctrl + Z 키를 누르면 원복을 하는 기능을 ExtJS의 그리드를 이용하여 제작해볼까 합니다.▼ 이번 예제의 흐름은 다음과 같습니다.1. DB테이블에 등록되어있는 데이터를 그리드에 출력 2. CellEditing 플러그인을 이용하여 컬럼수정 3. 수정이 되면 즉시, 데이트 Update 4. Ctrl + Z 를 이용하여 이전 데이터로 원복 (화면이 변경되는 동시에 3과 동일하게 이전데이터로 DB Update) DB연동없이 구현해보고자 하는 기능을 제작할 수 있겠지만, 웹에서 동작이..

ExtjS의 Grid패널에서 지원하는 대표적인 에디트 플러그인이 2가지가 존재합니다.그리드의 각 셀을 수정가능한 'CellEditing' 과 한 로우의 모든 셀을 한번에 수정가능한 'RowEditing' 플러그인을 예로 들수 있겠습니다. 이번장에서는 간단하게 각 플러그인들이 어떻게 지원되고, 사용하는지 알아보겠습니다.※ DB연동은 CRUD 중, SELECT 쿼리만 사용하고, INSERT/UPDATE/DELETE 는 이후에 다루도록 하겠습니다. DB 임의의 데이터는 19장에서 참부한 dummy.sql파일을 이용하도록 하겠습니다.db연동을 하지 않으신 분들께서는 19장을 참고해주세요.2015/06/19 - [ExtJS] - ExtJS 기초강좌 19 - 그리드(Grid) DB 통신하여 페이징처리하기 기존 그리..

일반적으로 많은양의 데이터 목록을 출력할 경우, 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 + 이클립스 기반으로 강좌를 진행하도록 하겠습니다...