▼▼▼ 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..

이전 강좌에서 진행한 기본패널코드를 이용하여 타이틀의 위치변경과 툴바 생성 및 포지션 변경에 대해서 알아보도록 하겠습니다. 위치 변경 역시 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..

이번 시간에는 ExtJS 관련 문법에 대해서 간단히 이해를 돕도록 해보겠습니다. ExtJS 기본구조 ExtJS의 기본문법의 틀은 JSON 규격을 따르고 있습니다. 단일 속성일 경우, "{ }" 다중 속성일 경우, "[ {},{} ]" JSON 규격에 대해서 익숙하신 분들이시라면, ExtJS에 크게 거부감을 느끼지 않으실겁니다. ExtJS onload 함수지금까지 작성해온 샘플 코드들을 보시면, Ext.onReady(function(){ // code here }); 위와 같은 코드를 이용하였습니다.ExtJS MVC에서는 별도로 위와같이 "Ext.onReady"를 사용하지 않아도 되지만, 무슨 기능을 하는 문법인지 이해를 하고 넘어가도록 하겠습니다. ExtJS 기초강좌 1 에서도 설명드렸다시피, ONLOA..