Sencha ExtJS 5 와 Sencha Architect 3 를 활용한 엔터프라이즈 솔루션 개발사례 센차 아키텍트를 활용한 대형 엔터프라이즈 프로젝트 협업 사례 소개 EMRO - 김광섭 이사

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

2. [ 2 ]
I. ㈜엠로 소개
II. 솔루션 시연
III. 왜 ExtJS 와 Architect 를 선택했는가?
IV. Extension 개발 사례
V. Enterprise Application 개발 시 고려사항
Table of Contents

3. [ 3 ]
III. 왜 ExtJS 와 Architect 를 선택했는가?
1. History of EMRO UI
2. Experience with ExtJS
3. Why ExtJS?
4. Why Architect?

4. [ 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
UIFramework변경검토배경

5. [ 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 를 선택했는가?

6. [ 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

7. [ 7 ]
4. Why Architect?
주요 고려사항
III. 왜 ExtJS 와 Architect 를 선택했는가?
1. Extension add-on
2. 개발자 learning-curve 단축
4. UI design 편의성
5. 테마 작업
3. 개발 품질 유지

8. [ 8 ]
IV. Extension 개발 사례
1. 신규 기능 추가
2. override 를 통한 확장/bug fix
3. external library integration
4. 다국어 지원

9. [ 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) 표현을 위한 컬럼

10. [ 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)

11. [ 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)

12. [ 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 포맷팅 반영

13. [ 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)

14. [ 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)

15. [ 15 ]
IV. Extension 개발 사례
3. external library integration
data binding
External javascript library 를 Architect extension 으로 추가
TinyMCE Editor

16. [ 16 ]
IV. Extension 개발 사례
4. 다국어 지원
Dictionary 관리를 통한 간편한 다국어 반영 지원

17. [ 17 ]
V. Enterprise Application 개발 시 고려사항
1. 프로젝트 환경 구축
2. 모듈화 및 Class loading 전략
3. UI 성능 개선
4. Theme ui 사용

18. [ 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

19. [ 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 파일 매핑 정보

20. [ 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 다운로드

21. [ 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 간 상호 의존성이 너무 높아짐

22. [ 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

23. [ 23 ]
Rendering 시 Layout 실행 확인
3. UI 성능 개선
V. Etnerprise Application 개발 시 고려사항
suspendLayout()
….
resumeLayout()
사용을 통해 Layout 실행 최소화 필요

24. [ 24 ]
복잡한 form 구성은 table layout 을 사용
3. UI 성능 개선
V. Etnerprise Application 개발 시 고려사항

25. [ 25 ]
panel  ui : main
toolbar  ui : page
panel  ui : table (table layout 을 사용하는 panel)
4. Theme ui 사용
V. Etnerprise Application 개발 시 고려사항
개발자가 디자인 요소에 대한 최소한의 정보만 사용하도록 함

26. [ 26 ]
5. Test 자동화
V. Etnerprise Application 개발 시 고려사항
ExtJS version up 을 고려한 Test 자동화

27. [ 27 ]
End of Document

28. [ 28 ]
Grids
기본 기능
 그리드에서 row 삭제 처리를 위한 column
 삭제 컬럼에서 체크박스 선택 시
DB에 저장되지 않은 row 는 화면에서
바로삭제되고, 저장되어 있는 row 는
삭제 표시만 됨
Eliminate Column
제약 사항
 특별한 제약사항 없음

29. [ 29 ]
Grids
기본 기능
 그리드에서 row 별 상태정보를 보여주기 위한
컬럼 (추가/수정/삭제 표시)
Status Column
제약 사항
 특별한 제약사항 없음

30. [ 30 ]
Grids
기본 기능
 그리드에 콤보박스와 같이 store 와 바인딩이
필요한 형태의 컬럼을 사용할 때 사용
 ViewModel 에 store 를 정의하고
초기화 시 store 에 데이터를 미리 로드 함
 store column 에 binding 할 store 와
displayField, valueField 를 지정하면 됨
Store Column
제약 사항
 특별한 제약사항 없음

31. [ 31 ]
Grids
기본 기능
 그리드 컬럼에 cell merge 가 필요한 경우
사용
 그리드에 plugin 추가하면 됨
CellMerge Plugin
제약 사항
 특별한 제약사항 없음

32. [ 32 ]
Grids
기본 기능
 그리드에 조회된 데이터 내에서 검색이 필요할
때 사용
 Finder plugin 을 그리드에 추가하면 기능이
활성화 됨
Finder Plugin
제약 사항
 브라우저에 조회된 데이터 내에서만 검색 가능
검색대상 선택
검색결과 highlighting

33. [ 33 ]
Grids
기본 기능
 그리드 개인화 기능
 틀고정, 컬럼 순서, 컬럼 사이즈, 컬럼 숨기기
정보를 저장하여 개인화 할 수 있음
 개인화한 정보는 사용자ID 별로 DB에 저장됨
 사용자가 직접 초기화 가능
Grid Stateful Plugin
제약 사항
 특별한 제약사항 없음

34. [ 34 ]
Grids
기본 기능
 Ctrl key 를 누른 상태에서 컬럼 헤더 클릭 시
복수 컬럼 정렬 가능
 Sort Initialize 시 정렬 취소
MultiSort Plugin
제약 사항
 브라우저에 조회된 데이터 내에서만 정렬 가능
정렬 초기화

35. [ 35 ]
Grids
기본 기능
 그리드에서 row 별로 첨부파일을 관리해야
하는경우 사용
 그리드에 Attachment Column 추가
 row 별로 첨부된 파일 count 는 서버에서
조회 되어야 함
Attachment Column
제약 사항
 특별한 제약사항 없음
첨부파일 개수
첨부파일
group key

36. [ 36 ]
Grids
확장 기능
 기본 Filtering 기능을 확장한 Etna 플러그인
기능
 모든 컬럼에 대해 텍스트 like filtering 가능
 Excel 처럼 filtering 된 데이터 선택 가능
 데이터 범위 지정 가능
 그리드에 Etna Filter Plugin 만 추가하면
사용 가능
Advanced Grid Filtering
제약 사항
 그리드에 조회되지 않은 데이터에 대한
Filtering 사용 시 서버의 데이터 조회 기능과
연계하여 구현해야 함
Filter 기능 활성화

37. [ 37 ]
Grids
확장 기능
 그리드의 데이터 영역을 마우스 드래그로
선택하여 Ctrl+C, Ctrl+V 키를 사용하여
복사/붙여넣기 가능
 Ct기+A 는 그리드의 데이터 영역 선택 가능
 그리드에 Etna Selector Plugin 추가 시 활성화
Grid Selector
제약 사항
 특별한 제약사항 없음

38. [ 38 ]
Grids
확장 기능
 그리드에서 마우스 오른쪽 버튼 클릭 시
제공되는 컨텍스트 메뉴
(모바일 기기에서는 손가락으로 길게 누름.
long-term 이벤트 사용)
 그리드에 Etna Selector Plugin 추가시 활성화
 컨텐스트 메뉴 모양은 원형과 직사각형
두가지 형태 제공
Grid Selector Context Menu
제약 사항
 엑셀 다운로드, Filtering 기능 이외의
추가적인 메뉴 필요 시 협의 필요 함
- row 선택, column 선택, 전체 선택,
선택 해제, 복사/붙여넣기 기본 제공

39. [ 39 ]
Grids
확장 기능
 그리드에 Etna Excel export plugin 추가시
기능 활성화 됨
 범위
- 현재페이지 : 페이징 처리된 그리드의경우
현재페이지의 데이터만 다운로드
- 전체페이지 : 페이징 처리된 그리드에서
페이지와 상관없이 모든데이타
다운로드
 렌더링
- 사용 : 그리드에서 코드성 데이터의 경우
코드 명을 다운로드
- 미사용 : 코드에 해당하는 값을 다운로드
Excel Download
제약 사항
 공통 기능으로 서버에 부하를 주지 않도록
설계/구현됨
 사용자 PC/브라우저(IE8) 성능에 따라
대용량 데이터 다운로드 성능 제약
 일반적으로 대용량 데이터 건수는 협의 필요

40. [ 40 ]
Grids
확장 기능
 그리드에 Etna Excel Import plugin 추가시
기능 활성화 됨
 공통 기능으로 개발자 별도 구현 불필요
그리드에 업로드 한 후 서버에 저장 하는
로직만 구현하면 됨
 엑셀 업로드 시 업로드 대상이 되는 그리드의
컬럼들과 실제 엑셀 파일에 있는 컬럼들이
일치 하지 않을 경우 사용자가 임의로
그리드 컬럼과 엑셀파일 컬럼을 연결 시킬 수
있는 기능 제공
Excel Upload
제약 사항
 Upload 시 대용량 데이터에 대한 제약
(10,000+ 은 협의 필요)
 IE8 브라우저에서 성능 제약
 업로드한 엑셀 파일의 컬럼 목록
 그리드의 컬럼을 엑셀 파일의 컬럼과
연결 시킬 때 사용

41. [ 41 ]
Grids
확장 기능
 그리드에 많은 컬럼(100+)을 사용해야 하는
경우 브라우저 스크롤 성능에 문제
 Etna Horizontal Buffered Scroll Plugin
추가시 많은 컬럼 사용 가능
 연간 일별 계획/실적 그리드의 경우
400 여개의 컬럼 사용
Many colums
제약 사항
 IE8 도 어느정도 성능을 보장하지만
IE 상위 버전 또는 크롬 브라우저 보다
성능상 제약 있음
250 개 컬럼 사용시 가로 스크롤

42. [ 42 ]
Grids
확장 기능
 트리 그리드에서 컬럼 별로 Filtering 사용 가능
 별도 구현 없이 Etna Tree Finder Plugin 추가
시 기능 활성화 됨
 검색 대상 컬럼 지정 가능
(검색 대상 컬럼은 자동으로 지정 됨)
 검색어 입력 후 다음->다음 클릭 시 마다
해당 검색결과 위치로 이동 함
Tree Finder
제약 사항
 트리 그리드에 모든 데이터가 조회된 경우에
사용 가능

43. [ 43 ]
Form Field
기본 기능
 Form Panel 에 plugin 추가 시
panel 내에 있는 입력 field 들의 clear 버튼이
활성화 됨
 입력값이 있는 field 에 마우스 오버 시
clear 버튼이 활성화 됨
 입력값을 간단히 삭제하는 용도로 사용
AutoClearButton Form Plugin
제약 사항
 특별한 제약사항 없음

44. [ 44 ]
Form Field
기본 기능
 일반 Form Field 컴포넌트 처럼
TinyMCE editor 를 사용 할 수 있도록 함
 HTML editor 로 사용
 TinyMCE 에서 제공하는 기본 plugin 도
사용 가능
TinyMCE Editor
제약 사항
 Architect 에서TinyMCE Plugin 들을 추가하기
위해서는 Process Config 에 직접 추가해야 함
TinyMCE 의 Plugins
TinyMCE field

45. [ 45 ]
Form Field
확장 기능
 체크박스 기능 대체용으로 Toggle Button
사용
 체크박스보다 사용자 시인성이 좋음
 데이터 binding 가능 (value 속성 사용)
 Button 에 보여지는 text 와 실제 value 를
각각 지정 가능
(onText, onValue, offText, offValue)
Toggle Field
제약 사항
 특별한 제약사항 없음

46. [ 46 ]
Form Field
확장 기능
 멀티 파일 첨부 가능
 Drag&Drop 으로 파일 첨부 가능
 섬네일 또는 목록 형태로 조회 가능
 이미지 첨부의 경우 이미지 뷰어 기본 제공
 Etna Attachment 컴포넌트 사용
Advanced File Uploads
제약 사항
 Drag&Drop 기능은 HTML5 기능으로
HTML5 지원 브라우저에서만 동작
(IE8, IE9 는 미지원)

47. [ 47 ]
Grid
확장 기능
 수정 가능, 필수 입력, 수정된 항목에 대한
표현을 cell 단위로 background 사용
Cell Marker
제약 사항
 특별한 제약사항 없음

48. [ 48 ]
Grid
확장 기능
Cell Tips
제약 사항
 특별한 제약사항 없음
 수정 가능, 필수 입력, 수정된 항목에 대한
표현을 cell 단위로 표시