Benney Blog

Ext.define("Docs.controller.Tabs", {
...    
	refs: [{        
		ref: "doctabs",		// this.getDoctabs()로 접근이 가능하다. 하단에서.        
		selector: "#doctabs"    
	},{        
		ref: "welcomeIndex",	// this.getWelcomeIndex()로 접근      
	  	selector: "#welcomeindex"    
	}, {      
	  	ref: "classIndex",		// this.getClassIndex()로 접근        
		selector: "#classindex"    
	}]
....    
	onLaunch: function () { 	// init 이 후 호출    	
		this.getDoctabs().setStaticTabs(Ext.Array.filter([	    											
							this.getWelcomeIndex().getTab(),     											
							this.getClassIndex().getTab()],     											
				function (a) {            
					a       
 				}
 		));    
 	}

// app/view/welcome/Index.js  
     getTab: function () {
        return this.hasContent ? {
            cls: "index",
            href: "#",
            tooltip: "Home"
        } : false
    }
 

    
    initComponent: function () {	
    	// XTemplate을 통해 루프돌며 탭을 보여질 수 있도록 구성해놓는다.
    	this.tpl = Ext.create("Ext.XTemplate", '', 
    						'
', '
', 
    						'
 
', 
    						'
', "
", "", 
    						'
 
', '
');
        this.html = this.tpl.applyTemplate(this.staticTabs);
        this.tabTpl = Ext.create("Ext.XTemplate", '
', '
', 
        		'
', ' ', 
        		'{text}', "
", 
        		'
 
', "
");
        this.callParent()
    },
    setStaticTabs: function (b) {
    	console.log(b);
        this.staticTabs = b;
        this.refresh()
    },
    refresh: function () {
        var i = this.tpl.applyTemplate(this.staticTabs);
        var f = this.maxTabsInBar() < this.tabs.length ? this.maxTabsInBar() : this.tabs.length;
        this.tabsInBar = this.tabs.slice(0, f);
        for (var j = 0; j < f; j++) {
            var h = this.tabCache[this.tabs[j]];
            var g = Ext.apply(h, {
                visible: true,
                active: this.activeTab === h.href,
                width: this.tabWidth()
            });
            i += this.tabTpl.applyTemplate(g)
        }
        this.el.dom.innerHTML = i;
        if (this.activeTab && this.activeTab !== this.tabs[f - 1]) {
            this.activateTab(this.activeTab);
            Docs.History.push(this.activeTab)
        }
        //this.highlightOverviewTab(this.activeTab);
        //this.createOverflow();
        //this.addToolTips()
    },

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

/**
 * 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할 수 있도록 하자.
  
  
  
  

본격적으로 코딩에 들어 가기 앞서 디렉토로 구조를 먼저 설명합니다. 현재는 app.js에 모든 코드가 들어가 있지만 이렇게 되면 혼란스럽기도 하고 본래 mvc모델의 모습을 파악하기 힘듭니다. 해서 아래 그림처림 디렉토리를 나누면서 코딩을 하도록 하겠습니다.

/**
 * File			: LocalStore.js
 * Desc 		: store
 */
Ext.define("Docs.LocalStore", {
    storeName: "",
    init: function () {
       // 로컬 스토리지에 대한 초기화.
    	 this.localStorage = !! window.localStorage;
    	 // 여기서 this.storeName는 Docs.Settings의 storeName으로 
    	 // Classes Controller에서 Settings라는 이름의 store를 참조하기 때문에 아래의 코드가
    	 // 유효하다.
         this.store = Ext.getStore(this.storeName); 
         if (this.localStorage) {
             this.cleanup();
             this.store.load();
             if (window.addEventListener) {
                 window.addEventListener("storage", Ext.Function.bind(this.onStorageChange, this), false)
             } else {
                 window.attachEvent("onstorage", Ext.Function.bind(this.onStorageChange, this))
             }
         }
    },
    onStorageChange: function (b) {
       
    },
    syncStore: function () {
        
    },
    cleanup: function () {
       
    }
});

/**
 * File			: Settings.js
 * Desc 		: 
 */
Ext.define("Docs.Settings", {
    extend: "Docs.LocalStore",
    storeName: "Settings",  // 참조만.
    singleton: true,
    set: function (d, f) {
        
    },
    get: function (c) {
       
    }
});

/**
 * File			: ContentGrabber.js
 * Desc 		: 
 */
Ext.define("Docs.ContentGrabber", {
    singleton: true,
    get: function (f) {
        var e;
        var d = Ext.get(f);
        if (d) {
            e = d.dom.innerHTML;
            d.remove();
        }
        return e
    }
});

/**
 * File			: app/model/Setting.js
 * Class Name	: Docs.model.Setting
 * Desc 		: 
 */
Ext.define("Docs.model.Setting", {
    fields: ["id", "key", "value"],
    extend: "Ext.data.Model",
    proxy: {
        type: window.localStorage ? "localstorage" : "memory",
        id: Docs.data.localStorageDb + "-settings"
    }
});

/**
 * File			: app/store/Settings.js
 * Class Name	: Docs.store.Settings
 * Desc 		: 
 */
Ext.define("Docs.store.Settings", {
    extend: "Ext.data.Store",
    model: "Docs.model.Setting"
});


// 이하 app.js
/*
 * 메인 클래스로 전체 레이아웃을 관장하는 Docs.view.Viewport를 호출
 */
Ext.define("Docs.Application", {
    extend: "Ext.app.Application",
    name: "Docs",
    appFolder : 'app',
    launch: function () {
    	Docs.App = this;
        Ext.create("Docs.view.Viewport");
        Ext.get("loading").remove()
    }
});
Ext.onReady(function () {
    Ext.create("Docs.Application")
});


/**
 * File			: app/view/Viewport.js
 * Class Name	: Docs.view.Viewport
 * Desc 		: 화면 레이아웃
 */
Ext.define("Docs.view.Viewport", {
	extend: "Ext.container.Viewport",
	id: "viewport",
    layout: "border",
    border: 1,
    defaults: {
        xtype: "container"
    },
    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'}
                }, {
                    xtype: "container",
                    html : '빈공간',
                    style: {borderColor:'#000000', borderStyle:'solid', borderWidth:'1px'},
                    flex: 1
                }, {
                    id: "loginContainer",
                    xtype: "authentication",
                    style: {borderColor:'#000000', borderStyle:'solid', borderWidth:'1px'},
                    width: 500,
                    padding: "10 20 0 0"
                }, {
                    xtype: "searchcontainer",
                    id: "search-container",
                    style: {borderColor:'#000000', borderStyle:'solid', borderWidth:'1px'},
                    width: 230,
                    margin: "4 0 0 0"
                }]
            }, {
                xtype: "doctabs"
            }]
    	},
    	{
    		region : 'center',
    		style: {borderColor:'#000000', borderStyle:'solid', borderWidth:'1px'},
    		html :'center',
    		layout: "border",
    		minWidth: 800,
    		items: [{
                region: "west",
                xtype: "treecontainer",
                id: "treecontainer",
                border: 1,
                bodyPadding: "10 9 4 9",
                width: 240
            },{
    			region: "center",
                id: "center-container",
                layout: "fit",
                minWidth: 800,
                border: false,
                padding: "5 10",
                style: {borderColor:'#000000', borderStyle:'solid', borderWidth:'1px'},
                items: {
                    id: "card-panel",
                    cls: "card-panel",
                    xtype: "container",
                    layout: {
                        type: "card",
                        deferredRender: true
                    },
                    items: [{
                    	autoScroll: true,
                        xtype: "welcomeindex",
                        id: "welcomeindex"
                    }, {
                        xtype: "container",
                        id: "failure"
                    }, {
                        autoScroll: true,
                        xtype: "classindex",
                        id: "classindex"
                    }]
                }
    		}]
    	}, {
            region: "south",
            id: "footer",
            height: 20,
            contentEl: "footer-content" // index.html div  footer-content.
        }];
        this.callParent(arguments)
    },
    setPageTitle: function (b) {
       
    }
});

/**
 * app/view/Header.js
 * 프로그램 상단
 */
Ext.define("Docs.view.Header", {
    extend: "Ext.container.Container",
    alias: "widget.docheader",
    contentEl: "header-content", // index.html 내부의 header-content div를 현 클래스에 삽입.
    initComponent: function () {       
        this.callParent();
    },
    listeners: {       
    }
});
/**
 * app/view/auth/Login.js
 * 상단 로그인영역
 */
Ext.define("Docs.view.auth.Login", {
    extend: "Ext.container.Container",
    alias: "widget.authentication",
    html : '로그인 영역',
    loginTplHtml: [
'
',
                   '', 
                   '', 
                   ' Remember Me', 
                   '', " or ", 
 '회원가입',
 "
"],
    initComponent: function () {
        this.callParent(arguments);
    }
});

/**
 * app/view/Tabs.js
 * 상단 탭영역 , 계속 늘어나겠죠..
 */
Ext.define("Docs.view.Tabs", {
    extend: "Ext.container.Container",
    alias: "widget.doctabs",
    id: "doctabs",
    html  :'탭영역',
    style: {borderColor:'#000000', borderStyle:'solid', borderWidth:'1px'},
    initComponent: function () {	
    	this.callParent();
    },
    setStaticTabs: function (b) {
        this.staticTabs = b;
        //this.refresh()
    }
});

/**
 * File			: app/view/welcome/Index.js
 * Class Name	: Docs.view.welcome.Index
 * Widget Name	: welcomeindex
 * Desc 		: 환영페이지
 */
Ext.define("Docs.view.welcome.Index", {
    extend: "Ext.container.Container",
    alias: "widget.welcomeindex",
    requires: ["Docs.ContentGrabber"],
    cls: "welcome iScroll",
    initComponent: function () {
        this.html = Docs.ContentGrabber.get("welcome-content");
        this.hasContent = !! this.html;
        this.callParent(arguments)
    },
    getTab: function () {
        return this.hasContent ? {
            cls: "index",
            href: "#",
            tooltip: "Home"
        } : false
    }
});
/**
 * File			: app/view/cls/Index.js
 * Class Name	: Docs.view.cls.Index
 * Widget Name	: classindex
 * Desc 		: 클래스 Api 페이지
 */
Ext.define("Docs.view.cls.Index", {
    extend: "Ext.container.Container",
    alias: "widget.classindex",
    requires: ["Docs.ContentGrabber"],
    cls: "class-categories iScroll",
    margin: "15 10",
    autoScroll: true,
    initComponent: function () {
        this.callParent(arguments);
    },
    getTab: function () {
        var b = (Docs.data.classes || []).length > 0;
        return b ? {
            cls: "classes",
            href: "#!/api",
            tooltip: "API Documentation"
        } : false
    }
});

// 이제 index.html에 아래와 같이 위에서 언급된 파일들을 기입하자.
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  

이로서 Doc어플리케이션의 레이아웃을 구성했습니다. 프로그램의 뼈대를 만드는게 제일 중요합니다. 이번 강좌는 그런면에서 뼈대를 완성하고 또 완성된 뼈대에 어떻게 프로그램들을 채워 넣을지 알아보는게 핵심입니다.

이제 app.js파일의 원상태를 확인 할 수 있으니 파일내용을 찬찬히 들여다 보기로 하겠습니다.
우선 메인 함수부터 찾아야 겠죠. 모든 프로그램이 그렇겠지만 맨 아래쪽에서 메인함수와 주요 클래스들을 발견할 수 있었습니다.
실마리는 여기서 부터 잡아나가면 되겠죠

그런데 좀 이상한 것은 파일 라인수 입니다. 4만5천라인이라니~ 용량도 1.3메가나 나갑니다.~ ext-all-debug.js파일이 13만라인에 4메가 정도인데 이건 뭔가 이상합니다.
해서 파일 내용을 좀 자세하게 살펴 보았더니 클래스 중에 Ext로 시작하는 클래스가 상당히 존재합니다. 아래 그림처럼 말이죠!

 

일단 예상하기로는 빌드 과정에서 용량을 최소화 하기 위해 해당 어플리케이션에서 사용하는 클래스들만 따로 골라서 app.js파일에 통체로 같이 빌드하지 않았나 싶습니다. 그래야만 전체 클래스를 내려받는것 보다 낫고 필요한 클래스만 내려 받을 수 있도록 해서 성능을 개선하기 위함이지 않나 싶습니다.  이놈들의 정체가 뭔지 확실히 알려면 Ext로 시작하는 클래스를 ext-all-debug.js와 비교해 보면 알 수 있겠죠 클래스 중 하나를 골라 ext-all-debug.js파일의 동일한 클래스와 내용이 같은지 확인 해보니 100%동일 한 것으로 확인 되었습니다.

분석하는 입장에서는 모두 불필요하니 Ext로 시작하는 클래스들은 모두 app.js파일에서 제거하였습니다. 그리고 브라우저를 통해 다시 실행해봅니다. 이상없는걸 보니 제 생각이 맞는것 같습니다. 일단 이상태의 소스를 카피하여 남겨 놓습니다.

그런데 Ext클래스들을 제거 했는데도 소스량이 아직도 상당히 많아 보여서 확인 해보니 CodeMirror라는 놈이 있습니다. 소스의 맨처음에 시작하여 4천라인정도를 사용하고 있습니다. 일단 제거 해보고 나중에 필요하다면 다시 넣는것으로 하겠습니다.

이제 소스코드 량은 4천 라인정도로 실제 필요한 내용들만 남기고 제거가 되었습니다. 이 상태의 소스도 남겨 놓습니다.

이제 하나씩 프로그램을 다시 조립해 보겠습니다.

우선 app.js의 내용을 모두 삭제합니다. index.html도 내용을 모두 정리합니다. 아래 처럼요 그래야 처음 부터 하나씩 조립해서 완성품을 만들 수 있겠죠!

이제 웹브라우저를 통해 실행해보면 아무것도 보이지 않습니다. 브라우저는 항상 파이어폭스를 쓰는게 좋습니다. 구글크롬도 좋지만 디버그 모드의 활용은 파이어폭스쪽이 좀더 나아 보입니다.
이제 본격적으로 app.js파일에 코딩을 하고 프로그램을 만들어봅니다. 제일 중요한 것은 이 어플리케이션의 layout이 어떻게 구성되어 있느냐를 파악해야 합니다. 해서 뼈대 부터 만들고 하나씩 뼈대위에 살을 붙여 보도록 하겠습니다.
아래 그림은 Doc 어플리케이션의 뼈만 앙상한 모습입니다.

이제 실제 소스는 어떤지 확인해보겠습니다.
아래 그림처럼 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에 복사해 넣습니다. 다시 실행해보면 정상적으로 아무런 이상없이 실행되는 것을 볼 수 있습니다.

Ext JS 4.1 beta가 출시 되었습니다. 새로운 것들이 좀 있겠지만 개인적으로 Doc Application을 좀 분석 해볼려고 합니다.
Ext JS 4.1 beta 를 다운로드 받아사 압축을 풀고 톰캣에 세팅을 합니다. 압축 파일이 48메가 정도입니다.

압축을 풀고 이클립스 프로젝트를 생성해서 소스를 포팅한 모습입니다.

톰캣에 올려 실행하면 아래처럼 sencha.com과 동일한 화면을 볼 수 있습니다.

제가 분석해볼려고 하는 부분은 위의 화면에서 하단 중간의 "API Docs"를 클릭하면 실행되는 어플리케이션입니다.
이 어플리케이션에는 일반적으로 개발에 필요한 요소들이 모두 존재하고 구조적으로 잘 디자인되어 있어 이것을 차용하여 향후 다른 프로젝트에서 기본 베이스로 사용해볼까 하고 생각하고 있습니다. 아무리 생각해보아도 참 잘 디자인 되어 있습니다.
그리고 제가 풀지 못했던 몇가지 문제를 이 어플리케이션을 분석하여 해결될 수 있지 않을까 기대를 하고 있습니다.

이 강좌를 따라해보시려고 한다면 위의 화면 캡쳐에서 보시는 Toturial을 공부하시고 보시는게 좋을 듯 합니다.

드디어 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>

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

시리가 미래의 모습을 실현 할 수 있을 까요?
정말 저정도 인지 확인해 봐야하는데 말이죠 !!
이 동영상을 보면서 흡사 전격제트 작전 키트가
생각 납니다.

지난 9월 1차 오픈된 시스템의 시스템 구성도이다.
ExtJS를 UI프레임웍으로 정하고 3달 정도 고생해서 완성된 시스템이다. 아직도 수개월을 더 고생해야 하지만.

개인적으로 ExtJS는 흥미로운 구석이 아주 많은 놈이지만 마냥 믿고 쓰기에는 아직 우리 현실에 어울리지
 않거나 버전 4의 자질구레한 버그를 감뇌해야 한다.

Gxt (GWT+EXT)에 비해서 성능은 떨어지지만 핸들링 면에서 java기반의 Gxt보다는 잇점이 많은 듯하다.

그러나 GWT기반 개발에 경우 최종 컴파일된 소스를 운영단에 넘겨 ExtJS(최적화 하지 않은 상태)와 성능을
비교하면 상대적으로 GWT App가 훨씬 & 상당히 빠른 성능을 보인다. 이는 아마도 GWT가 컴파일 시
상당히 뛰어난 최적화 작업을 하여 결과물을 토해 난다는 결론이다.
ExtJS또는 최적화가 가능하지만 개인적인 생각이나 최적화를 아무리 잘해도 GWT보다는 못할 듯 하다.

시간 날 때 강좌나 하나 해보려고 한다. ... Gxt 강좌도 못하고 있는지라 뭐가 우선인지는 모르지만
휘발되기 전에 남겨 두어야 할텐데...