▼▼▼ ExtJS 강좌 구독을 원하시면, 아래 채널구독 부탁드립니다 ^^ ▼▼▼ https://www.youtube.com/channel/UCmIEd8PTq5PXJyXlboXKOpQ ExtJS 는 문서보는방법만 익힌다면, 저의 강좌를 듣지 않으셔도 어느정도의 개발진행이 가능합니다. ExtJS 문서 관련 보는 법 정리 ① API URL 접속 후, Classic Toolkit의 "Documentation" 링크 클릭 Modern Toolkit 의 Documentation 클릭 시, Sencha Touch 관련 문서연결 ② 우측 상단에 사용하고자 하는 컴포넌트를 검색 예를들어, xtype이 패널인 컴포넌트 관련 문서를 검색하고 싶다하는 경우, search 영역에 "panel" 이라는 검색어를 입력하면 관련 클..
▼▼▼ ExtJS 강좌 구독을 원하시면, 아래 채널구독 부탁드립니다 ^^ ▼▼▼ https://www.youtube.com/channel/UCmIEd8PTq5PXJyXlboXKOpQ ExtJS LAYOUT 종류 layout 의 종류는 fit, border , absolute, center, card, accordion, hbox, vbox 등 다양하게 레이아웃을 지원해주고 있어서 복잡하게 스타일을 정의하지 않아도 속성값을 정하기만 하면 알아서 구조를 잡아줌 ① fit : 첫번째 자식 컴포넌트를 영역내에 가득채운다 별도의 width / height 속성을 주지 않아도 자식 컴포넌트가 브라우저 또는 부모 패널영역에 가득 채워짐 ② border : 자식 컴포넌트에 선언되는 region 속성과 한쌍을 이뤄 영역..
▼▼▼ ExtJS 강좌 구독을 원하시면, 아래 채널구독 부탁드립니다 ^^ ▼▼▼ https://www.youtube.com/channel/UCmIEd8PTq5PXJyXlboXKOpQ ExtJS 는 어떻게 UI 컴포넌트를 그리는 것인가? ExtJS는 기존 HTML 구조와 다르게 요즘 NodeJS의 모듈을 dependencies 추가하는 문법구조와 동일 즉, ExtJS에서 정의한 속성값들을 JSON 구조에 맞춰서 정의만 해주면 화면에 출력됨 아래는 NodeJS에서 연동하고자 하는 NPM 관련 dependencies 예를 들자면, "dependencies": { "express": "2.X.X", "redis": "0.X.X" } ExtJS 의 기본 문법을 예로 들자면, Ext.create('Ext.panel..
▼▼▼▼▼▼ YOUTUBE 구독 ▼▼▼▼▼▼ https://www.youtube.com/channel/UCmIEd8PTq5PXJyXlboXKOpQ SenchaCmd 웹서버 실행 명령어 비교 # sencha web start - 빌드된 ExtJS 웹어플리케이션을 실행 # sencha app watch - 실시간으로 JS 및 SCSS 파일 수정 시, 자동으로 빌드되어 별도로 SenchaCmd 재시작할 필요없음 ExtJS 테마변경 app.json의 527라인에 "builds" 속성의 자식속성인 "theme" 의 속성의 값을 변경 classic 속성의 theme 를 변경 할 경우 - ExtJS 의 테마가 변경 modern 속성의 theme 를 변경 할 경우 - Sencha Touch 의 테마가 변경 classi..
▼▼▼▼▼▼ YOUTUBE 구독 ▼▼▼▼▼▼ https://www.youtube.com/channel/UCmIEd8PTq5PXJyXlboXKOpQ ExtJS 6 및 Sencha CMD 다운로드 ExtJS 다운로드 : https://www.sencha.com/legal/GPL 1) Sencha ExtJS 선택 2) 다운로드 링크를 받을 메일주소 입력 3) 동의버튼 체크 Sencha CMD 다운로드 : https://www.sencha.com/products/extjs/cmd-download OS 종류 및 32/64 bit에 맞춰서 다운로드 버튼 클릭 Sencha CMD Install 후에 sencha 명령어가 커맨드창에서 적용되지 않는다면? 시스템 환경변수 편집으로 문제해결 !! ExtJS 프로젝트 생성 ..
ExtJS 6 기초강의에 앞서 간단하게 ExtJS가 무엇인지 알아봅니다. 전문적인 강의를 하는 강사가 아니다보니, 많이 부족합니다. 차차 나아지겠죠 ... ExtJS 에 대한 강의를 원하시는 분들은 유투브 구독과 공유 부탁드리겠습니다. Sencha Touch랑 통합 되었으니 뒤에가서 Sencha Touch에 대해 계획중에 있습니다. ▼▼▼▼▼▼ YOUTUBE 구독 ▼▼▼▼▼▼ https://www.youtube.com/channel/UCmIEd8PTq5PXJyXlboXKOpQ - 요 약 - ExtJS란? - 수백가지 강력한 UI 컴포넌트를 지원하는 자바스크립트 프레임워크 중 하나 예제사이트 : http://examples.sencha.com - 현재(6.X 버전) ExtJS는 7가지 테마를 지원 (Cla..
안녕하세요 개발로짜입니다 ^^ 오랫만에 포스팅하는거 같습니다. 업무가 바쁘다는 핑계로 포스팅을 못하고 있었는데.. 이제 그동안 미루었던 ExtJS 강좌를 동영상강좌로 진행을 하려고 합니다! 제가 ExtJS에 대해서 강좌를 진행하는 이유는 간단합니다. AngularJS나 ReactJS 와 같은 다양한 종류의 자바스크립트 프레임워크가 활성화 되고 있는반면, 꽤 오래된 ExtJS는 여전히 국내에 사용하는 곳이 적다는거죠. 제가 생각하는 이유는 ExtJS를 도입하고 싶어도 레퍼런스를 제공하는 공간이 드물다보니 생기는 거라 생각됩니다. 그래서 동영상으로 지금까지 ExtJS 5버전 포스팅했던 내용들을 기초로 두고, 동영상 강의를 진행하고자 합니다. ExtJS 기술에 관심있으신 분들은 아래 유투브 채널 구독을 해주시..
이번장은 계량기차트(Gauge Chart)에 대하여 진행하도록 하겠습니다.Gauge 그래프는 보통 특정영역내에서 수치를 표현하기 위하여 사용되는 그래프 종류입니다.예를들면, 차량에 장착되어있는 RPM/속도 계기판이나 전압을 측정할때 사용하는 전압측정기등과 같은 화면을 Gauge라 부릅니다. ▼ 첫번째 이미지인 속도 계기판과 유사한 화면을 ExtJS에서 제공하는 Gauge 컴포넌트를 이용하여 제작해보도록 하겠습니다. 우선 전체 코드를 작성하여 실행결과 확인 후, 부분코드로 설명을 진행하도록 하겠습니다. ▼ Ext.onReady(function(){ var store = Ext.create('Ext.data.Store',{ fields : ['rpm','speed'], data: [{rpm : 0, spee..
이전강좌까지 type이 'cartesian' 즉, X/Y 좌표로 구분이 되는 그래프 차트에 대한 강좌를 진행했었습니다. 2015/07/21 - [ExtJS] - ExtJS 기초강좌 26 - 센차 차트 연동하여 그래프 출력을 시켜보도록 하자 2015/07/23 - [ExtJS] - ExtJS 기초강좌 27 - 세로형 막대 그래프 차트 알아보기 2015/07/24 - [ExtJS] - ExtJS 기초강좌 28 - 3D 세로형 막대 그래프 출력시켜보자 2015/07/25 - [ExtJS] - ExtJS 기초강좌 29 - 세로형 막대차트를 변형하여 가로형으로 바꿔보자 2015/07/26 - [ExtJS] - ExtJS 기초강좌 30 - 선형(Line) 차트 그래프를 출력해보기 2015/07/29 - [ExtJS..
Scatter Chart란, 분산/분포도를 표현해주는 차트입니다.분포되는 그래프란 아래와 같은 차트를 의미합니다. ▼ [출처 : http://dev.sencha.com/ext/5.1.0/examples/kitchensink/?charts=true#scatter-basic] [출처 : http://www.mathsisfun.com/data/scatter-xy-plots.html] 차트 영역내에 포인트로 데이터를 표현하여 어느 영역에 집중이 되있는지 한눈에 알아보기 쉬운차트가 바로 'Scatter Chart' 입니다. 상단 이미지 중, 두번째 출처에서 제공하는 온도별 아이스크림 판매 데이터를 이용하여 한번 Scatter Chart를 생성해보도록 하겠습니다. 상단 데이터를 데이터 스토어에 담아 보도록 합니다...