Ext JS 6 Theme 생성 테스트

  1   테마 패키지 생성

---

cmd :  sencha generate theme myTheme

cmd 실행위치 : [APP_HOME]/

1. 명령어 실행시 [APP_HOME]/packages/local 경로에 테마 패키지가 생성됨.

2. [APP_HOME]/packages/local/myTheme/package.json 파일에서 네임스페이스를 blank로 설정 ↓↓

3. [PACKAGE_HOME]/sass/var 폴더 하위에 Ext 폴더와 사용자 앱의 네임스페이스명(MyExtApp)으로 폴더생성.

두개의 폴더를 생성하는 이유는 위에서 package.json파일에서 namespace값을 "Ext"로 설정 할 경우 sencha cmd는 개발자가 앱에서 생성한 클래스는 무시하고 Ext에서 제공하는 기본적인 컴포넌트의 scss만 검색하기 때문에 개발자가 개발한 클래스는 style을 적용할 수 없는 문제점 발생.

Ext에서 제공하는 컴포넌트만 스타일링 해서 사용하겠다 하면 namespace값을 기본값 Ext로 사용하면 되지만, 개발자가 개발한 클래스를 스타일링 하기위해서는 namespace 값을 blank로 설정 후 Ext 기본컴포넌트 스타일링과 개발자가 개발한 클래스(컴포넌트) 스타일링을 분리 해야함.

즉, 위와같은 상황에서 Ext.panel.Panel에 대한 스타일링은 [PACKAGE_HOME]/sass/var/Ext/panel/Panel.scss 파일을 생성하여 스타일링,

개발자가 개발한 MyExtApp.cmp.Test 클래스에 대한 스타일링은 [PACKAGE_HOME]/sass/var/MyExtApp/cmp/Test.scss 파일에 정의하여 스타일링 해야함.

만일, namespace 값을 "Ext"로 설정할 경우 [PACKAGE_HOME]/sass/var/ 폴더 하위에 따로 분리할 필요없이

[PACKAGE_HOME]/sass/var/panel/Panel.scss 파일을 생성하면 자동으로 인식됨. 단 이때에는 개발자가 개발한 클래스는 인식되지 않게된다.

4. 스타일링을 완료 후 [APP_HOME]/app.json 파일에서 빌드 설정.

키값 myTheme에 매칭된 이름에 따라 해당 테마가 적용되어 [APP_HOME]/build/production에 빌드된다.

빌드된 소스는 해당 폴더 하위에 각각 theme 이름을 따라 myTheme, myTheme2 폴더로 빌드되며, 이때 이 폴더들을 profile이라고함.

5. index페이지에서 sencha cmd 에서 자동으로 생성해주는 코드