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