티스토리 뷰
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
: 요소
- app.js
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 : ‘datefield’
- 숫자 형식
- 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’
- bbar(bottom bar) 을 이용해서 페이징 처리 ui 생성 or scroll
ㅤ
그리드 에디팅 플러그인 적용
속성에 대한 학습 → 추후 속성 대신 이벤트를 사용
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에 있는 모든 데이터 값을 가져온다.
- listeners 사용
- 그리드 렌더러
- renderer 속성 존재 / return value 사용해야함
- 실제 데이터 store에 있는 값을 변경해서 보여줄 때 사용(날짜, 숫자값등)
ㅤ
- 실제 데이터 store에 있는 값을 변경해서 보여줄 때 사용(날짜, 숫자값등)
- renderer 속성 존재 / return value 사용해야함
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’ 띄어지므로 체크할 것
ㅤ
- 이때 default 포트 접근시 ”index.html’ 띄어지므로 체크할 것
스프링구성 및 api 설정
- 스프링 만든 다음 wepapp 폴더 하위에 sencha app build production으로 만든 폴더를 넣는다.
ㅤ
컴포넌트 스타일 적용 안될 때
- Ext.js의 requires 속성 적용해보기
- cmd → spring/../webapp 경로 이동
sencha app refresh
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 |
댓글
250x250
공지사항
최근에 올라온 글
최근에 달린 댓글
- Total
- Today
- Yesterday