[ExtJs] 튜토리얼 1
2008/07/17 16:44:31 초급 프로젝트 만들기
1단계 :
다음과 같이 ExtJS 라이브러리를 사용할 때는
[파일명].css -> 디자인 정의
[파일명].html -> ExtJs 라이브러리를 사용하기 위해 스크립트로 선언해줘야 한다.
[파일명].js -> 실제 구동되는 내용이 들어간다.
세개의 파일을 만드는게 기본 구조이다.
본 화면은 Aptana 스튜디오 화면이다. 개발을 할때는 FireFox에 FireBug 플러그인을 설치하여
콘솔로 테스트를 해보는걸 권장한다.
2단계 :
테스트용이기 때문에 applayout.js 에는 아무 내용이 들어있지 않다. 콘솔 테스트 시에는 FireBug를 이용한다.
FireBug를 실행할 때는 FireFox 에서 F12 키를 눌러주면 된다.
테스트 서버 URL : http://aha.chonbuk.ac.kr/extJsTest/widget/applayout.html
- applayout.css
- body {
font-family:verdana,tahoma,helvetica;
padding:0px;
padding-top:0px;
font-size:13px;
background-color:#fff !important;
}
- applayout.html
- <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<link rel="stylesheet" type="text/css" href="lib/ext/resources/css/ext-all.css" /> - <!-- GC -->
<!-- LIBS -->
<script type="text/javascript" src="lib/ext/adapter/yui/yui-utilities.js"></script>
<script type="text/javascript" src="lib/ext/adapter/yui/ext-yui-adapter.js"></script>
<!-- ENDLIBS -->
<script type="text/javascript" src="lib/ext/ext-all-debug.js"></script>
<!-- Common Styles for the examples -->
<link rel="stylesheet" type="text/css" href="applayout.css" />
</head>
<body>
</body>
</html>
3단계:
FireFox에서 FireBug의 콘솔을 이용하여 테스트를 해볼 수 있다.
- Ext.get(document.body).update('<div id="test">테스트</div>'); <- body 태그 안에 내용을 갱신한다.
4단계: 작업 패널을 만들어 본다.
- Ext.get(document.body).update('<div id="test">테스트</div>');
- new Ext.Panel({ //<- 다음과 같이 윈도우 하나를 띄워준다.
renderTo: 'test', //<- 윈도우를 그릴 레이어 id 를 적어준다.
width: '200px', //<- 윈도우의 가로 사이즈를 나타낸다.
title: 'My Title', //<- 프레임 타이틀 이름을 표시한다.
html: 'My HTML content' //<- 실제적인 컨텐츠가 들어가는 부분이다.
});
5단계 : 작업 패널의 확장 속성을 주어보자!
파란색 상자로 쳐진 부분이 새로 추가한 내용이다. 작업화면에 다음과 같이 확장 가능한 화면이 표시된다.
6단계 : API 에서 필요로 하는 탭 기능으로 워크 스페이스 구현할 예제를 한번 만들어보았다
다음과 같이 Ext.TabPanel() 을 이용하면 다음과 같은 화면이 그려지게 된다. 생각보다 깔끔하게 잘 나온다.
7단계 : 탭패널을 이용하여 워크스페이스 만들어보기
탭 워크스페이스 예제의 구성 파일은다음과 같다
loripsum.html : 새로운 탭이 만들어질때 씌여지는 컨텐츠가 들어간다. 우선 아무 내용이나 집어넣었다.
sample0.html, sample1.html : 탭뷰가 갱신되는걸 표시하기 위한 컨텐츠, 우선 아무 내용이나
tab_actions.js : 탭 워크스페이스를 구현하는 자바스크립트 소스
tabLayout.html : 탭 워크스페이스의 레이아웃
탭 워크스페이스를 구현한 그림이다.
워크스페이스를 갱신하면 원래 있던 내용이 바뀐다.
새로운 워크스페이스를 추가하면 탭 워크스페이스가 늘어난다.
테스트 URL : http://aha.chonbuk.ac.kr/extJsTest/widget/tabLayout.html
- tabLayout.html
- <html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>TabPanel Tutorial</title>
<!-- Ext CSS and Libs -->
<link rel="stylesheet" type="text/css" href="lib/ext/resources/css/ext-all.css" />
<script type="text/javascript" src="lib/ext/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="lib/ext/ext-all.js"></script>
<!-- Custom CSS and Libs -->
<script type="text/javascript" src="./tab_actions.js"></script>
<link rel="stylesheet" type="text/css" href="shared/share.css" />
<style>
#actions li {
margin:.3em;
}
#actions li a {
color:#666688;
text-decoration:none;
}
</style>
</head>
<body>
- <ul id="actions" class="x-hidden">
<li>
<a id="use" href="#">워크스페이스 갱신</a>
</li>
<li>
<a id="create" href="#">새로운 워크스페이스 추가</a>
</li>
</ul>
<div id="tabs"></div>
</body>
</html>
- tab_action.js
- Ext.onReady(function(){
// Menu containing actions
var tabActions = new Ext.Panel({
frame:true,
title: '워크스페이스 관리',
collapsible:true,
contentEl:'actions',
titleCollapse: true
});
// Parent Panel to hold actions menu
var actionPanel = new Ext.Panel({
id:'action-panel',
region:'east', //<-자바의 레이아웃 구분과 같다. north, west, east, south, center
split:true,
collapsible: true,
collapseMode: 'mini',
width:200,
minWidth: 150,
border: false,
baseCls:'x-plain',
items: [tabActions] //<-앞 서 만든 워크스페이스 관리 프레임을 패널에 집어 넣는다.
});
// Main (Tabbed) Panel
var tabPanel = new Ext.TabPanel({
region:'center',
deferredRender:false,
autoScroll: true, - enableTabScroll:true, // <- 탭 이 화면에 다 표시 안될경우 좌우 스크롤 할 수 있게 해준다.
margins:'0 4 4 0',
activeTab:0,
items:[{
id:'tab1',
contentEl:'tabs',
title: '워크스페이스',
closable:true,
autoScroll:true
}]
});
// Configure viewport
viewport = new Ext.Viewport({
layout:'border',
items:[actionPanel,tabPanel]
});
// Adds tab to center panel
function addTab(tabTitle, targetUrl){
tabPanel.add({
title: tabTitle,
iconCls: 'tabs',
autoLoad: {url: targetUrl, callback: this.initSearch, scope: this},
closable:true
}).show();
}
// Update the contents of a tab if it exists, otherwise create a new one
function updateTab(tabId,title, url) {
var tab = tabPanel.getItem(tabId);
if(tab){
tab.getUpdater().update(url);
tab.setTitle(title);
}else{
tab = addTab(title,url);
}
tabPanel.setActiveTab(tab);
}
// Map link ids to functions
var count = 0;
var tabcount = 0;
var actions = {
'create' : function(){
addTab('새 워크스페이스'+tabcount,'loripsum.html');
tabcount++;
},
'use' : function(){
// Toggle between sample pages
updateTab('tab1','워크스페이스 갱신 ' + count + ' 회','sample'+(count%2)+'.html');
count++;
}
};
function doAction(e, t){
e.stopEvent();
actions[t.id]();
}
// This must come after the viewport setup, so the body has been initialized
actionPanel.body.on('mousedown', doAction, null, {delegate:'a'});
});
