Ext JS
둘러보기로 가기
검색하러 가기
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> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> </head> <link rel="stylesheet"type="text/css" href="resources/css/ext-all.css" /> <script src="ext-all.js"></script> <!-- ext-all-debug --> <script src="local/ext-lang-ko.js"></script> <script type="text/javascript">lib/jquery.js"></script> if (Ext.BLANK_IMAGE_URL.substr(0, 5) != 'data: ') { Ext.BLANK_IMAGE_URL = "image/s.gif"; } </script> <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
- Methods
Ext.Element Ext.get(id) |
|
HTMLElement Ext.getDom(id) |
|
- HTMLElement
- item.style.~
Ext.Base
- Properties
- Methods
Ext.Element
- Properties
value |
|
- Methods
ElementLoader
DomHelper
- Properties
- Methods
DomQuery
- Properties
- Methods
select( String path, [HTMLElement root] ) : HTMLElement[] | |
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.' } ] }); } });