ExtJS6 실전응용편 네번째 강좌 -컴포넌트로 웹 프로그램 제작 1부(Part 1. Create a WEB Program with ExtJS 6 components)
ExtJS 6 강좌 영상은 링크를 통해 제공됩니다.
(YOUTUBE 채널 구독해주세요!!)
서버API 만들기 전, 화면개발 먼저 진행하겠습니다.
app.js
기존에 프로젝트 생성한 ExtJS 빌드 구조에서 app.json내에 존재하는 mainView를 주석 또는 지워줍니다.
로그인 - Login Form
app → view → login 디렉토리 생성 후, Login.js 파일 생성
로그인의 경우 일반적으로 패널 또는 윈도우 컴포넌트로 생성을 하지만, 어떤 컴포넌트를 이용해서 만드는거에 대한 정답은 없습니다.
여러분이 편하신 컴포넌트로 제작을 하시면 되지만, 저같은 경우는 윈도우 컴포넌트를 이용하여 만들어 보았습니다.
Application.js
config 속성알아보기
stores
정의한 스토어를 프로그램에서 사용할 때 배열형태로 정의해주는 공간입니다.
대부분 정적인 스토어만 선언을 해주고, 뷰모델에 사용되는 데이터스토어는 선언을 해주지 않아도 됩니다.
launch
페이지가 완전히로드되면 자동으로 호출되는 config 이므로 여기에 최초 호출하는 컴포넌트를 Ext.widget() 을 이용하여 불러와서 화면에 출력시킵니다.
onAppUpdate
응용 프로그램 캐시 또는 로컬 저장소 캐시에 대한 업데이트가 감지 될 때 자동으로 호출됩니다.
앱의 버전이 업데이트 감지를 하는 거랑 유사한(?) 거라고 볼수 있습니다.
이것은 주로 프로덕션 빌드에 적용됩니다.
위의 작업이 완료되었다면 실행 화면을 확인 해봐야겠죠?
1. CMD 창에서 sencha app watch 실행
2. spring boot 실행
로그인창 뜨는것까지 확인이 됐다면, 다음은 메인템플릿을 제작해 봅니다.
메인 - Main Template
Main.js 파일을 생성하여 간단하게 상단,좌측,중앙영역으로 분리 후, 좌측영역은 Tree List 컴포넌트를 이용하여 메뉴를 구성해봅니다.
강좌영상과 동일하게 구성이 되었나요?
그럼 다음 강의때 이어서 화면을 제작해보도록 하겠습니다 ^^
