Ext JS Sencha CMD로 Ext JS 시작하기

  1   Sencha CMD로 Ext JS 시작하기

---

 Ext JS는 자바나 그 외 프레임워크같이 Jar파일 또는 Js 파일만 있어도 개발하는데 지장이 없다. 하지만 Sencha CMD라는 툴을 이용해 Ext JS 어플리케이션을 생성하게 되면 개발중 테스트나, 빌드등 여러 작업들을 명령어를 통해 수행할 수 있게되는 편리함이 있다.

우선 Sencha CMD 를 다운받을 수 있는 링크이다.

Sencha CMD : http://www.sencha.com/products/sencha-cmd/

Sencha CMD를 설치하고 앱을 빌드하기 위해서는 루비가 필요한데 각 운영체제 비트수에 맞게 설치하면된다.

Ruby on rails : http://rubyinstaller.org/downloads/

Sencha Cmd와 Ruby를 설치 후 커맨드창을 열어 밑의 명령어를 입력하면 설치가 잘 되었는지 확인할 수 있다.

sencha

이제 앱을 생성해야 하는데 Sencha CMD 가 기본적으로 제공해주는 Trial 버전이 아닌 Ext Js Gpl버전 을 가져다가 앱을 생성할것이다.

Ext Js Gpl 5.0.1 : http://cdn.sencha.com/ext/gpl/ext-5.0.1-gpl.zip

Ext Js Gpl버전을 적당한 곳에 위치시키고 이제 이클립스를 통해 Ext Js 앱을 생성할 프로젝트를 생성한다.

나는 Dynamic Web Project를 생성하고 WebContent 폴더 아래에 Ext Js앱을 생성하도록 했다. 그리고 현재 Ext Gpl의 경로와 프로젝트의 경로는 다음과 같다.

D:\lib\ext\ext-5-gpl         ->  Ext Js Gpl 위치.

C:\Users\Administrator\Desktop\Develop\Project\Eportfolio\Extjs-sample\WebContent    -> 프로젝트위치

그럼 이제 커맨드 창을 열어 다음과 같은 명령어를 입력하면 Sencha CMD Ext Js 어플리케이션을 생성하게 된다.

sencha  -sdk  D:\lib\ext\ext-5-gpl  generate  app  MyApp  C:\Users\Administrator\Desktop\Develop\Project\Eportfolio\Extjs-sample\WebContent

각각의 경로는 자신의 Ext JS gpl 경로와 프로젝트 경로를 입력하면된다. generate app 뒤에오는 "MyApp"은 생성할 Ext 어플리케이션의 이름으로 자신이 하고싶은걸로 하면 된다.

위의 명령어를 실행하면 다음과 같이 지정한 위치에 필요한 소스들과 bootstrap.js와 bootstrap.json 파일을 생성해준다.

위의 명령어가 정상적으로 실행됬다면 프로젝트 구조는 다음과 같아졌을 것이다. WebContent 폴더 아래에 WEB-INF 폴더와 META-INF폴더를 제외한 모든파일은 Sencha CMD에서 생성한 파일들이다.

Sencha CMD로 프로젝트를 구성했을때 구조

그럼 이제 프로젝트를 톰캣에 올리고 실행해보면 다음같은 화면을 만날수 있게된다.

Secnha Cmd에서 기본적으로 만들어주는 화면