Sencha ExtJS 5 와 Sencha Architect 3 를 활용한 엔터프라이즈 솔루션 개발사례

48
2015/05/19 기술연구소 김광섭 이사 Sencha ExtJS5.x 과 Architect3.1 을 활용한 Enterprise Solution 개발 사례 SenchaCon 2015 Roadshow

Transcript of Sencha ExtJS 5 와 Sencha Architect 3 를 활용한 엔터프라이즈 솔루션 개발사례

Page 1: Sencha ExtJS 5 와 Sencha Architect 3 를 활용한 엔터프라이즈 솔루션 개발사례

2015/05/19

기술연구소 김광섭 이사

Sencha ExtJS5.x 과 Architect3.1 을 활용한 Enterprise Solution 개발 사례

SenchaCon 2015 Roadshow

Page 2: Sencha ExtJS 5 와 Sencha Architect 3 를 활용한 엔터프라이즈 솔루션 개발사례

[ 2 ]

I. ㈜엠로 소개

II. 솔루션 시연

III. 왜 ExtJS 와 Architect 를 선택했는가?

IV. Extension 개발 사례

V. Enterprise Application 개발 시 고려사항

Table of Contents

Page 3: Sencha ExtJS 5 와 Sencha Architect 3 를 활용한 엔터프라이즈 솔루션 개발사례

[ 3 ]

III. 왜 ExtJS 와 Architect 를 선택했는가?

1. History of EMRO UI

2. Experience with ExtJS

3. Why ExtJS?

4. Why Architect?

Page 4: Sencha ExtJS 5 와 Sencha Architect 3 를 활용한 엔터프라이즈 솔루션 개발사례

[ 4 ]

1. History of Emro UI

시장의 웹 표준 기술에 대한 요구 증가로 솔루션의 UI framework 으로 ExtJS 를 선택.

III. 왜 ExtJS 와 Architect 를 선택했는가?

Section Active X (2001~) Flex (SDK3.4) (2007~) ExtJS (2011, 2014~)

Screenshots

Advantages • Data grid 성능

• 사용 편의성

• Custom component 개발

• 성능과 사용자 편의성

• OS, Browser 호환성 • HTML5 등장으로 웹 표준 기술에 대한 요구 증대

• Multi OS, Browser 지원 요구 증대

• Mobile Device 지원

Disadvantages • 일반적인 ActiveX 문제들

• OS, Browser 호환성

• 비 웹 표준 Technology

• UI Design 도구 (IDE)

• Compile time

N/A U

I Fra

mew

ork

변경

검토

배경

Page 5: Sencha ExtJS 5 와 Sencha Architect 3 를 활용한 엔터프라이즈 솔루션 개발사례

[ 5 ]

2. Experience with ExtJS

Section Phase I Phase II Phase III

Period 2011/04 ~ 2012/08 2014/01 ~ 2014/05 2014/06 ~

Technology • Ext JS 4.0

(Conversion from Flex)

• Ext JS 4.2, DeftJS(MVC)

• Architect 3.0

• Ext JS 5.0 (MVVM)

• Architect 3.1

Our Experience

• SRM Project 수행

• ExtJS 지식 및 경험 부족

• Application architecture 에 대한 고민 부족

• SMARTsuite 솔루션 개발

• Application architecture 개선

• 다양한 Custom component 개발

• Architect3.0 를 사용하여 UI 개발

• SMARTsuite 솔루션 개발

• Ext JS 5.0 new features 적용

• Application architecture 개선

• 다양한 Custom component 개발

• Architect3.1 를 사용하여 UI 개발

• Performance 를 고려한 개발 유형 정의

Our

Feedback

• Performance Issue in IE

• Chrome Frame 사용 다양한 문제발생(with ActiveX)

• 개발 복잡도 증가

• Performance Issue in IE8

• 느리고 불편한 Architect3.0

• 개발 복잡도는 여전히 높은 편

• Performance Issue in IE8 (복잡한 UI 개발 시)

• Architect3.1 개발 편의성 개선

• 개발 복잡도 감소, 용이성 향상

ExtJS 를 활용한 솔루션 개발 History

III. 왜 ExtJS 와 Architect 를 선택했는가?

Page 6: Sencha ExtJS 5 와 Sencha Architect 3 를 활용한 엔터프라이즈 솔루션 개발사례

[ 6 ]

3. Why ExtJS?

주요 고려사항

III. 왜 ExtJS 와 Architect 를 선택했는가?

1. Extensible Class system

2. Extension (Custom components) 개발

4. All in One Framework, IE8 지원

5. 기본 UI Components

3. Desktop, Mobile 동시 지원이 가능한 단일 framework

6. Potential of Sencha

7. Global Business

Page 7: Sencha ExtJS 5 와 Sencha Architect 3 를 활용한 엔터프라이즈 솔루션 개발사례

[ 7 ]

4. Why Architect?

주요 고려사항

III. 왜 ExtJS 와 Architect 를 선택했는가?

1. Extension add-on

2. 개발자 learning-curve 단축

4. UI design 편의성

5. 테마 작업

3. 개발 품질 유지

Page 8: Sencha ExtJS 5 와 Sencha Architect 3 를 활용한 엔터프라이즈 솔루션 개발사례

[ 8 ]

IV. Extension 개발 사례

1. 신규 기능 추가

2. override 를 통한 확장/bug fix

3. external library integration

4. 다국어 지원

Page 9: Sencha ExtJS 5 와 Sencha Architect 3 를 활용한 엔터프라이즈 솔루션 개발사례

[ 9 ]

1. 신규 기능 추가 (1/3)

사용자 편의 및 개발 생산성 향상을 위한 extension 개발

IV. Extension 개발 사례

No. Package Class Architect Comments

1 Class.js class 생성, 확장 시 hooks 제공

2 Function.js function arguments, result 에 대한 공통 처리

3 XssProtection.js Xss(cross site scripting) 방어

4 data DynamicHierarchyTransform.js 동적Tree 구현 시 flat 데이터를 계층형 데이터로 변환

5 HiearchyTransform.js Tree 구현 시 flat 데이터를 계층형 데이터로 변환

6 Manager.js 비동기 호출에 대한 전역적 후처리, 예외 처리

7 form field Attachment.js Architect 첨부파일 업/다운로드 필드

8 Month.js Architect 년/월 선택 필드

9 Toggle.js Architect Toggle 버튼 필드 (radio 버튼 기능)

10 plugin ClearButton.js 폼 필드에 데이터 clear 아이콘 표시

11 InputCover.js 폼 필드에 데이터 표현 시 포맷팅 처리

12 InputMask.js Architect 입력 필드 masking

13 plugin AutoClearButton.js Architect 폼 child 필드에 focus 시 데이터 clear 아이콘 표시

14 grid column Attachment.js Architect 첨부파일 업/다운로드 컬럼

15 DataActionColumn.js Architect Text 와 Action 컬럼 결합, link 용도의 컬럼에 사용

16 Eliminate.js Architect 저장/저장이전 삭제 처리를 위한 컬럼

17 Status.js Architect grid row 별 상태표시 컬럼

18 Store.js Architect Store 컬럼, code성 데이터(text/value) 표현을 위한 컬럼

Page 10: Sencha ExtJS 5 와 Sencha Architect 3 를 활용한 엔터프라이즈 솔루션 개발사례

[ 10 ]

IV. Extension 개발 사례

No. Package Class Architect Comments

19 grid plugin Block.js Architect 마우스drag로 cell block 선택, cell drag copy&paste

20 CellMarker.js Architect cell 상태를 백그라운드 색상으로 표현(editable/edited/required)

21 CellMerge.js Architect cell merge 표현

22 CellTip.js Architect cell 상태를 아이콘으로 표현(editable/edited/required)

23 Context.js Architect 컨텍스트 메뉴

24 Export.js Architect 엑셀,CSV export

25 Filter.js Architect grid 데이터 필터링 기능 활성화

26 Finder.js Architect grid 데이터 검색

27 HorizontalBufferedRenderer.js Architect 컬럼이 많을 경우 가로 buffered render 기능 지원

28 Import.js Architect 엑셀 import

29 MultiSort.js Architect grid multi 컬럼 정렬 (Ctrl 키 조합)

30 Selector.js Architect Block, Context 메뉴 결합 (Deprecated)

31 Stateful.js Architect 그리드 개인화 설정

32 manager ExportManager.js grid 엑셀 export manager

33 FilterManager.js grid filter manager

34 ImportManager.js grid 엑셀 import manager

35 mixins CommandableSelector.js

36 DraggableSelector.js grid 마우스 drag block 지원

37 LockableSelector.js Lock grid 에서 마우스 drag block 선택

38 LZString.js String 압축, 엑셀 export 시 사용

39 TreeSelector.js tree grid 에서 마우스 drag block 선택

40 ui ContextMenu.js grid Context 메뉴 UI

41 Filter.js grid Filter UI

42 Import.js grid 엑셀 import UI

43 ListFilter.js grid List 유형의 Filter UI

44 Stateful.js grid 개인화 설정 UI

45 util Draw.js grid context 메뉴 draw

1. 신규 기능 추가 (2/3)

Page 11: Sencha ExtJS 5 와 Sencha Architect 3 를 활용한 엔터프라이즈 솔루션 개발사례

[ 11 ]

IV. Extension 개발 사례

No. Package Class Architect Comments

46 i18n Manager.js 다국어 manager

47 Provider.js 다국어 데이터 제공자

48 Storage.js 다국어 데이터 cash

49 mixin Translatable.js 다국어 처리 대상자 선별

50 security Manager.js ui 권한 처리 manager

51 Provider.js ui 권한 데이터 제공자

52 plugin ViewModelResolver.js Architect ViewModel 에 권한에 따른 binding 데이터 처리

53 toolbar Counting.js Architect grid 데이터 건수 표시 toolbar

54 TreeFinder.js Architect tree grid 검색 기능 toolbar

55 upload Downloader.js 다운로드 기능

56 Uploader.js 업로드 기능

57 StoreBasedUploader.js Store based 업로드 기능

58 ui DataView.js Attachment field 의 dataview

59 Grid.js Attachment field 를 grid 형태로 사용

60 StoreBasedView.js Attachment field 의 store based view

61 util Time.js 시간 포맷팅 지원

62 view Thumbnail.js Architect 이미지 thumnail viewer 지원

63 window plugin AutoSizer.js Architect 브라우저 resize 시 window, panel 의 자동 resize 지원

1. 신규 기능 추가 (3/3)

Page 12: Sencha ExtJS 5 와 Sencha Architect 3 를 활용한 엔터프라이즈 솔루션 개발사례

[ 12 ]

2. override 를 통한 확장/bug fix (1/3)

ExtJS 기본 기능을 변경하거나 bug fix 를 위한 override 구현

IV. Extension 개발 사례

No. Package Class Bug Comments

1 Base.js security, 다국어 관련 기능 적용

2 Component.js Fix backspace 방지 적용, Tip 관련 bug fix

3 Date.js syntax 를 이용한 포맷팅 처리

4 WindowManager.js 팝업을 띄울 때 부모의 toolbar에도 modal 적용이 되도록 수정

5 container Container.js Lazy loading 지원

6 data Connection.js Fix IE8 response bug fix

7 Model.js 그리드 삭제컬럼 추가 상태 관리

8 NodeInterface.js Fix TreeGrid bug fix

9 ProxyStore.js 추가적인 삭제 상태 반영

10 Store.js 페이지 이동에 따른 기능 추가

11 TreeStore.js 페이지 이동에 따른 기능 추가

12 field Field.js Fix validator 관련 bug fix

13 proxy Direct.js exception에 response result 추가

14 reader Reader.js transform 을 type string 으로 생성

15 direct RemotingProvider.js Ext direct RemotingProvider 에 이벤트 추가 정의

16 dom Element.js Fix IE tabindex bug fix

17 form FieldContainer.js Fix 터치지원 OS 에서 스크롤 이상현상 fix

18 field Base.js backspace 방지, 필드 상태 표시

19 ComboBox.js Fix ComboBox 가 Drop (Open) 되어 있는 상태에서 창 크기를 변경 시 bug fix

20 Date.js 마스크 기능 반영

21 HtmlEditor.js Fix 바인딩시 커서 관련 bug fix

22 Month.js 마스크 기능 반영

23 Number.js 포맷팅 반영

Page 13: Sencha ExtJS 5 와 Sencha Architect 3 를 활용한 엔터프라이즈 솔루션 개발사례

[ 13 ]

IV. Extension 개발 사례

No. Package Class Bug Comments

24 Picker.js Fix Picker 관련 bug fix

25 Text.js Fix Text field onBlur 이벤트 bug fix

26 TextArea.js Fix IE9 바인딩 bug fix

27 trigger Trigger.js Fix IE 에서 Check Box selection model 의 checkOnly 옵션을 사용하였을 때 콤보박스의 dropdownlist 를 열면 체크가 해제되는 bug fix

28 grid ColumnLayout.js Fix 컬럼 사이즈 계산 bug fix

29 NavigationModel.js Fix horizontalbufferedrenderer 관련 기능 추가, focus 관련 bug fix

30 Panel.js Fix 그리드 스크롤 초기화 문제 bug fix

31 RowEditor.js Fix StoreColumn 에 renderer 를 호출 할 떄 meataData 의 column 이 없어 오류나는 bug fix

32 column Check.js cell editing 플러그인과 통합, focus 가능하도록

33 Column.js Fix 컬럼헤더 align 속성 추가, 최초 컬럼을 lock 할 때 lockedgrid 에 렌더링되지 않는 bug fix

34 locking Lockable.js Fix Lock 일괄 적용, Lock 관련 bug fix, IE8 Lock 디자인 bug fix

35 View.js Fix Lock 적용 시 생성되는 view 에 누락된 기능 추가

36 plugin BufferedRenderer.js Fix IE9 하위에서 화면 최대화시 스크롤 이벤트 발생하지 않는 bug fix

37 CellEditing.js Fix 가상의 수정 이벤트 생성, 기타 bug fix

38 property Grid.js enableLocking 디폴트 false 처리

39 layout container Card.js Lazy loading 지원

40 Table.js Fix IE9 하위에서 화면 최대화시 스크롤 이벤트 발생하지 않는 bug fix

41 panel Panel.js Fix grid 스크롤 초기화 문제 bug fix

42 Table.js Fix IE8 에서 tagName 관련 bug fix

2. override 를 통한 확장/bug fix (2/3)

Page 14: Sencha ExtJS 5 와 Sencha Architect 3 를 활용한 엔터프라이즈 솔루션 개발사례

[ 14 ]

IV. Extension 개발 사례

No. Package Class Bug Comments

43 picker Date.js Fix 토,일 표시 변경. Month picker 선택 bug fix

44 selection CellMode.js deselectOnContainerClick 디폴트 false 처리

45 CheckboxModel.js Fix checkOnly 관련 bug fix

46 Model.js IE8 에서 multi select combobox 에서 select 풀리지 않는 bug fix

47 RowModel.js deselectOnContainerClick 디폴트 false 처리

48 tab Panel.js Card Layout 의 beforeRenderChildren 를 Tabl panel 로 전달

49 tib Tip.js Ext.Component#setActive 에서 제외 시키기 위한 값 추가

50 toolbar Breadcrumb.js Fix 선택 부분 bug fix

51 Paging.js Fix 바인딩을 사용할 때 반영되지 않는 bug fix

52 tree Column.js draggable 디폴트 true 지정

53 Panel.js enableLocking 디폴트 false 처리

54 View.js Fix loadMask 디폴트 true 지정. TreeView 인 경우 store 의 데이터가 존재하지 않을 때 BufferedScroller 의 속성을 초기화 하도록 수정

55 util Format.js syntax 를 이용한 포맷팅 처리 (금액, 수량, 중량 등)

56 view BoundList.js Fix IE10 이상에서 boundlist 스크롤 후 아이템 선택시 click 이벤트가 발생되지 않는 bug fix

57 BoundListKeyNav.js Fix 자동완성 콤보박스 바인딩 bug fix

58 Table.js Fix 브라우저 주소창에 focus 있는 상태에서 그리드 cell 편집 시 bug fix

59 window MessageBox.js Fix IE 하위버전에서 MessageBox 내 DisplayField 의 사이즈가 잘못 계산되는 bug fix

60 Window.js Fix 필수 입력 및 validation check 필드에서 focus 문제 bug fix

2. override 를 통한 확장/bug fix (3/3)

Page 15: Sencha ExtJS 5 와 Sencha Architect 3 를 활용한 엔터프라이즈 솔루션 개발사례

[ 15 ]

IV. Extension 개발 사례

3. external library integration

data binding

External javascript library 를 Architect extension 으로 추가

TinyMCE Editor

Page 16: Sencha ExtJS 5 와 Sencha Architect 3 를 활용한 엔터프라이즈 솔루션 개발사례

[ 16 ]

IV. Extension 개발 사례

4. 다국어 지원

Dictionary 관리를 통한 간편한 다국어 반영 지원

Page 17: Sencha ExtJS 5 와 Sencha Architect 3 를 활용한 엔터프라이즈 솔루션 개발사례

[ 17 ]

V. Enterprise Application 개발 시 고려사항

1. 프로젝트 환경 구축

2. 모듈화 및 Class loading 전략

3. UI 성능 개선

4. Theme ui 사용

Page 18: Sencha ExtJS 5 와 Sencha Architect 3 를 활용한 엔터프라이즈 솔루션 개발사례

[ 18 ]

1. 프로젝트 환경 구축

협업 및 빌드/배포, 업그레이드 최적화를 위한 환경 구축

V. Etnerprise Application 개발 시 고려사항

Summary

1. Source code Check In/Out

2. User Extension (etnajs, etnajs-cmmn, tinymce …) download 요청

3. Dependency Library download 요청

4. UI Project 테마 사용

5. ExtJs Library 사용

6. Source code Check Out

7. Release 시 변경 버전 반영

8. UI Project 빌드 시 User Extension download 요청

9. UI Project 빌드 결과 upload 요청

10. Dependency Library downlaod 요청

11. Server Project 빌드 결과 upload 요청

12. 라이브러리, 문서(API) 등을 WebDAV를 통한 upload 요청

13. 최종 빌드 결과를 각 서버에 deploy

SVN/Git

xxx.xxx.xxx/svn

1

Library Repository

xxx.xxx.xxx/nexus

3

eclipse

Architect

개발 PC

CI Server

Jenkins

6

7

8

9

10

11

12 13

test/qa/production

Jira

UI extension Repository

xxx.xxx.xxx/nexus

2

CDN

xxx.xxx.xxx/cdn

4

5

Page 19: Sencha ExtJS 5 와 Sencha Architect 3 를 활용한 엔터프라이즈 솔루션 개발사례

[ 19 ]

2. 모듈화 및 Class loading 전략

규모가 큰 프로젝트의 경우 모듈 단위로 Architect 프로젝트를 분리하고 프로젝트 단위로 빌드하여 packaging

V. Etnerprise Application 개발 시 고려사항

Architect parent project (개별 Architect project 의 group)

extjs project (cmmn)

extjs project (pro)

extjs project (cms)

extjs project

(vs)

extjs project (srm)

extjs project

(…)

smartsuite.js

Sencha CMD build

1

Architect parent project (개별 Architect project 의 group)

extjs project (cmmn)

extjs project (pro)

extjs project (cms)

extjs project

(vs)

extjs project (srm)

extjs project

(…)

no build

2

Architect parent project (개별 Architect project 의 group)

extjs project (cmmn)

extjs project (pro)

extjs project (cms)

extjs project

(vs)

extjs project (srm)

extjs project

(…)

cmmn.js pro.js cms.js

vs.js srm.js …..js

Sencha CMD build

3

Class & packaging 된 js 파일 매핑 정보

Page 20: Sencha ExtJS 5 와 Sencha Architect 3 를 활용한 엔터프라이즈 솔루션 개발사례

[ 20 ]

2. 모듈화 및 Class loading 전략

브라우저에서 Class loading 시 초기 반응 속도를 높이기 위한 고민

V. Etnerprise Application 개발 시 고려사항

Architect parent project (개별 Architect project 의 group)

extjs project (cmmn)

extjs project (pro)

extjs project (cms)

extjs project

(vs)

extjs project (srm)

extjs project

(…)

srm.js

pro.js

cms.js

vs.js

cmmn.js

Sencha CMD build

srm-bootstrap.js

vs-bootstrap.js

cmmn-bootstrap.js

pro-bootstrap.js

cms-bootstrap.js

cmmn.view.authority.Role

srm-bootstrap.js vs-bootstrap.js cmmn-bootstrap.js pro-bootstrap.js cms-bootstrap.js …

cmmn.js

1) bootstrap 파일 다운로드

2) 메뉴 화면 요청

3) Role.js 가 포함된 cmmn.js 다운로드

Page 21: Sencha ExtJS 5 와 Sencha Architect 3 를 활용한 엔터프라이즈 솔루션 개발사례

[ 21 ]

일반적인 구현 방식 (목록 상세 팝업)

첫 번째 팝업 : 매번 instance 생성 하고 rendering

두 번째 팝업 : 매번 instance 생성 하고 rendering

3. UI 성능 개선

Multi 화면 사용 시 View Class 생성을 어떻게 할 것인가..

V. Etnerprise Application 개발 시 고려사항

첫 번째 화면 : 목록화면

Ext.create(…

Ext.create(…

Ext.create(…

Ext.create(…

1. Layered popup 을 사용하여 heavy 한 DOM 생성으로 인해 성능 저하 2. 매번 instance 를 생성해야 하며, instance 생성 및 사용을 위해 서로를 알아야 하기 때문에 UI 간 상호 의존성이 너무 높아짐

Page 22: Sencha ExtJS 5 와 Sencha Architect 3 를 활용한 엔터프라이즈 솔루션 개발사례

[ 22 ]

Reference : bidList 최초 Activeitem 으로서 인스턴스 생성 및 렌더링

Panel Card Layout

새로운 UI Class

Reference : bidDetail lookupReference() 를 통해 호출될 때 인스턴스 한번만 생성 되고 재활용 됨

Reference : searchItem lookupReference() 를 통해 호출될 때 인스턴스 한번만 생성 되고 재활용 됨

생성/상세조회 이벤트만 발생

저장/닫기.. 이벤트 발생

선택 이벤트 발생

3. UI 성능 개선

V. Etnerprise Application 개발 시 고려사항

Link

Link

Link

성능 및 의존성을 고려한 구현 방식 (목록 상세 팝업)

Multi 화면 사용 시 View Class 생성을 어떻게 할 것인가..

event

event

event

최초 card layout loading 시 activeitem 만 instance 가 생성되도록 해야 함 (custom property 추가)

Card Layout

link

link

Page 23: Sencha ExtJS 5 와 Sencha Architect 3 를 활용한 엔터프라이즈 솔루션 개발사례

[ 23 ]

Rendering 시 Layout 실행 확인

3. UI 성능 개선

V. Etnerprise Application 개발 시 고려사항

suspendLayout() …. resumeLayout() 사용을 통해 Layout 실행 최소화 필요

Page 24: Sencha ExtJS 5 와 Sencha Architect 3 를 활용한 엔터프라이즈 솔루션 개발사례

[ 24 ]

복잡한 form 구성은 table layout 을 사용

3. UI 성능 개선

V. Etnerprise Application 개발 시 고려사항

Page 25: Sencha ExtJS 5 와 Sencha Architect 3 를 활용한 엔터프라이즈 솔루션 개발사례

[ 25 ]

panel ui : main

toolbar ui : page

panel ui : table (table layout 을 사용하는 panel)

4. Theme ui 사용

V. Etnerprise Application 개발 시 고려사항

개발자가 디자인 요소에 대한 최소한의 정보만 사용하도록 함

Page 26: Sencha ExtJS 5 와 Sencha Architect 3 를 활용한 엔터프라이즈 솔루션 개발사례

[ 26 ]

5. Test 자동화

V. Etnerprise Application 개발 시 고려사항

ExtJS version up 을 고려한 Test 자동화

Page 27: Sencha ExtJS 5 와 Sencha Architect 3 를 활용한 엔터프라이즈 솔루션 개발사례

[ 27 ]

End of Document

Page 28: Sencha ExtJS 5 와 Sencha Architect 3 를 활용한 엔터프라이즈 솔루션 개발사례

[ 28 ]

Grids

기본 기능

그리드에서 row 삭제 처리를 위한 column

삭제 컬럼에서 체크박스 선택 시 DB에 저장되지 않은 row 는 화면에서 바로삭제되고, 저장되어 있는 row 는 삭제 표시만 됨

Eliminate Column

제약 사항

특별한 제약사항 없음

Page 29: Sencha ExtJS 5 와 Sencha Architect 3 를 활용한 엔터프라이즈 솔루션 개발사례

[ 29 ]

Grids

기본 기능

그리드에서 row 별 상태정보를 보여주기 위한 컬럼 (추가/수정/삭제 표시)

Status Column

제약 사항

특별한 제약사항 없음

Page 30: Sencha ExtJS 5 와 Sencha Architect 3 를 활용한 엔터프라이즈 솔루션 개발사례

[ 30 ]

Grids

기본 기능

그리드에 콤보박스와 같이 store 와 바인딩이 필요한 형태의 컬럼을 사용할 때 사용

ViewModel 에 store 를 정의하고 초기화 시 store 에 데이터를 미리 로드 함

store column 에 binding 할 store 와 displayField, valueField 를 지정하면 됨

Store Column

제약 사항

특별한 제약사항 없음

Page 31: Sencha ExtJS 5 와 Sencha Architect 3 를 활용한 엔터프라이즈 솔루션 개발사례

[ 31 ]

Grids

기본 기능

그리드 컬럼에 cell merge 가 필요한 경우 사용

그리드에 plugin 추가하면 됨

CellMerge Plugin

제약 사항

특별한 제약사항 없음

Page 32: Sencha ExtJS 5 와 Sencha Architect 3 를 활용한 엔터프라이즈 솔루션 개발사례

[ 32 ]

Grids

기본 기능

그리드에 조회된 데이터 내에서 검색이 필요할 때 사용

Finder plugin 을 그리드에 추가하면 기능이 활성화 됨

Finder Plugin

제약 사항

브라우저에 조회된 데이터 내에서만 검색 가능

검색대상 선택

검색결과 highlighting

Page 33: Sencha ExtJS 5 와 Sencha Architect 3 를 활용한 엔터프라이즈 솔루션 개발사례

[ 33 ]

Grids

기본 기능

그리드 개인화 기능

틀고정, 컬럼 순서, 컬럼 사이즈, 컬럼 숨기기 정보를 저장하여 개인화 할 수 있음

개인화한 정보는 사용자ID 별로 DB에 저장됨

사용자가 직접 초기화 가능

Grid Stateful Plugin

제약 사항

특별한 제약사항 없음

Page 34: Sencha ExtJS 5 와 Sencha Architect 3 를 활용한 엔터프라이즈 솔루션 개발사례

[ 34 ]

Grids

기본 기능

Ctrl key 를 누른 상태에서 컬럼 헤더 클릭 시 복수 컬럼 정렬 가능

Sort Initialize 시 정렬 취소

MultiSort Plugin

제약 사항

브라우저에 조회된 데이터 내에서만 정렬 가능

정렬 초기화

Page 35: Sencha ExtJS 5 와 Sencha Architect 3 를 활용한 엔터프라이즈 솔루션 개발사례

[ 35 ]

Grids

기본 기능

그리드에서 row 별로 첨부파일을 관리해야 하는경우 사용

그리드에 Attachment Column 추가

row 별로 첨부된 파일 count 는 서버에서 조회 되어야 함

Attachment Column

제약 사항

특별한 제약사항 없음

첨부파일 개수

첨부파일 group key

Page 36: Sencha ExtJS 5 와 Sencha Architect 3 를 활용한 엔터프라이즈 솔루션 개발사례

[ 36 ]

Grids

확장 기능

기본 Filtering 기능을 확장한 Etna 플러그인 기능

모든 컬럼에 대해 텍스트 like filtering 가능

Excel 처럼 filtering 된 데이터 선택 가능

데이터 범위 지정 가능

그리드에 Etna Filter Plugin 만 추가하면 사용 가능

Advanced Grid Filtering

제약 사항

그리드에 조회되지 않은 데이터에 대한 Filtering 사용 시 서버의 데이터 조회 기능과 연계하여 구현해야 함

Filter 기능 활성화

Page 37: Sencha ExtJS 5 와 Sencha Architect 3 를 활용한 엔터프라이즈 솔루션 개발사례

[ 37 ]

Grids

확장 기능

그리드의 데이터 영역을 마우스 드래그로 선택하여 Ctrl+C, Ctrl+V 키를 사용하여 복사/붙여넣기 가능

Ct기+A 는 그리드의 데이터 영역 선택 가능

그리드에 Etna Selector Plugin 추가 시 활성화

Grid Selector

제약 사항

특별한 제약사항 없음

Page 38: Sencha ExtJS 5 와 Sencha Architect 3 를 활용한 엔터프라이즈 솔루션 개발사례

[ 38 ]

Grids

확장 기능

그리드에서 마우스 오른쪽 버튼 클릭 시 제공되는 컨텍스트 메뉴 (모바일 기기에서는 손가락으로 길게 누름. long-term 이벤트 사용)

그리드에 Etna Selector Plugin 추가시 활성화

컨텐스트 메뉴 모양은 원형과 직사각형 두가지 형태 제공

Grid Selector Context Menu

제약 사항

엑셀 다운로드, Filtering 기능 이외의 추가적인 메뉴 필요 시 협의 필요 함 - row 선택, column 선택, 전체 선택, 선택 해제, 복사/붙여넣기 기본 제공

Page 39: Sencha ExtJS 5 와 Sencha Architect 3 를 활용한 엔터프라이즈 솔루션 개발사례

[ 39 ]

Grids

확장 기능

그리드에 Etna Excel export plugin 추가시 기능 활성화 됨

범위 - 현재페이지 : 페이징 처리된 그리드의경우 현재페이지의 데이터만 다운로드 - 전체페이지 : 페이징 처리된 그리드에서 페이지와 상관없이 모든데이타 다운로드

렌더링 - 사용 : 그리드에서 코드성 데이터의 경우 코드 명을 다운로드 - 미사용 : 코드에 해당하는 값을 다운로드

Excel Download

제약 사항

공통 기능으로 서버에 부하를 주지 않도록 설계/구현됨

사용자 PC/브라우저(IE8) 성능에 따라 대용량 데이터 다운로드 성능 제약

일반적으로 대용량 데이터 건수는 협의 필요

Page 40: Sencha ExtJS 5 와 Sencha Architect 3 를 활용한 엔터프라이즈 솔루션 개발사례

[ 40 ]

Grids

확장 기능

그리드에 Etna Excel Import plugin 추가시 기능 활성화 됨

공통 기능으로 개발자 별도 구현 불필요 그리드에 업로드 한 후 서버에 저장 하는 로직만 구현하면 됨

엑셀 업로드 시 업로드 대상이 되는 그리드의 컬럼들과 실제 엑셀 파일에 있는 컬럼들이 일치 하지 않을 경우 사용자가 임의로 그리드 컬럼과 엑셀파일 컬럼을 연결 시킬 수 있는 기능 제공

Excel Upload

제약 사항

Upload 시 대용량 데이터에 대한 제약 (10,000+ 은 협의 필요)

IE8 브라우저에서 성능 제약

업로드한 엑셀 파일의 컬럼 목록

그리드의 컬럼을 엑셀 파일의 컬럼과 연결 시킬 때 사용

Page 41: Sencha ExtJS 5 와 Sencha Architect 3 를 활용한 엔터프라이즈 솔루션 개발사례

[ 41 ]

Grids

확장 기능

그리드에 많은 컬럼(100+)을 사용해야 하는 경우 브라우저 스크롤 성능에 문제

Etna Horizontal Buffered Scroll Plugin 추가시 많은 컬럼 사용 가능

연간 일별 계획/실적 그리드의 경우 400 여개의 컬럼 사용

Many colums

제약 사항

IE8 도 어느정도 성능을 보장하지만 IE 상위 버전 또는 크롬 브라우저 보다 성능상 제약 있음

250 개 컬럼 사용시 가로 스크롤

Page 42: Sencha ExtJS 5 와 Sencha Architect 3 를 활용한 엔터프라이즈 솔루션 개발사례

[ 42 ]

Grids

확장 기능

트리 그리드에서 컬럼 별로 Filtering 사용 가능

별도 구현 없이 Etna Tree Finder Plugin 추가 시 기능 활성화 됨

검색 대상 컬럼 지정 가능 (검색 대상 컬럼은 자동으로 지정 됨)

검색어 입력 후 다음->다음 클릭 시 마다 해당 검색결과 위치로 이동 함

Tree Finder

제약 사항

트리 그리드에 모든 데이터가 조회된 경우에 사용 가능

Page 43: Sencha ExtJS 5 와 Sencha Architect 3 를 활용한 엔터프라이즈 솔루션 개발사례

[ 43 ]

Form Field

기본 기능

Form Panel 에 plugin 추가 시 panel 내에 있는 입력 field 들의 clear 버튼이 활성화 됨

입력값이 있는 field 에 마우스 오버 시 clear 버튼이 활성화 됨

입력값을 간단히 삭제하는 용도로 사용

AutoClearButton Form Plugin

제약 사항

특별한 제약사항 없음

Page 44: Sencha ExtJS 5 와 Sencha Architect 3 를 활용한 엔터프라이즈 솔루션 개발사례

[ 44 ]

Form Field

기본 기능

일반 Form Field 컴포넌트 처럼 TinyMCE editor 를 사용 할 수 있도록 함

HTML editor 로 사용

TinyMCE 에서 제공하는 기본 plugin 도 사용 가능

TinyMCE Editor

제약 사항

Architect 에서TinyMCE Plugin 들을 추가하기 위해서는 Process Config 에 직접 추가해야 함

TinyMCE 의 Plugins

TinyMCE field

Page 45: Sencha ExtJS 5 와 Sencha Architect 3 를 활용한 엔터프라이즈 솔루션 개발사례

[ 45 ]

Form Field

확장 기능

체크박스 기능 대체용으로 Toggle Button 사용

체크박스보다 사용자 시인성이 좋음

데이터 binding 가능 (value 속성 사용)

Button 에 보여지는 text 와 실제 value 를 각각 지정 가능 (onText, onValue, offText, offValue)

Toggle Field

제약 사항

특별한 제약사항 없음

Page 46: Sencha ExtJS 5 와 Sencha Architect 3 를 활용한 엔터프라이즈 솔루션 개발사례

[ 46 ]

Form Field

확장 기능

멀티 파일 첨부 가능

Drag&Drop 으로 파일 첨부 가능

섬네일 또는 목록 형태로 조회 가능

이미지 첨부의 경우 이미지 뷰어 기본 제공

Etna Attachment 컴포넌트 사용

Advanced File Uploads

제약 사항

Drag&Drop 기능은 HTML5 기능으로 HTML5 지원 브라우저에서만 동작 (IE8, IE9 는 미지원)

Page 47: Sencha ExtJS 5 와 Sencha Architect 3 를 활용한 엔터프라이즈 솔루션 개발사례

[ 47 ]

Grid

확장 기능

수정 가능, 필수 입력, 수정된 항목에 대한 표현을 cell 단위로 background 사용

Cell Marker

제약 사항

특별한 제약사항 없음

Page 48: Sencha ExtJS 5 와 Sencha Architect 3 를 활용한 엔터프라이즈 솔루션 개발사례

[ 48 ]

Grid

확장 기능

Cell Tips

제약 사항

특별한 제약사항 없음

수정 가능, 필수 입력, 수정된 항목에 대한 표현을 cell 단위로 표시