- Ext JS 개요
- Ext JS 4.0 사용 설정
- Ext-JS 문법
- HTML 처리
- MVC Model
- Ext-JS Class
- Ext
- Ext.Base
- Ext.Element
- ElementLoader
- DomHelper
- DomQuery
- Menu
- Ext-JS Sample
- Application
- 참고 문헌
YUI에서 발전한 자바 스크립트 라이브러리인 Ext JS를 정리 합니다.
- 홈페이지 : http://www.extjs.com/
- 다운로드 : http://www.extjs.com/products/js/dewnload.php
- 라이센스 : GNU GPLv3, 상업적으로 사용시 구매 필요, http://www.sencha.com/products/extjs/license/
- 플랫폼 : JavaScript
- 매뉴얼 : http://www.extjs.com/deploy/dev/docs/
- 예제 : http://www.extjs.com/deploy/dev/examples/, Fedd Viewer, Simple Task
- FAQ : http://www.extjs.com/learn/Ext_FAQ
- Forum : http://www.extjs.com/forum/, http://www.extjs.com/learn/
Ext JS 개요
Ext JS 4.0 사용 설정
<html>
<head>
</head>
<!-- ext-all-debug -->
if (Ext.BLANK_IMAGE_URL.substr(0, 5) != 'data: ') {
Ext.BLANK_IMAGE_URL = "image/s.gif";
}
<body>
</body>
</html>Ext-JS 문법
- Namespace 지정
Ext.ns('My.cool');- 변수 선언
var MyWindow = Ext.extend(Object, { ... }); //--- 예전 방식
var MyWindow = Ext.define(className, members, onClassCreated);
Ext.define('My.own.Window', {
config: { //--- 속성
title: 'Title Here',
},
statics: { //--- 정적 속성
instanceCount: 0
},
constructor: function(config) { //--- 생성자
this.initConfig(config);
return this;
}
});- 오류 처리
throw new Error('[Ext.getDisplayName(arguments.callee) +']('+) Some message here');HTML 처리
- id로 찾기
Ext.get(id)
Ext.getDom(id) //--- DOM 모델을 반환 합니다.MVC Model
Ext-JS Class
Ext
Properties
{|cellspacing="0" cellpadding="2" border="1" width="100%" bgcolor="#FFFFFF" align="center" |- |width="30%" align="center" valign="middle" style="background-color:#eee;"|width="70%" align="center" valign="middle" style="background-color:#eee;" - align="center" valign="middle" style="background-color:#eee;" } Methods
{|cellspacing="0" cellpadding="2" border="1" width="100%" bgcolor="#FFFFFF" align="center" |- |width="30%" align="center" valign="middle" style="background-color:#eee;"|Ext.Element Ext.get(id) |width="70%"|id로 Html Element를 가져 옵니다.
내부적으로 Ext.Element Ext.Element.get(id)를 사용함
Ext.Element.getAttribute("~") : Attribute의 값을 반환
|- |align="center" valign="middle" style="background-color:#eee;"|HTMLElement Ext.getDom(id) |id로 HTML Element를 가져 옵니다.
HTMLElement.value
|- |align="center" valign="middle" style="background-color:#eee;"| | |- |align="center" valign="middle" style="background-color:#eee;"| | |- |align="center" valign="middle" style="background-color:#eee;"| | |- |align="center" valign="middle" style="background-color:#eee;"| | |}HTMLElement
- item.style.~
Ext.Base
Properties
{|cellspacing="0" cellpadding="2" border="1" width="100%" bgcolor="#FFFFFF" align="center" |- |width="30%" align="center" valign="middle" style="background-color:#eee;"|width="70%" align="center" valign="middle" style="background-color:#eee;" - align="center" valign="middle" style="background-color:#eee;" - align="center" valign="middle" style="background-color:#eee;" - align="center" valign="middle" style="background-color:#eee;" - align="center" valign="middle" style="background-color:#eee;" } Methods
{|cellspacing="0" cellpadding="2" border="1" width="100%" bgcolor="#FFFFFF" align="center" |- |width="30%" align="center" valign="middle" style="background-color:#eee;"|
| width="70%" |
|---|
| align="center" valign="middle" style="background-color:#eee;" |
| - |
| align="center" valign="middle" style="background-color:#eee;" |
| - |
| align="center" valign="middle" style="background-color:#eee;" |
| - |
| align="center" valign="middle" style="background-color:#eee;" |
| - |
| align="center" valign="middle" style="background-color:#eee;" |
| } |
Ext.Element
Properties
{|cellspacing="0" cellpadding="2" border="1" width="100%" bgcolor="#FFFFFF" align="center" |- |width="30%" align="center" valign="middle" style="background-color:#eee;"|value |width="70%"|Element가 포함하고 있는 내용
|- |align="center" valign="middle" style="background-color:#eee;"| | |- |align="center" valign="middle" style="background-color:#eee;"| | |- |align="center" valign="middle" style="background-color:#eee;"| | |- |align="center" valign="middle" style="background-color:#eee;"| | |- |align="center" valign="middle" style="background-color:#eee;"| | |}Methods
{|cellspacing="0" cellpadding="2" border="1" width="100%" bgcolor="#FFFFFF" align="center" |- |width="30%" align="center" valign="middle" style="background-color:#eee;"|
| width="70%" |
|---|
| align="center" valign="middle" style="background-color:#eee;" |
| - |
| align="center" valign="middle" style="background-color:#eee;" |
| - |
| align="center" valign="middle" style="background-color:#eee;" |
| - |
| align="center" valign="middle" style="background-color:#eee;" |
| - |
| align="center" valign="middle" style="background-color:#eee;" |
| } |
ElementLoader
DomHelper
Properties
{|cellspacing="0" cellpadding="2" border="1" width="100%" bgcolor="#FFFFFF" align="center" |- |width="30%" align="center" valign="middle" style="background-color:#eee;"|width="70%" align="center" valign="middle" style="background-color:#eee;" - align="center" valign="middle" style="background-color:#eee;" - align="center" valign="middle" style="background-color:#eee;" - align="center" valign="middle" style="background-color:#eee;" - align="center" valign="middle" style="background-color:#eee;" } Methods
{|cellspacing="0" cellpadding="2" border="1" width="100%" bgcolor="#FFFFFF" align="center" |- |width="30%" align="center" valign="middle" style="background-color:#eee;"|
| width="70%" |
|---|
| align="center" valign="middle" style="background-color:#eee;" |
| - |
| align="center" valign="middle" style="background-color:#eee;" |
| - |
| align="center" valign="middle" style="background-color:#eee;" |
| - |
| align="center" valign="middle" style="background-color:#eee;" |
| - |
| align="center" valign="middle" style="background-color:#eee;" |
| } |
DomQuery
Properties
{|cellspacing="0" cellpadding="2" border="1" width="100%" bgcolor="#FFFFFF" align="center" |- |width="30%" align="center" valign="middle" style="background-color:#eee;"|width="70%" align="center" valign="middle" style="background-color:#eee;" - align="center" valign="middle" style="background-color:#eee;" - align="center" valign="middle" style="background-color:#eee;" - align="center" valign="middle" style="background-color:#eee;" - align="center" valign="middle" style="background-color:#eee;" } Methods
{|cellspacing="0" cellpadding="2" border="1" width="100%" bgcolor="#FFFFFF" align="center" |- |width="30%" align="center" valign="middle" style="background-color:#eee;"|select( String path, [HTMLElement root] ) : HTMLElement
| width="70%" |
|---|
| align="center" valign="middle" style="background-color:#eee;" |
| - |
| align="center" valign="middle" style="background-color:#eee;" |
| - |
| align="center" valign="middle" style="background-color:#eee;" |
| - |
| align="center" valign="middle" style="background-color:#eee;" |
| - |
| align="center" valign="middle" style="background-color:#eee;" |
| } |
Menu
Ext.create('Ext.menu.Menu', {
width: 200,
height: 115,
plain: true,
floating: false,
renderTo: 'idMenu',
items: [{
text: '성남고객',
handler: showHideMenu
},{
text: '판교고객',
iconCls: 'add16'
}]
});Ext-JS Sample
Application
Ext.application({
name: 'HelloExt',
launch: function() {
Ext.create('Ext.container.Viewport', {
layout: 'fit',
items: [
{
title: 'Hello Ext',
html : 'Hello! Welcome to Ext JS.'
}
]
});
}
});참고 문헌
분류: JavaScript HTML5