Ext JS

오픈소스 비즈니스 컨설팅
둘러보기로 가기 검색하러 가기

YUI에서 발전한 자바 스크립트 라이브러리인 Ext JS를 정리 합니다.

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)
  • id로 Html Element를 가져 옵니다.
  • 내부적으로 Ext.Element Ext.Element.get(id)를 사용함
  • Ext.Element.getAttribute("~") : Attribute의 값을 반환
HTMLElement Ext.getDom(id)
  • id로 HTML Element를 가져 옵니다.
  • HTMLElement.value
  • HTMLElement
  • item.style.~

Ext.Base

  • Properties
  • Methods

Ext.Element

  • Properties
value
  • Element가 포함하고 있는 내용
  • 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.'
               }
           ]
       });
   }
});

참고 문헌