Sencha Theme

1. ExtJS Theme 를 변경할 수 있는 방법

ExtJS에서는 Theme를 수정할수 있는 방법은 크게 3가지가 존재합니다.

- Sass 수정

- CSS 직접수정

 

ExtJS의 테마는 기본적으로 Sass로 구성되어 있습니다.
Sencha 버전과 상관없이 일정한 테마를 유지시키고 싶다면 반드시 Sass 방식으로 구현해야만 합니다.

2. Theme 구조

아래그림은 ExtJS의 Theme 상속구조에 대해서 나와 있습니다. 각 테마에 대해서 간단히 기술해보겠습니다.

 

Base
패키지명은 ext-theme-base이며 모든테마의 부모가 되는 가장 최상위 테마입니다.
최소한의 CSS와 ExtJS가 화면에 layout되기 위해서 반드시 필요한것들만 들어있습니다.
ext-theme-base 는 수정이 불가능하고 해당테마의 오버라이드도 반드시 피해야만 합니다.

즉 절대로 이 테마를 건드리시면 안됩니다.

Netural
패키지명은 ext-theme-neutral이며 Base 테마를 상속받아서 구현이 되어있습니다.
대부분의 sytle의 설정이 가능하고 거의 모든 ExtJS컴포넌트들의 테마설정들이 Netural테마에 정의되어있습니다.

Neptune
테마명은 ext-theme-neptune 이며 Netural테마를 상속받았습니다.
현재 주로 사용되는 Flat한 디자인입니다.

Classic
패키지명은 ext-theme-classic이며 Netural테마를 상속받았습니다.
컴포넌트들이 그라데이션이 처리되어있는데 이전 90년대 후반에 유행되는 디자인들입니다.

 

3. Custom Theme 선정하기

Custom 테마는 Neptune 계열을 상속받아서 진행하는걸 권장합니다.

Classic 계열은 90년도 후반에 유행하는 디자인이라서 요즘 추세와 맞지 않기 때문입니다.

Netural Theme로 하면 안되는 이유
Netural Theme는 고도로 추상화 되어 있어서 수정해야할 Sass 변수가 수백가지가 넘기 때문입니다.
즉 직접 구현해야할 부분과 Override해야할 부분을 일일이 찾아서 구현해야하기 때문에 매우 비효율적입니다.