728x90
반응형

ExtJS는 JavaScript기반의 웹 ui 프레임워크 입니다.
요즘은 React, view가 강세를 보이고 있어 ExtJs의 사용이 많이 줄어든 추세이지만,
공부 삼아서 본 강의 내용을 정리해보았습니다.

 

ExtJS 6 정리

미리 정의 되어있는 패키지들의 이름을 선언하여 사용하는 개념

ExtJS 소개

  • 자바스크립트 프레임워크
  • 화면개발은 Json구조를 가짐 (key : value)
  • 다양한 플랫폼 환경 지원
    • ExtJS(웹) / Sencha Touch(테블릿, 모바일)
  • 수치를 이미지화 하는데 장점
  • 3버전까지만 해도 무겁고 느렸으나, 버전업이 되면서 문제해결
  • 사용처
    • SI 프로젝트, 기업용 솔루션
    • 무료 오픈 웹 어플리케이션

ㅤ

초기설정

  • sencha, extjs 설치
  • 명령어로 설치 확인: cmd → sencha
  • 설치예시
    • sencha (명령어) OOO(ExtJS설치경로) generate Study(파일명) ./ (파일 설치 경로)
  • 설치적용
    • sencha -sdk C:\Users\...\ext-7.0.0 generate Study ./
      • 미리 다운 받은 ExtJs의 패키지들을 지정한 폴더로 copy하는 개념
  • cmd → ExtJS 설치된 경로로 이동
    • app파일 존재하는 곳
  • sencha cmd 역할
    • 톰캣과 같은 역할
    • start 명령어: sencha app watch(실시간)/ sencha web start
    • default port: 1841

ㅤ

테마변경과 onload

  • 테마변경
    • app.json - 타겟 위치
    • ExtJS 테마 종류
      • theme-classic
      • theme-gray
      • theme-neptune
      • theme-crisp
      • theme-triton → 6버전 default
    • Sencha Touch
      • theme-material
      • theme-ios
      • theme-neptune
      • theme-triton → 6버전 default
    • 변경 적용
      • app.json → builds/classic/theme || builds/modern/toolkit/theme
      • 명령어: sencha app build
      • 6버전이후 코드 수정 내용 저장시 자동 변경 확인
  • Onload
    • app.js
    • Ext.onReady(function() { Ext.Msg.alert("Chapter1", "헬로우월드"); // 헤더창, 내용 })
    • 모든 아웃풋은 js에서 구현

ㅤ

문법 및 레이아웃 이해

  • api doc - docs.sencha.com
  • 속성의 위치는 상관 x
    • app.js
      Ext.onReady(function() { Ext.create("Ext.panel.Panel", { width: 500, height: 300, renderTo : Ext.getBody(), border: true, items: [{ xtype:'textfield' } , { xtype : 'button', text: '버튼' }] }) })
    • json구조로 key:value 속성으로 화면을 그림
    • Ext.create(): 컴포넌트 생성
      • 첫 번째 → 생성하고자하는 컴포넌트 클래스명
      • 두 번째 → 그리고자 하는 속성
    • renderTo: 타겟할 위치
    • items: 요소
Ext.onReady(function() {
  Ext.create("Ext.container.Viewport", {
      renderTo : Ext.getBody(),
      layout : 'border',
      border : true,
      items : [{
              xtype : 'panel',
              flex : 1,
              region : 'north',
              title : '패널 north'
          },{
              xtype : 'panel',
              flex : 1,
              region : 'center',
              title : '패널 center'
          },{
              xtype : 'panel',
              flex : 1,
              region : 'east',
              title : '패널 east'
          },{
              xtype : 'panel',
              flex : 1,
              region : 'west',
              title : '패널 west'
      }]
  })
})
Ext.onReady(function() {
  Ext.create("Ext.container.Viewport", {
      renderTo : Ext.getBody(),
      layout : 'border',
      border : true,
      items : [{
              xtype : 'panel',
              flex : 1,
              region : 'north',
              title : '패널 north'
          },{
              xtype : 'panel',
              flex : 1,
              region : 'center',
              title : '패널 center'
          },{
              xtype : 'panel',
              flex : 1,
              region : 'east',
              title : '패널 east'
          },{
              xtype : 'panel',
              flex : 1,
              region : 'west',
              title : '패널 west'
      }]
  })
})

ㅤ

문법 및 레이아웃 이해(2)

  • fit 속성
    • 특정 패널을 브라우저 전체를 채움
  • board 속성
    • 화면을 가득 채운 상태에서 영역을 나눔
    • board속성과 쌍을 이루는 region 속성을 사용해야함
      • region: north, center, south, east, west
      Ext.onReady(function() {
  Ext.create("Ext.container.Viewport", {
      renderTo : Ext.getBody(),
      layout : 'border',
      border : true,
      items : [{
              xtype : 'panel',
              flex : 1,
              region : 'north',
              title : '패널 north'
          },{
              xtype : 'panel',
              flex : 1,
              region : 'center',
              title : '패널 center'
          },{
              xtype : 'panel',
              flex : 1,
              region : 'east',
              title : '패널 east'
          },{
              xtype : 'panel',
              flex : 1,
              region : 'west',
              title : '패널 west'
      }]
  })
})
    • 레이아웃 위치: flex 사용

레이아웃 추가로 알아보기

  • layout
    • center : 패널의 위치 가운데
    • absolute (절대적인 x, y 좌표 위치)
    • accordion ( 패널에서 클릭시 순서대로 아코디언식으로 펼쳐짐)
    • card (페이지 미리 정의, 좌우이동버튼을 통해 전환)
    • hbox(가로로 떨어지는 레이아웃 구조)
    • vbox(세로로 떨어지는 레이아웃 구조)

ㅤ

API doc 보기

docs.sencha.com

  • doc 이용방법 습득
  • xtype 별 config, method, event 사용방법

ㅤ

버튼 종류 알아보기

  • 기본적인 에러는 브라우저 개발자 모드로 해결가능
  • xtype: toolbar 속성
  • 아이콘: font-awesome 제공
    • icon 이름 앞에 x-fa 붙여야함
  • 부모 / 자식 레이아웃 구성 파악하기
    • 기본 버튼
      • xtype + text
    • 크기별 버튼
      • scale
    • 아이콘 버튼
      • xtype + iconCls
    • 아이콘 + 텍스트
      • menu + (text + iconCls)
    • 토글 버튼(눌림표시)
      • xtype : enalbeToggle
    • 메뉴버튼(버튼안 메뉴)
      • menu + text
    • 분할된 메뉴버튼()
      • xtype : splitbutton
    • 그룹 버튼
      • xtype : 'segmentedbutton'
      • 다중 클릭 : allowMultiple: true

ㅤ

메시지 상자

  • alert / confirm
    • Ext.msg.Alert("타이틀", 바디);
      • msg.Alert 자체가 싱글톤, static함수라서 Ext.create(”클래스명”, “서브속성”)를 사용하지 않아도 됨
    • javaScript가 제공하는 alert, confirm을 사용해도 되지만,
      ExtJs가 제공하는 디자인된 alert, confirm이 존재
      • ExtJs alert, confirm은 return을 명시해서 동작을 제어해야함
  • toast pop
    • Ext.toast(”message”); / Ext.toast({ key : value });
    • align: t, tr, tl, b, br, bl
  • custom box
    • Ext.MessageBox.show({ key : value });
    • title:
    • msg:
    • icon: 상수로 제공
    • button 타입
      • buttons: 상수로 제공
      • buttonText (버튼 명 커스텀) {key:value}: ok / no / yes / cancel
    • fn : click 이벤트 발생 함수

ㅤ

팝업, 모달, 컴포넌트 만들기

  • Ext.window.Window
  • 객체를 생성해줘야함
    • var win = Ext.create(”Ext.window.Window”, {조건});
    • win.show(); → 객체 보기
  • 옵션 설정
    • modal : true → 음영처리
    • auto show → 컴포넌트 이동 가능
    • resizeable : false → 사이즈 변동 x
      • min, max 키워드와 사용
    • closable : false → 닫기 버튼 삭제
    • maxmizable : true → 컴포넌트 최대화 설정

ㅤ

탭 패널

🔽 구조

  • items:
    • xtype :
    • title :
    • items :
      • xtype :
      • text :
      • ㅤ

입력태그

  • allowBlank : false → 빈값을 허용
  • emptyText → placeholder 역할
  • 인풋 타입 형식 설정
    • 비번 형식
      • inputType : ‘password’
    • 날짜 형식
      • xtype : ‘datefield’
        • format : ‘y-m-d’ → 입력값 포맷팅
    • 숫자 형식
      • xtype : ‘numberfield’
      • minvalue : → 최솟값 설정
      • maxvalue : → 최댓값 설정
    • 파일 형식
      • xtype : ‘filefield’
    • 체크박스
      • xtype : ‘checkboxfield’
      • boxLabel : → checkbox text
    • 라디오
      • xtype : ‘ radiofield’
      • name : → 네임속성으로 라디오 버튼의 그룹을 묶음
      • boxLabel :
    • 슬라이더
      • xtype : ‘slider’
      • width : → 지정필수
      • value : → 슬라이드 설정값

ㅤ

그리드 패널을 이용한 데이터스토어 이해

  • grid 선언
  • displayField: 키값으로 보여질 값
  • valueField: 결과값으로 실제 넘길 값
  • dataIndex를 활용하여 순서를 정함
    • store에서 fields 값을 선언하고 columns에 dataIndex: 값과 매핑해줘야한다.
  • ajax 서버 통신
    • 매핑과 key 연결이 핵심!
    • 외부 도메인 호출시 cors 설정 할 것
    • items : [{ xtype : 'combo', displayField : 'key', -> 화면에 보여줄 데이터 valueField : 'value', -> key 설정시 value 필드 설정 store : { fields : ['key', 'value'], proxy : { type : 'ajax', -> ajax 통신 설정 url : '/data/combo.json', -> combo.json 호출 reader : { -> read 속성 type : 'json', -> 타입 설정 rootProperty : 'data' -> 보내주는 json데이터 리스트의 최상단 key 값 } } } }, { xtype : 'grid', -> grid 설정 columns : [{ text : '컬럼1', dataIndex : 'column1' },{ text : '컬럼2', dataIndex : 'column2' },{ text : '컬럼3', dataIndex : 'column3' }], store : { autoLoad : true -> ajax결과 바로 호출 설정 fields : ['column1', 'column2', 'column3'], -> dataIndex와 fields값 일치 proxy : { type : 'ajax', url : 'data/grid.json', -> grid.json 호출 reader : { type : 'json', rootProperty : 'root' } } }]

트리패널 + 트리스토어 알아보기

  • 트리패널이란
    • 뎁스별로 기능을 컴포넌트화 할 때 사용하는 컴포넌트
  • root 속성
    • root에 대한 속성을 정의하고, 폴더/파일 별로 선언을 해준다.
  • expanded: true / flase 확장여부 , true 하위 폴더가 있음을 선언 → 자식 폴더 선언되어야한다.
  • children: json array 형태 / expanded / children / leaf → 상황에 맡게 사용
  • leaf: true → 마지막 노드 - 파일 출력
  • items : [{ xtype : 'treepanel', root : { text : 'Servers', expanded : false, children : [{ text : '.setting', expanded : false, -> 하위 폴더가 있다, 하위 폴더가 정의 되어야한다. children : [{ }] },{ text : '.tomcat v9.0' },{ text : '.project', leaf : true -> 마지막 파일 선언 }] } }]

그리드 페이징 및 버퍼스토어 적용

  • xtype : grid
  • ajax 방식으로 불러오는것과 별 반 다를 거 없음.
  • 페이징처리 key값과, value 값으로 total 카운트, 페이징 정보들을 받아야한다.
    • bbar(bottom bar) 을 이용해서 페이징 처리 ui 생성 or scroll
      • xtype : ‘pagingtoolbar’

ㅤ
그리드 에디팅 플러그인 적용

속성에 대한 학습 → 추후 속성 대신 이벤트를 사용

  • plugins : ‘rowediting’ 선언 해줘야 그리드 에디팅 플러그인 적용됨
  • editor 선언 필수
    • default : ‘textfield’
  • url → api 속성으로 변경
    • url은 get 개념
    • 하나의 컴포넌트 안에서 url 선언으로 crud 처리 가능
      • create :
      • read :
      • update :
      • destroy :

ㅤ

툴바 종류, 리스너, renderer 이해

  • 레코드란?
    • view 단이 아닌 store에서 fields 영역 record를 의미
  • 위치별 툴바
    • tbar(top tool bar): [{ }] 선언 → 버튼 컴포넌트 / {}일 경우 → 전체
    • bbar(bottom tool bar)
  • 툴바 버튼 + 콤보 추가
    • xtype : combo 선언
    • queryMode : ajax냐 local이냐의 차이에 따른 선언 / 하드코딩시 → local 선언
  • 버튼, 콤보, 그리드 이벤트 리스너 사용방법
    • listeners 사용
      → change → function()선언으로 사용 → combo의 값이 변경되었을때 이벤트 발생
    • listener 사용시 공홈에서 event 찾아서 사용하기
    • 버튼은 handler로 사용하고 그 외의 컴포넌트들은 listener로 찾아서 사용한다.
    • 클릭 이벤트등 발생시 store에 있는 모든 데이터 값을 가져온다.
  • 그리드 렌더러
    • renderer 속성 존재 / return value 사용해야함
      • 실제 데이터 store에 있는 값을 변경해서 보여줄 때 사용(날짜, 숫자값등)
        ㅤ

ajax의 사용

  • ExtJS에서 제공하는 data store(param이 자동으로 넘어가는 장점이있지만) 를 통해 가공하면 취지에 맞지 않을 수 있다. (불필요한 클래스 낭비 발생)
  • Ext.Ajax.request({}) 선언으로 ajax 사용
  • 일반적인 ajax와 내부 선언값은 비슷 (url, method, param, success, fail 등)
  • boxready : 그리드가 생성되고 나서 준비하는 리스너
  • load / loaddData 를 이용해서 값 바인딩
    ㅤ

ExtJS 차트 그래프

  • ext/packages에 있는 패키지들을 app.json/requires 영역에 추가 후 재빌드 해야한다.
  • 차트 종류
    • polar: 레이더, 게이지 등
    • cartesian: (x/y) 선형, 막대 등
  • store
    • 데이터
  • axes
    • 축에 대한 내용
    • type, position, title
  • series
    • 어떤 차트를 쓰고, 어떤 차트를 꾸밀건지
    • type
      • xField, yField
      • line
  • 다중 그래프를 보여줄 경우 data 구조안에 배열 형태로 다중 필드값을 추가한다.
  • 스택 차트: 퍼센트 작업을 할 때, 그룹을 나눌때 stacked false
    ㅤ

MVVM 구조 이해

  • controller, view, viewModel 개념으로 사용
  • ../webapp/app/view/**/.js 에 파일 생성
  • 컴포넌트 분리를 통해 길어지는 코드를 줄이고 유지보수 장점 - spring mvc 생각하기

ㅤ

  • 파일 연결 방법 (view, controller, viewModel)
    • view: 컴포넌트로 정의된 파일(1)에 controller : ‘파일(2)’, viewModel : ‘파일(3)’ 명시
      • view 코드 일부
      • Ext.define('Study.view.login.Login', { extend: 'Ext.window.Window', controller : 'login', <- controller에서 alias로 명시한 name viewmodel : 'login' <- viewmodel에서 alias로 명시한 name });
      • define: 파일의 경로
      • controller : 'login' / viewmodel : 'login' <- 정의된 view 컴포넌트에 controller와 viewmodel을 주입
        ㅤ
- `controller` - 파일(2)
    - controller 코드 일부 
  ```jsx
  Ext.define('Study.view.login.LoginController', {
    extend: 'Ext.app.ViewController', 
    alias : 'controller.login'    <- name : login
    });
  - `define`: 파일의 경로 
- `extend`: ‘Ext.app.ViewController’ <- controller 임을 명시
- `alias`: view에서 `controller: ‘login’`로 주입을 위한 선언
ㅤ
  • viewModel - 파일(3) 
    Ext.define('Study.view.login.LoginViewModel', {
  extend: 'Ext.app.ViewModel',
  alias: 'viewmodel.login'     <- name : login
});
    • define: 파일의 경로
    • extend: ‘Ext.app.ViewModel’ <- ViewModel 임을 명시
    • alias: view에서 ViewModel: ‘login’로 주입을 위한 선언

2강

실습위주의 강의가 대부분이라 핵심 개념과 추가 학습내용 위주로 정리했습니다.

컴포넌트 빌드 후 톰캣에 적용해보기

  • ExtJs 파일 사이즈가 150mb이상이므로 빌드시 오류 발생
  • 명령어 sencha app build production
    • ExtJS build폴더 → 최적화된 production 폴더 생성됨
    • SERVER폴더에 정적폴더(webapp)에 해당 production 폴더를 넣은다음 localhost:8080으로 접속시 extjs 폴더 보임
      • 이때 default 포트 접근시 ”index.html’ 띄어지므로 체크할 것
        ㅤ

스프링구성 및 api 설정

  • 스프링 만든 다음 wepapp 폴더 하위에 sencha app build production으로 만든 폴더를 넣는다.
    ㅤ

컴포넌트 스타일 적용 안될 때

  1. Ext.js의 requires 속성 적용해보기
  2. cmd → spring/../webapp 경로 이동
    1. sencha app refresh
    2. sencha app watch
      ㅤ

브라우저 접속시 로그인 화면 구현

window 컴포넌트의 경우 브라우저 상에서 팝업 형식으로 뜨기 때문에

  • closable : false : 닫기 버튼 비활성화
  • maximized : true : 최대 창
  • autoShow : true : 컴포넌트 호출 동시에 윈도우 창 출력
  • 속성을 선언해야 정상적인 로그인 화면을 구성할 수 있다.
    ㅤ

컴포넌트 우측으로 배치

  • 컴포넌트의 상위에 ‘→’ 문자열을 선언하면 우측에 배치할 수 있다.
    ㅤ

UX 속성 추가하기

 plugins : 'ux-sliderpager' <- ux

위와 같은 경우 ux가 app.json에 requires에 별도로 패키지 선언을 해줘야한다.
ux 이외에도 view에서 적용되지 않는 패키지가 있다면 별도 선언 필요

로그인시 Ajax 설정 내용

  • launch 최조 접근시 실행할 함수 정의
  • launch: function() { Ext.define('Study.view.login.LoginController', { extend : 'Ext.app.ViewController', alias : 'controller.login', loginBtn : function(btn) { // var id = btn.up("form").down("[name=adminId]").getValue(); var id = btn.up("form").getForm().getValues(); console.log(id); url : 'loginInfo', method : 'POST', params : id, success : function(res) { var api = Ext.decode(res.responseText); if(api['code'] == 200) { btn.up("window").close(); Ext.widget("main"); } else { alert("실패했습니다."); return console.log("D", api); } } }}); } });
728x90
반응형
저작자표시 비영리 변경금지 (새창열림)

'💻 개발 > 언어' 카테고리의 다른 글

[SQL] AES 전화번호 복호화시 [blob] 문제 해결하기  (0) 2022.11.16
[SQL] varchar(50)은 몇 글자를 저장할 수 있을까?  (0) 2022.11.08
[JAVA] Super() 키워드 예제 / Super 부모, 자식  (2) 2022.09.09
[JAVA] 헷갈렸던거 정리(static, 생성자, 기본생성자, 초기화)  (2) 2022.09.09
[JAVA](모든 시도 해봄) / java.lang.ClassNotFoundException 오류 해결  (4) 2022.03.12

티스토리툴바