Benney Blog

    
// History.js 의 예
Ext.define("Docs.etc.History", {
    singleton: true,
    init: function () {
    	
        Ext.util.History.init(function () {
        	
            this.historyLoaded = true;		// 최초에 true이고 이후 변경없음.
            this.initialNavigate();
        }, this);
        // 아래는 history가 변경될 때 navigate함수를 호출하라는 내용이다.
        // "이벤트", "호출함수", "인자1", "인자2"
        // 단 인자는 모두 object여야한다.
        Ext.util.History.on("change", this.navigate, this, {'a':'aa'});
    },
    navigate: function (c, d) { // 탭을 클릭하면 history 변경되고 아래를 실행
    	console.log('navigate::', c, d); // 이렇게 확인
    	var d = this.parseToken(c);
    	// loadIndex(true) : true는 왜 ??
    	if (d.url === "#!/guide") {
    		Docs.App.getController("Guides").loadIndex(true);
    	} else {
    		if (d.type === "guide") {
                Docs.App.getController("Guides").loadGuide(d.url, true);
            }
    	}
    }

-

Ext.define("Docs.view.Viewport", {
..
..
    initComponent: function () {
    	this.items = [{
    		region: "north",
            id: "north-region",
            style: {borderColor:'#000000', borderStyle:'solid', borderWidth:'1px'},
            title: "north-region",
            height: 65,
            layout: {
                type: "vbox",
                align: "stretch"
            },
            items: [{
                height: 37,
                xtype: "container",
                layout: "hbox",
                items: [{
                	xtype: "docheader",
                	style: {borderColor:'#000000', borderStyle:'solid', borderWidth:'1px'}
                }, {
..

Ext.define("Docs.view.Header", {
    extend: "Ext.container.Container",
    alias: "widget.docheader",
    contentEl: "header-content", // index.html 내부의 header-content div를 현 클래스에 삽입.

// index.html
	

이제 필요한 각각의 탭을 관장할 컨트롤러를 만들어 보자.

/**
 * File			: app/controller/Content.js
 * Class Name	: Docs.controller.Content
 * Desc 		: 컨트롤러 상위클래스
 */
Ext.define("Docs.controller.Content", {
    extend: "Ext.app.Controller",
    MIDDLE: 1,
    title: "",
    onLaunch: function () {
    }
});
/**
 * File			: app/controller/Welcome.js
 * Class Name	: Docs.controller.Welcome
 * Desc 		: 환영페이지 컨트롤러
 */
Ext.define("Docs.controller.Welcome", {
    extend: "Docs.controller.Content",
    baseUrl: "#",
    init: function () {
    	console.log('Docs.controller.Welcome.init called..');
        this.addEvents("loadIndex")
    }
});

/**
 * File			: app/controller/Classes.js
 * Class Name	: Docs.controller.Classes
 * Desc 		: 
 */
Ext.define("Docs.controller.Classes", {
    extend: "Docs.controller.Content",
    baseUrl: "#!/api",
    title: "API Documentation",
    requires: ["Docs.Settings"],
    stores: ["Settings"],
    models: ["Setting"],
    init: function () { 
    	//console.log('Docs.controller.Classes call', this.stores);
    }
});

/**
 * File			: app/controller/Tabs.js
 * Class Name	: Docs.controller.Tabs
 * Desc 		: 상단 탭영역 처리
 */
Ext.define("Docs.controller.Tabs", {
    extend: "Ext.app.Controller",
    //requires: ["Docs.Settings"],
     refs: [{
        ref: "doctabs",		// this.getDoctabs()로 접근이 가능하다. 하단에서.
        selector: "#doctabs"
    },{
        ref: "welcomeIndex",
        selector: "#welcomeindex"
    }, {
        ref: "classIndex",
        selector: "#classindex"
    }],
    init: function () {
    	/*this.getController("Classes").addListener({
            showClass: function (b) {
            	//console.log('b', b);
                this.addTabFromTree("#!/api/" + b)
            },
            scope: this
        });*/
    },
    onLaunch: function () {
    	this.getDoctabs().setStaticTabs(Ext.Array.filter([	
    											this.getWelcomeIndex().getTab(), 
    											this.getClassIndex().getTab()], 
    											function (a) {
            return a
        }));
    }
});

/**
 * File			: app.js
 * Class Name	: Docs.Application
 * App Name		: Docs
 * Desc 		: Main Class
 */
// app.js 에 controller : ["Welcome"]를 추가한다.
Ext.define("Docs.Application", {
    extend: "Ext.app.Application",
    name: "Docs",
    appFolder : 'app',
    controllers: ["Welcome","Classes","Tabs"],  // 이 부분을 추가한다.
    launch: function () {
    	Docs.App = this;
        Ext.create("Docs.view.Viewport");
        Ext.get("loading").remove()
    }
});

// 위의 4개 클래스를 index.html에서 access할 수 있도록 하자.
  
  
  
  

이제 실제 소스는 어떤지 확인해보겠습니다.
아래 그림처럼 docs폴더 구조를 확인 할 수 있습니다.

여기서 가장 중요한 역할을 하는 파일은 index.html과 app.js파일 입니다. 일단 두개의 파일은 분석하려면 수정해야 하니 하나씩 복사본을 만들어 놓았습니다.

우선 어플리케이션 구성에 대한 해답은 app.js파일에서 얻어야 할 듯 합니다. 이클립스는 무거우니 울트라로 열어보겠습니다. app.js를 열어보니 아래 그림처럼 도무지 해석하기 힘든 형태로 되어 있습니다. 마치 ext-all.js파일을 열었을때와 똑 같죠~ 아마도 최적화를 툴을 통해서 한것 같습니다. 아니면 이렇게 나올수 없겠죠. ExtJS 는 Sench SDK를 통해서 배포용 파일을 만들게 되는데 doc app 도 그러했겠죠~ 어찌 되었던 제게는 해석 가능한 소스가 필요해서 여기저기 폴더를 모두 뒤져보았지만 원 소스는 찾지 못하였습니다.

그렇다고 방법이 없는 것은 아닙니다. 전에 Web Desktop 소스를 활용해서 프로젝트에 적용할 때 이런 문제를 역 컴파일러를 통해 해결한 적이 있습니다. 위와 같은 소스를 아래의 그림과 같이 말끔하게 정리되게 끔 할 수 있습니다.

http://www.jsbeautifier.org/ 로 접속하면 아래 처럼 최적화된 자바스크립트 코드를 원상태로 알아볼 수 있도록 변환해줍니다.

app.js를 카피하여 붙여넣자.

상단의 변환 버튼을 클릭하면 아래처럼 변환되어 알아보기 쉬운 코드로 바꿔준다.

이제 변환된 코드를 통해 어플리케이션을 실행해보면 변환된 코드가 정상적인지 확인 할 수 있을 것입니다. 원본 상태의 app.js를 카피하여 복사본을 만들고 변환된 코드 내용을 app.js에 복사해 넣습니다. 다시 실행해보면 정상적으로 아무런 이상없이 실행되는 것을 볼 수 있습니다.

드디어 4.1 베타가 출시 되었습니다. 그 동안 4.1 pre버전에서 발생했던 아니 4.0 버전부터
발생했던 많은 버그들이 패치되어 출시 된듯 합니다. 해서 현재 개발된 시스템에 베타 버전을
테스트 해볼 계획입니다.

오늘 부터 연재할 글은 Sencha사이트의 내용을 기준으로 ExtJs를 설명하도록 하겠습니다.
(http://docs.sencha.com/ext-js/4-0)

1. Requirements

---

1.1. Web Browsers
Ext JS 4는 IE6에서 크롬까지 모든 브라우저를 지원한다. 뭐 모두 지원한다고 하지만 실제로는 아시는분은 아시겠지만 IE계열이 제일 형편없고 나머지 크롬이나 FF에 경우는 상당히 좋은 성능을 내고 있습니다.
IE6에 경우에는 아예 포기하는 것이 좋습니다. 저의 경우도 고객에게 IE6는 절대 사용하면 안되는 브라우저로 설득하고 꼭 업데이트 하여 최소 IE7도 아니고 IE8을 사용하도록 권고 아닌 강제하고 있습니다. 뭐 고객이 할아버지 일 경우도 있어서 아무리 강제해도 말을 듯지 않는 경우도 있습니다
1.2. Web Server
웹서버에 경우 뭘 쓰든 상관이 없습니다. Apache보다는 톰캣을 설치? 아니 설치하지 마시고 파일로 받아 압축 푸시고 사용하시는게 좋겠죠. 따로 설명하지 않겠습니다. 별게 없으니까요!!
1.3. Ext JS 4 SDK
일단 아래 주소에서 다운 받아 설치하자
http://www.sencha.com/products/sdk-tools/download/
  
2. Application Structure

---

2.1. Basic Structure
강제 사항은 아니지만 ExtJS 의 디렉토리 구조는 아래와 같이 하라고 권고 하고 있다.


일단 Document Root아래 index.html을 생성하고 아래와 같이 코딩하자.

<html>
<head>
    <title>Hello Ext</title>

    <link rel="stylesheet" type="text/css" href="/resources/css/ext-all.css">
    <script type="text/javascript" src="/ext-debug.js"></script>
    <script type="text/javascript" src="app.js"></script>
</head>
<body></body>
</html>

이제 app.js를 아래와 같이 코딩합니다.

Ext.application({
    name: 'HelloExt',
    launch: function() {
        Ext.create('Ext.container.Viewport', {
            layout: 'fit',
            items: [
                {
                    title: 'Hello Ext',
                    html : 'Hello! Welcome to Ext JS.'
                }
            ]
        });
    }
});

우선 코드를 실행합니다. 뷰포트위에 패널을 올리고 패널이름은 'Hello Ext'이고 패널의 내용부분에 'Hello! Welcome to Ext JS'라고 보여집니다.
이제 빌드를 해보겠습니다. 위에서 설치한 Sencha SDK가 정상적으로 설치되어 있어야 합니다.
확인은 cmd창에서 sencha라고 입력해보자.  아래와 같이 보여지면 정삭적으로 설치된것입니다.

Sencha Command v1.2.2

Copyright (c) 2011 Sencha Inc.

usage: sencha COMMAND [ARGS]

The available commands are:

   build                build a JSB project

   create jsb           generate a minimal JSB project for an application

   slice theme          slice a custom theme's images for IE

See 'sencha help COMMAND' for more information on a specific command.

 
빌드 전에 jsb파일을 생성하자. index.html파일이 있는 폴더로 이동해서 아래와 같이 실행하자.
index.html파일을 검사하고 관련 된 클래스등을 참조하여 jsb3파일을 만들게 됩니다.

D:\AppTeam\03_Project\02_eMarket\01_DevRoot\extDesigner\war\study>sencha create jsb -a http://localhost:8080/study/index.html -p app.jsb3

 
이제 jsb3파일을 이용해 빌드 작업을 해봅니다.

sencha build -p app.jsb3 -d .

 
이제 위의 작업을 실행한 폴더에 아래와 같은 두개의 파일이 생성되는 것을 볼수 있습니다.
1. all-classes.js  이 파일은 어플리케이션에서 사용할 클래스들을 모아놓는다. 현재는 비어 있을 것이다.
2. app-all.js 이 파일은  열어보시면 알겠지만 우리가 코딩한 app.js를 최소화 버전으로 만들어 은 것이다. 실제 배포시에는 이런식에 공백을 제가한 최소화빌드를 하게 되고 더 나아가면 최적화를 해서 용량을 더 줄이기도 한다.

기존 index.html파일을 카피하여 index-prod.html을 만들고 빌드 된 app-all.js파일을 이용해 실행해 보자.

<html>
<head>
    <title>Hello Ext</title>

    <link rel="stylesheet" type="text/css" href="/resources/css/ext-all.css">
    <script type="text/javascript" src="ext.js"></script>
    <script type="text/javascript" src="app-all.js"></script>
</head>
<body></body>
</html>

동일한 실행 결과를 얻을 것이다.