ExtJS6 스물여덟번째 강좌 - ExtJS 6 화면교체를 해보자 (Understanding ExtJS 6 component changes)

ExtJS 6 강좌 영상은 링크를 통해 제공됩니다.

(YOUTUBE 채널 구독해주세요!!)

https://youtu.be/vUSf6LnEWOk

우리는 지금까지 기본 컴포넌트 생성법에 대하여 알아보았습니다.

간단하게 템플릿 구성을 한 후, 중앙영역에 우리가 미리 정의해놓은 컴포넌트를 변경해보는 시간을 가져보도록 합니다.

app.js Code 

위와 같이 코드에서 각 버튼 클릭이벤트 발생 시, handler 함수내에 정의한 뷰포트의 중앙영역을 selector를 이용하여 변수에 담은 후, 중앙영역내에 있는 컴포넌트들을 모두 removeAll을 이용하여 삭제합니다. 그런 다음. add 함수를 이용하여 우리가 미리 define 해놓은 컴포넌트를 삽입하여 줍니다.

GridSample.js Code

ButtonSample.js Code

HTMLSample.js Code

위와 같이 미리 코드를 define 을 통하여 정의한 코드들을 app.js에서 클릭이벤트 발생시마다 정의된 컴포넌트들을 호출하는 것입니다.

Ext.define을 통해서 정의한 컴포넌트들을 extend config 에 정의 된 클래스의 모든 config, method 등 적용이 가능합니다.

페이지(컴포넌트) 교체를 위해서 아래와 같이 구성만 기억하면 되겠습니다.

1. 패널.removeAll(true) 를 이용하여 교체하고자 하는 영역내의 자식 컴포넌트들을 모두 삭제

2. 패널.add() 를 통하여 내가 추가하고자 하는 컴포넌트를 적용