Ext JS 6 커스텀 컴포넌트 만들기

참고 : https://wikidocs.net/2890 가이드를 참고하여 실습

워크스페이스 생성

$> sencha generate workspace example01

앱 생성

$> cd example01/

$> sencha -sdk ../ext6 generate app -classic App01 ./App01

커스텀 테마 생성

$> sencha generate theme my-classic-theme

앱 와치 (실시간 컴파일 및 제티 구동)

$> sencha app watch

테마 상속 설정

example01/packages/local/my-classic-theme 경로의 package.json 수정

“extend”: “theme-crisp”,

앱 테마 설정

app.json 수정

“theme”:”my-classic-theme”,

브라우저 실행

http://localhost:1841/App01/?platformTags=fashion:true

글로벌 베이스 폰트 색상 설정

example01/packages/local/my-classic-theme/sass/var 경로에 Component.scss 파일을 생성하고 내용 추가

$base-color: #317040;

앱 와치

$> sencha app watch

브라우저 실행

http://localhost:1841/App01/?platformTags=fashion:true

패널 타이틀 폰트 변수 설정

my-classic-theme/sass/var/panel 폴더 생성하고 하위에 Panel.scss 파일을 생성한 후 아래 내용을 추가하고 브라우저를 확인한다.

$panel-header-font-family: dynamic(Times New Roman);

제공되는 컴포넌트의 변수들을 확인하려면 API를 찾아서 상단에 보면 “CSS Vars” 가 보이는데 마우스를 오버하면 변수들을 볼 수 있다.

커스텀 패널 믹스인 설정

my-classic-theme/sass/src/panel 폴더를 생성하고 하위에 Panel.scss 파일을 생성 후 아래 내용을 입력하고 저장한다.

@include extjs-panel-ui(

$ui: ‘highlight-framed’,

$ui-header-background-color: red,

$ui-border-color: red,

$ui-header-border-color: red,

$ui-body-border-color : red,

$ui-border-width: 5px,

$ui-border-radius: 5px,

$ui-header-color: white

);

앱에서 믹스인 적용

App01/app/view/main 경로에 있는 Main.js 파일을 열어 아래 내용을 수정/추가하고 저장한다.

ui: ‘highlight’, // 수정

frame: true, // 추가

브라우저 실행

제공되는 컴포넌트의 믹스인들을 확인하려면 API를 찾아서 상단에 보면 “CSS Mixins” 가 보이는데 마우스를 오버하면 믹스인을 볼 수 있다.