ExtJs Sencha CMD 공용 component 만들기 및 사용하기

Ext Js 를 Sencha 홈페이지만 보고 공부하려니 막히는 부분이 많네요.

그 중 궁금했던 한가지를 찾았습니다.

공통 package 사용방법 입니다.

아래와 같은 방법으로 생성 한 package 의 파일은 Build 시 해당 file 이 app.js 에 자동으로 추가됩니다.

sencha generate package common

그리고 만들어진 package 사용을 위해서는 각 app 의 app.json 파일의 requires 부분에 common 을 추가 해주어야 합니다.

"requires": [

"common"

]

이제 실제로 공용으로 사용할 파일을 package/local/common/src 아래에 생성 합니다.

아래와 같은 내용으로 package/local/common/src/Commonui.js 파일을 생성합니다.

Ext.define('Common.Commonui', {

extend: 'Ext.tab.Panel',

xtype: 'app-common'

});

사용을 원하는 app view 에서 생성된 object 를 requires 항목에 추가해 줍니다.

아래 내용을 apps/app1/Main.js 파일에 추가 합니다.

requires: [

...,

'Common.Commonui'

]

이후 local app에서 생성된 것과 동일한 방법으로 xtype 과 component name 을 사용할 수 있습니다.

이렇게 해서 공용으로 사용될 목적으로 생성된 파일들을 사용하는 방법을 알았는데 웬만한 app 가 아니면 공용 component 를 만들어 사용할 일은 없을 것 같습니다.

페이지 사이즈는 조금 커지겠지만 인터넷 속도도 빠르고 하니 큰 프로젝트 아니면 별 문제 없을 것 같네요.

이상으로 ExtJs Sencha CMD 공용 component 만들기 및 사용하기에 대한 글 이였습니다.