▼▼▼ ExtJS 강좌 구독을 원하시면, 아래 채널구독 부탁드립니다 ^^ ▼▼▼ https://www.youtube.com/channel/UCmIEd8PTq5PXJyXlboXKOpQ 데이터스토어(Ext.data.Store) 스토어 클래스는 Ext.data.proxy.Proxy 클래스를 통하여 데이터로드(Ajax Call) 하고 내부에 정의 된 Ext.data.Model 객체를 정렬,필터링 및 쿼링하는 기술을 제공 정의는 위와 같지만, 간단하게 생각을 하면, 단순히 호출 또는 정의된 데이터들을 담는 일종의 저장공간이라 생각하면 됨. 태그의 경우, 목록을 보여 주기 위해서는 태그가 하위 태그로 정의되야 셀렉트박스의 목록이 출력됩니다.또한, 태그에서 목록을 출력하기 위해서는 과 의 조합으로 목록구성이 되야 테..
▼▼▼ ExtJS 강좌 구독을 원하시면, 아래 채널구독 부탁드립니다 ^^ ▼▼▼ https://www.youtube.com/channel/UCmIEd8PTq5PXJyXlboXKOpQ xtype : textfield 기본 텍스트 필드이며, 직접적으로 사용하거나 혹은 textareafield 및 combo와 같은 컴포넌트의 기본클래스로 사용가능. 값이 비어있는 경우, emptyText 속성을 이용하여 placeholder 를 지원 xtype : textfield(inputType : 'password') HTML 태그의 와 동일한 기능을 가지는 textfield 의 config 속성입니다.별도의 xtype이 password인 컴포넌트는 지원하지 않습니다. xtype : numberfield 숫자만 이용가능한..
▼▼▼ ExtJS 강좌 구독을 원하시면, 아래 채널구독 부탁드립니다 ^^ ▼▼▼ https://www.youtube.com/channel/UCmIEd8PTq5PXJyXlboXKOpQ 탭패널이란 ? 탭패널은 표준 패널과 동일하게 사용할 수 있습니다.카드 레이아웃과 같은 여러장의 패널들을 탭으로 관리하는 컴포넌트입니다. 탭패널의 탭바의 기본 position은 상단에 위치합니다. tabPositon (top / bottom / left / right) 탭바 위치변경을 위해서는 tabPosition 의 속성을 적용해주면 됩니다. closable : boolean(true / false) 탭패널 하위의 패널컴포넌트에 적용닫고자 하는 패널에 closable : true를 선언하면 탭바에 닫기버튼이 생성default..
▼▼▼ ExtJS 강좌 구독을 원하시면, 아래 채널구독 부탁드립니다 ^^ ▼▼▼ https://www.youtube.com/channel/UCmIEd8PTq5PXJyXlboXKOpQ 메시지박스 클래스는 싱글톤 형식으로 별도의 객체 생성을 하지 않는 반면, 성격이 비슷한 Ext.window.Window 클래스는 메시지박스 클래스들과 달리 Ext.create를 선언하여 객체 생성 후, autoShow config 속성을 true로 주거나 혹은 show() 함수를 사용하여 화면에 표출시켜주어야 함 유용한 윈도우 클래스 config 소개 autoShow : 객체 생성과 동시에 보여주는 여부 ( value = true / false) modal : 윈도우컴포넌트 백그라운드에 생성(바디영역내에 생성된 컴포넌트들) ..
▼▼▼ ExtJS 강좌 구독을 원하시면, 아래 채널구독 부탁드립니다 ^^ ▼▼▼ https://www.youtube.com/channel/UCmIEd8PTq5PXJyXlboXKOpQ 메시지관련 컴포넌트는 Ext.create("클래스명") 으로 지정하지 않고 클래스명.함수() 형태로 구현을 해야함이유는 싱글톤으로 정의된 클래스일 경우, 객체생성을 할 수 없고, 그냥 함수처럼 사용해주면 됨. ※ 강의에서 따로 생각되실거 같아서 정정해서 정리합니다.Ext.Msg클래스에서 alert과 confirm 그리고 Ext.MessageBox에서 커스텀 메시지박스를 나눠서 알려드렸는데 둘다 동일한 싱글톤 클래스입니다. Ext.Msg( = Ext.MessageBox) 클래스에서 제공하는 기본적인 alert, confirm ..
오늘녹화는 유독 잡음이 심하네요.. ㅠㅠ 다음강좌부터 최대한 잡음줄이고 ExtJS 강좌 진행하도록 하겠습니다.양해부탁드리고 수강해주세요 ^^ ▼▼▼ ExtJS 강좌 구독을 원하시면, 아래 채널구독 부탁드립니다 ^^ ▼▼▼ https://www.youtube.com/channel/UCmIEd8PTq5PXJyXlboXKOpQ 이번강좌에 소개할 버튼컴포넌트 종류 xtype : 'button' / 'splitbutton' / 'segmentedbutton' xtype : 'button' 기본 버튼컴포넌트이며, 버튼에 글자를 넣고 싶으면 text 속성에 value값을 정해주면 글자가 출력이 됩니다. 아이콘을 넣어 주고 싶을 경우, iconCls 아이콘 스타일이 정의 된 클래스명을 지정해주면 됩니다.default로..
▼▼▼ 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 기술에 관심있으신 분들은 아래 유투브 채널 구독을 해주시..