회사 관리자 페이지를 새로 만들어 보자는 생각으로 처음 접하게된 javascript framework
Ext-js 깔끔하고 왠지 끌리는 디자인이 맘에든다.
일단 시작해 보자!
http://www.extjs.com/ 이곳에 가면 다운로드 받을수 있다.
현재 (2010.02.23) 최신버전은 Ext 3.1 이다.
다운로드 받은 소스안에 보면 여러가지 examples 소스들이 여러게 있다.
/ext/docs/index.html 을 열어보면 Ext API Documentation을 볼수 있다.
영어라 난 잘 모르겠다 -_-;
그래서 난 http://extjs.com/learn/Tutorials 이것부터 보기로 했다.
물론 영어다 Tutorial보면서 하나하나씩 따라해볼려고 한다.
처음 공부해볼것은 Tutorial: Basic Page Setup(http://www.extjs.com/learn/Tutorial:Basic_Page_Setup)
소스는 다음과 같다.
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title id="page-title">Title</title>
<!-- Ext 에서 쓰이는 기본 CSS 파일이다. -->
<link rel="stylesheet" type="text/css" href="ext/resources/css/ext-all.css">
<!-- 아마도 Ext-js 기본이 되는 js 파일인거같다. -->
<script type="text/javascript" src="ext/adapter/ext/ext-base.js"></script>
<!-- Ext-js 의 모든것들이 다 있지 않을까 싶다. -->
<!-- 두가지가 있다. ext-all-debug.js || ext-all.js -->
<!--첫번째 꺼는 디버깅가능한 원본이고 두번째꺼는 코드를 압축한 파일이다.-->
<script type="text/javascript" src="ext/ext-all-debug.js"></script>
<script type="text/javascript">
// 이건 BLANK 이미지 URL 을 성정하는 부분이다.
// 아직은 어떤 의미로 쓰이는지는 잘모르겠다 -_-;;
Ext.BLANK_IMAGE_URL = 'ext/resources/images/default/s.gif';
Ext.onReady(function() {
// 이곳이 실질적인 소스가 들어가는 곳이다.
});
</script>
</head>
<body></body>
</html>
이렇게 하면 일단 Ext-js 를 사용해서 개발할 준비가된 페이지가 완성 된거 같다.
로그인 부터 하나하나 따라해봐야 겠다. 얼마나 걸릴지 모르겠지만 차근차근 하나씩
해볼려고 한다. 제일 문제는 영어가 걸린다 -_-;;
영어도 같이 공부해야 겠다.ㅋ
댓글 없음:
댓글 쓰기