Ext JS 4.1 beta Doc 어플리케이션 분석4

본격적으로 코딩에 들어 가기 앞서 디렉토로 구조를 먼저 설명합니다. 현재는 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어플리케이션의 레이아웃을 구성했습니다. 프로그램의 뼈대를 만드는게 제일 중요합니다. 이번 강좌는 그런면에서 뼈대를 완성하고 또 완성된 뼈대에 어떻게 프로그램들을 채워 넣을지 알아보는게 핵심입니다.