Flash와 Flex에 와 함께 찾아온 RIA 기술에 발전은 MS의 실버라이트와 Oracle의 JavaFX 과 함께 시장에서의 기대치를 극대화 했었다. 하지만 현재에 이르러는 RIA 기술 전반에 걸쳐 주춤하고 있는듯 해 보인다. 

Technology Radar 2010 소개글인 "JavaScript 필수 프로그래밍 언어로!!" 에서도 발표 하였지만 RIA 기술은 채택(adopt) 에서 접근(access) 단계로 무관심해도 될 단계로 다가가고 있다.  

최근 국외 indeed.com에서 RIA 기술 Job Trend 검색결과의 추이를 살펴 보니 Adobe의 Flex의 기술보다 보다 뒤늦게 2007년에 시작된 오픈 웹 기술인 JavaScript로 개발된 Ext JS 프레임워크가 Adobe Flex를 뛰어 넘었을 뿐 아니라 시장에서의 개발자 수요가 급격히 상승하고 있다.



http://www.indeed.com/jobtrends?q=javafx,+extjs,+adobe+flex&l=&relative=1

도대체 뭐길레 뜬금없이 JavaScript 프레임워크와 Flex와 JavaFX와 비교 할까?


Ext JS의 특징
Ext JS는 오직 JavaScript와 CSS로만 이루어진 JavaScript 프레임워크로 Flex가 갖는 대부분의 기술을 구현하고 있을 뿐 아니라 Google Web Toolkit인 Ext-GWT 버전으로 Java 개발자도 웹을 통해 성숙한 UI(Tab, Toolbar, Menu, Grid, Drag & Drop,Tree, Panel, Chart 등)를 손쉽게 구현할 수 있다는 장점도 있습니다.
















뿐만 아니라 최근에 Ext Designer라는 Ext JS 전용 RAD(Rapid Application Development)를 발표하였습니다.  이 도구는 웹 상에서 데스크탑 애플리케이션과 동일한 GUI를 웹 환경으로 빠르고 손쉽게 옮길 수 있도록 지원할 뿐 아니라 일반적으로 웹에서 이러한 GUI를 구축하기 위해서는 하나의 기능만 구현함에 있어서도 상당한 양의 JavaScript나 CSS, HTML 코드가 필요하지만 예를 들어 델파이나 비주얼 베이직, C++빌더에서 처럼 Ext JS도 원시코드를 개발자가 직접 작성하지 않고 간단한 설정 만으로도 웹에서 다양한 GUI를 구축할 수 있도록 합니다.




Ext JS 2010 Roadmap
이미 예상했던 데로 Ext JS는 올해에 목표로 mobile용으로 가벼운 UI 엔진을 Ext JS 프레임워크에 탑재할 계획을 가지고 있습니다.(개인적인 추측이 였습니다.) 댜양한 컴포넌트를 추가적으로 개발하고 Ext JS 4.0에서는 HTML5 WebSocket, Offline 지원을 계획을 가지고 있고 HTML5의 가시화와 함께 HTML5에 대한 지원도 이어질 것으로 보입니다.

Appcelerator사의 Titanium 이나 nitobi.com에서 후원중인 PhoneGap과 같은 솔루션은 플랫폼(Andorid, iPhone, Symbian)에 상관없이 JavaScript만으로 Device API에 접근하여 내장(Native) 애플리케이션을 개발할 수 있도록 지원하고 있습니다.  

더욱이 이런 오픈 웹 기술은 플러그인 기술인 Flash나 Silverlight 에 비해 가볍기 때문에 데스크탑에 비해 부족한 디바이스에서도 높은 성능을 통해 사용자에게 좋은 경험을 제공할 수 있을 것입니다.


단점이 있다면
Ext JS에는 한가지 뼈 아픈 추억을 가지고 있는데 바로 초창기 유명한 라이브러리인 prototype, YUI, jQuery의 Adapter로 동작을 해왔었으나 독립적인 플랫폼으로 파생되면서 회사와 개발을 유지하기 위해서 유료화로 전환 되었습니다.

이로 인해 국내 시장에서는 단순한 JavaScript 라이브러리의 경쟁에 있어서 비교 우위를 선정하기 위한 대상 이였을 뿐 이였고 거기에 더해 유료 라이브러리라는 딱지가 붙어서인지 그간 관심 밖의 이야기였던게 사실입니다.
이로 인해 레퍼런스가 필요한 개발자들에게는 찾아보기 힘든 국내 이용 사례, 한글 레퍼런스 덕분에 전전 긍긍 Ext JS 포럼을 쥐 잡듯이 뒤져야 했습니다.


하지만 희망이 있다면...
국내의 시장에서 실상 RIA의 기술이 얼마나 요구되어질 지 알 수는 없으나 오픈 웹 기술은 날로 발전하고 기대치는 HTML5로 인해 연일 증폭되고 있습니다.  거기에 더불어 모바일도 뜨거운 감자로 그 니즈는 어디로 튀어 오를지 모른는 것입니다. 

이렇듯 웹은 링크를 기반으로한 웹 서핑과 정보의 유통이였다면 현재와 미래에는 플랫폼으로 발전되고 그 위에 오픈 웹 기술을 통한 응용 애플리케이션의 수요가 증가할 것이라는 것은 현재의 흐름인 것은 분명해 보입니다.

여기에 Adobe의 Flash, Flex의 기술보다 아직 가야 할 길이 많이 남은 MS의 Silverlight와 까마득한 JavaFX와 오픈 웹 기술인 Ext JS. 과연 그 흐름은 어떻게 될까?



신고
Posted by Rhio.kim

개요
view 전용 클래스는 DataView외에 Ext.list.ListView도 있다.  DataView는 템플릿 기반 데이터 바인딩을 제공하여 사용자 UI 뷰를 생성하기 위한 클래스인 반면 ListView는 단순한 Grid 형태로 데이터를 나열한다.

ListView는 DataView를 확장하지만 tpl 구성옵션은 없고 대신에 columns 옵션을 가지고 있어 Grid의 columnModel과 비슷하다.


주요 기능
1. 컬럼 크기 조정
2. 열 선택
3. 열 너비는 초기 상태로 컨테이너의 비율로 자동으로 조정됨
4. 어떤 포맷의 데이터라도 렌더링을 위한 템플릿을 사용할 수 있다.
5. 가로 스크롤은 지원되지 않는다.
6. 컬럼 편집이 지원하지 않는다.


구조적 이해

var panel = new Ext.Panel({
   configuration options,

   items : new Ext.ListView({
      store : new Ext.data.JsonStore({ … }), //Store 객체
      columns : [ { … }, { … } ], //Column 모델 지정
      autoHeight : true,
      multiSelect : true, //다중 선택 모델 여부
      itemSelector : ‘div.thumb-wrap’, //선택 모델 실행할 노드 지정
      emptyText : ‘No images to display’
   })
});

위의 소스는 DataView와는 대부분 비슷하나 한가지 차이점이 있다.  그것은 사용자 뷰를 생성하기 위한 tpl 옵션이 빠지고 column 옵션이 대체되면서 템플릿 객체의 사용보다 Grid 형태와 같은 빠르고 가벼운 뷰 기능을 제공하는 것이다. 그럼 컬럼을 잠깐 살펴보자.


Column


     columns : [
{ header : 'Product', width : .5, dataIndex : 'title' },
{ header : 'Max Price', width : .15, dataIndex : 'price_max', align: 'center', tpl: '{price_max:usMoney}' },
{ header : 'Min Price', width : .15, dataIndex : 'price_min', align: 'center', tpl: '{price_max:usMoney}' },
{ header : 'Brand', width : .2, dataIndex : 'brand' }
]

컬럼은 객체 배열로 구성되고 다음과 같은 주요 속성을 부여하여 컬럼을 설정할 수 있다.

1. header : Grid에서 표시되는 첫번째 컬럼의 텍스트
2. dataIndex : Store에 저장된 데이터 Record의 필드명
3. width : 컬럼의 너비(0~1 은 백분율, 1 ~ n pixel)
4. align : 컬럼 가로 정렬 (필수는 아님)
5. tpl : 데이터 템플릿 (필수는 아님)


요약
ListView의 경우도 DataView와 마찬가지로 BoxComponent를 상속받기 때문에 레이아웃 객체에 구성요소로 쉽게 추가 할 수 있다.  하지만 이것은 고속의 데이터 뷰를 제공하기 위한 클래스로 템플릿 기능은 제공하지 않는 단순 Grid 형태만을 지원한다.

만약 Grid의 더 많은 고급 기능을 사용하고 싶다면 Ext.grid에 있는 GridPanel 컴포넌트를 사용해야 한다.


예시
 



더 읽기
작지만 강한 DataView 클래스 - http://rhio.tistory.com/352
Ext JS를 이용한 고급 웹 애플리케이션 UI 설계 – Grid, Store 편 - http://rhio.tistory.com/350



신고
Posted by Rhio.kim

개요
  view 클래스는 템플릿 기반 데이터 바인딩을 제공하여 데이터를 사용자 지정 UI 뷰로 생성하기 위한 클래스이다.  1.1 버전에서 제공되던 JsonView는 JSON 데이터를 위한 헬퍼 클래스였으나 3.x로 발전하면서 사라졌고 2.0에서 처음 선보인 DataView는 특정 데이터 포맷에 상관없이 Store를 기반으로 한 뷰 기능으로 더욱 발전하였다. 

  그리고 DataView는 BoxComponent 를 상속받고 있어 레이아웃 객체에 구성요소(Component)로 쉽게 추가할 수 있게 되었고 또한 XTemplate 클래스를 지원하여 더 강력한 템플릿 처리가 가능하다.


구조
var panel = new Ext.Panel({
   configuration options,

   items : new Ext.DataView({ 
      store : new Ext.data.JsonStore({ … })   //데이터를 담은 Store객체
      tpl : new Ext.XTemplate( ‘…’ ),            //사용자 레이아웃 템플릿 객체
      autoHeight : true,
      multiSelect : true,                              //다중 선택 여부
      itemSelector : ‘div.thumb-wrap’,           //선택 모델이 수행될 노드 지정
      emptyText : ‘No images to display’
   })
});

위의 소스는 DataView를 꽉찬 형태로 store 구성옵션에 지정한 JsonStore를 이용해 캐시된 데이터를 tpl 구성옵션에 지정된 사용자 레이아웃 템플릿을 결합하여 Panel을 컴포넌트의 body 영역에 렌더링한다.

DataView 의 기능 중 또 하나의 중요한 것은 내장된(built-in) 선택 모델(Selection model)뿐만 아니라 click, doubleclick, mouseover, mouseout 등을 포함하여 컨테이너의 항목에서 발생하는 일반적인 이벤트를 제공한다.  이러한 특성을 이용하기 하고 어떤 노드에서 실행할 것인지에 대한 결정은 itemSelector 구성옵션을 지정해야 한다.


요약
DataView는 Store를 통해 캐시된 다양한 포맷의 데이터와 Template를 결합하여 사용자 정의 레이아웃을 적용하여 Data를 효과적으로 표시하고 선택 모델을 지원하여 사용자 인터렉션을 위한 매우 유용한 컴포넌트이다. 


예제
 



더 읽기
http://www.extjs.com/deploy/dev/examples/view/data-view.html


신고
Posted by Rhio.kim

Ext JS 에 있어서 xtype은 매우 중요한 개념을 갖는다.  몇몇 개발자들은 쉽게 흘러 지나가는 namespace 정도로 간단히 생각하고 있지만 Ext 에서 매우 중요한 개념이고 이 개념에 대해서 정확히 이해하고 넘어가야 한다.


정의

xtype
은 클래스를 나타내는 상징적인 명칭이며 그 이상도 그 이하도 아니다. 

예를 들어 Ext JS를 이용하여 새롭게 만든 클래스가 Ext.ux.MyGrid 이고 이 클래스는 인스턴스를 생성할 때 사용하는 일반적인 클래스 명이기도 하다.

이 말은 곧 다음과 같은 방법으로 Ext.ux.MyGrid 클래스에 xtype을 부여할 수 있다.

Ext.reg(‘mygrid’, Ext.ux.MyGrid);

여기서 xtype은 mygrid이고 일반적인 클래스명은 Ext.ux.MyGrid 이다.  위 예시는 새로운 xtype을 등록하는 것이다.  바꿔 말하면 xtype 인 mygrid를 Ext.ux.MyGrid와 연결하는 것이다.


장점

Ext JS로 개발되어진 복잡한 구성의 웹 애플리케이션에서 사용자의 액션에 응답하기 위해 새로운 객체들(Window, Form, Grid 등)이 생성되어 지는데 여기서 버튼이나 메뉴를 눌렀을 때 새로운 윈도우가 생성된다거나 패널 내에 그리드가 생성, 랜더링되어 화면상에 나타나는 처리가 필요할  때를 생각해보자.  

이런 것들은 Ext 2.x 이전 버전에서는 document가 로딩이 완료되는 시점에서 모든 객체들의 인스턴스가 생성되도록 처리되었었다.   달리 말해 사용자의 반응 유무에 상관없이 웹 애플리케이션을 구성하기 위한 모든 구성 요소들이 표시되지 않은 체로 document 어딘가에 렌더링 되어져 있고 이것은 즉 브라우저의 메모리에 상주한다는 의미와도 같다.

그리고 이것은 구성요소가 많지 않을 때는 큰 상관이 없지만 만약 그 숫자가 수십 수백 개에 이른다면 자원낭비이다.


지연 인스턴스(Lazy Instantiation)

만약 xtype을 가지고 있다면 메모리에는 다음과 같은 단순한 구성객체만 가지게 된다.

{ xtype : ‘mgrid’, border : false, width : 600, height : 400, … }

이것은 복잡하게 인스턴스화된 클래스처럼 브라우저의 자원을 낭비하지 않는다.
만약 구성객체로 정의된 웹 애플리케이션에서 어떤 일이 발생할까?

mygrid xtype로 등록한 구성객체가 인스턴스화가 필요한 시점에서 ComponentMgr 는 다음의 코드를 실행해서 Ext.ux.MyGrid 클래스의 객체를 생성하게 된다.

create : function(config, defaultType){
    return new types[config.xtype || defaultType](config);
}

다음과도 같다.

return new Ext.ux.MyGrid(config);

그리드의 인스턴스화하는 것은 렌더링과 브라우저에 표시하는 것을 동반할 것이고 기억해야 할 것은 오직 필요한 경우에만 인스턴스화 된다는 것이다.  모든 표준 xtype 목록들은 API문서에 있는 Ext.Component 에서 볼 수 있습니다

이 글은 http://www.extjs.com/learn/Tutorial:Xtype_defined 을 번역한 글입니다.

더 읽기
Outsider님 블로그 - Ext JS xtype 리스트 정리 - http://blog.outsider.ne.kr/414
Same article in my blog You can comment it there.
Writing a Big Application in Ext



신고
Posted by Rhio.kim
TAG ext JS, xtype
이번 포스팅은 Ext JS의 Grid와 Store 에 대한 구조적 원리에 대해서 심도있게 분석한 글로 Ext.data 패키지를 구성하고 있는 기본적인 Store 요소들이 Grid와 어떻게 동작하는 지에 대해서 자세히 설명합니다.


Structure
Ext JS의 Grid 애플리케이션을 만드는 것은 매우 간단하지만 프레임워크가 동작하는 내부 로직은 그렇게 단순하지가 않다.  그래서 각 구성요소들의 연결구조와 동작 방식을 이해하고 고급 웹 애플리케이션을 설계할 수 있도록 알아보자.

Grid 애플리케이션의 기본 컴포넌트인 Ext.grid.GridPanel은 다양한 구성옵션을 가지고 있다.  그중 그리드에 표현될 컬럼과 나열될 데이터 구조체는 필수 옵션이기 때문에 이 두 가지의 역할에 대해서도 잘 이해하고 넘어가야 한다.

 


GridPanel에 데이터를 표시하기 위해서는 일단 Store에 대한 지식이 선행되어야 한다.  

Tip
Ext JS는 GridPanel과 같이 Visual Component Library이나 Store와 같은 구조체를 JavaScript 객체지향 설계를 통하여 4GL(4th Generation Language) 형태로 잘 설계하였다.  이것은 언어(Language)라기 보다는 도구(Tool)의 성격을 가지고 있어 문제해결 방법을 일일이 기술하지 않고 원하는 작업만 명시함으로 자체적으로 필요한 문제를 해결한다.

몇 가지 용어 정의
Data Source : 가공되지 않는 데이터 리소스(JSON, XML, Array) 를 말한다.
Field Set : Store 에서 Data Source를 접근하기 위한 recodeType을 말하며 맵핑 테이블과 같다.
Record : Data Source를 캡슐화한 Ext.data.Record의 인스턴스를 말한다.


Basic Source

//Store 생성
var dataSource = new Ext.data.Store({
//HTTP 를 이용한 데이터 로드
/*url: '/twitter/api/status/user_timeline', //static file*/
proxy : new Ext.data.HttpProxy({  //proxy 클래스를 이용한 데이터 로드
        url		: '/twitter/api/status/public_timeline',
        method	: 'GET'
        }),
reader: new Ext.data.JsonReader( {
idProperty	: 'id',
        root		: 'status',
        totalProperty	: 'total'
} , [ Field Set ] )
});

//그리드 패널 생성
var grid = new Ext.grid.GridPanel({
configuration options,
store		: dataSource,
columns	: [
   { header: 'All Friends', width: 400, dataIndex: 'name' }/*,
   { header: 'Location', width : 200, dataIndex: 'location' }*/
]
});


Store
Ext JS 에서는 JSON, XML과 같은 데이터 구조를 손쉽게 접근하고 제어할 수 있도록 설계되었으며 이러한 데이터를 필요로 하는 다양한 컴포넌트들과 유연하게 동작하기 위해 매우 잘 설계되어있다.

이 클래스는 GridPanel, ComboBox, DataView와 같은 컴포넌트에 삽입할 Data Source 객체의 클라이언트 측 캐시를 캡슐화하는 기본 클래스이다.  캡슐화 한다는 것은 Data Source를 런타임 시에 지정하거나 수동으로 지정할 수 있을 뿐 아니라 서버로부터 변환된 데이터를 사용할 수도 있다.



Data Source를 Store 클래스에 지정하는 3가지 방법
Proxy 구성 옵션을 통한 데이터 소스 지정
var dataSource = new Ext.data.Store({
		url : ‘/server_side.php’	//1. 서버 사이드 호출
		url : ‘data.xml’		//2. Static한 데이터 파일 지정
		proxy : new Ext.data.HttpProxy({	//3. DataProxy를 사용
			url : ‘/server_side.php’
		}),
		reader : new Ext.data.XmlReader({ … })
	});
원격지의 데이터 요소를 로드하려고 할 때 url을 지정하거나 proxy 객체를 이용할 수 있다. 이것은 proxy 객체의 활용방법에서 좀더 자세히 알아보기로 하고 여기에서는 Store에서 원격지 데이터를 클라이언트 측으로 캐시하는 방법을 간단히 소스로 알아본다.


Store에 Configuration option으로 지정
var dataSource = new Ext.data.Store({
		data : [ 
		  { name : ‘rhio’, age : 20 },
		  { name : ‘edina’, age : 21 },
		  { name : ‘chan’, age : 21 }
		],
		reader : new Ext.data.ArrayReader({ … })
	});

Store에 수동으로 데이터 소스 지정
var data = [ 
	{ name : ‘rhio’, age : 20 },
	{ name : ‘edina’, age : 21 },
	{ name : ‘chan’, age : 21 }
];

var dataSource = new Ext.data.Store({
… ,
	reader : new Ext.data.ArrayReader({ … })
});
store.loadData(data);

Store객체에 Data Source 를 위의 3가지 방식을 이용하여 지정하였다면 이 Data Source를 요구에 맞게 판독할 수 있는 Reader클래스 인스턴스를 생성하여 Store의 구성옵션으로 지정하여야 한다.



Reader
Ext JS 에서는 웹 애플리케이션 개발 시 자주 사용하게 되는 Array, JSON, XML 전용 Reader 클래스 ArrayReader, JsonReader, XmlReader를 Ext.data 패키지에 포함시켜 두었습니다.  

이 Reader 클래스들의 예시를 살펴보자.

ArrayReader
//Array 포맷 데이터
var data = [
		[1, ‘rhio’, 20, ‘male’],
		[2, ‘edina’, 21, ‘female’],
		[3, ‘chan’, 31, ‘female’]
];
//레코드 객체 생성을 위한 맵핑 테이블 지정
var friends = Ext.data.Record.create({
		{ name: ‘name’, mapping: 1 },	// 1번째 인덱스의 값을 name Field로 맵핑
		{ name: ‘age’, mapping: 2 },	// 2번째 인덱스의 값을 age Field로 맵핑
		{ name: ‘gender’, mapping: 3 }	// 3번째 인덱스의 값을 gender Field로 맵핑
});
//Array 리더 클래스 생성
var arrReader = new Ext.data.ArrayReader({
		idIndex: 0
}, friends);

JsonReader 
//JSON 포맷 데이터
var data = {
		total : 2000,
		rows : [
			{ id : 1, name : ‘rhio’, age : 20, gender : ‘male’ },
			{ id : 2, name : ‘edina’, age : 21, gender : ‘female’ },
			{ id : 3, name : ‘chan’, age : 30, gender : ‘female’ }
		]
};

var jsonReader = new Ext.data.JsonReader({
		idProperty: ‘id’,
		root: ‘rows’,
		totalProperty: ‘total’,
		[
			id,	//key 가 id인 값을 id Field로 맵핑
			{ name: ‘name’, mapping: ‘name’ },	// key가 name인 값을 name Field로 맵핑
			{ name: ‘age’, mapping: ‘age’ },	// key가 age인 값을 age Field로 맵핑
			{ name: ‘gender’, mapping: ‘gender’ } // key가 gender인 값을 gender Field로 맵핑
		]
]
}, friends);

XMLReader 
var data = ‘
		2000
		
		  1rhio20male


1rhio20male


1rhio20male



var xmlReader = new Ext.data.XmlReader({
		idProperty: ‘id’,
		root: ‘row’,
		totalProperty: ‘total’,
		[
			id, 	//key 가 id인 값을 id Field로 맵핑
			{ name: ‘name’, mapping: ‘name’ },	// key가 name인 값을 name Field로 맵핑
			{ name: ‘age’, mapping: ‘age’ },// key가 age인 값을 age Field로 맵핑
			{ name: ‘gender’, mapping: ‘gender’ }// key가 gender인 값을 gender Field로 맵핑
		]
]
}, friends);

위의 예시에서도 알 수 있듯이 Reader 객체의 생성 방식은 매우 유사하다.  Reader의 경우 이런 일관된 생성과 동작을 위해서 Ext.data.DataReader 추상 클래스(abstract class)를 만들고 이를 확장하여 세가지의 클래스를 구현해 놓았다.  
만약 특수한 데이터 구조를 위해 사용자 Reader 클래스가 필요할 경우에는 이 DataReader 클래스를 상속받는 클래스로 만들어야 할 것이다.

그럼 Reader 클래스의 동작 원리를 살펴보자.


Reader 의 동작 원리

Reader 클래스는 시스템이 데이터 구조를 이해할 수 있도록 판독하는 클래스이기 때문에 Data Source와 구성옵션를 기본적으로 필요로 한다.  위의 소스에서 알 수 있듯이 data와 생성자 함수에 인자로 넘겨주는 구성옵션을 말한다. 

Reader 클래스는 Ext JS의 시스템이 데이터 구조를 이해할 수 있도록 판독하는 클래스이기 때문에 meta 정보와 recordType 두 가지를 필요로 한다.

특히나 meta 정보는 프레임워크 내의 데이터에 쉽고 유연하게 동작하기 위해서 Data Source의 일부 정보를 명시하게 된다.  단 Array 는 JSON과 XML과 같이 key, value의 한쌍으로 이루어진 것이 아닌 index 구조이기 때문에 구성옵션이 조금 차이가 있다.

var reader = new Ext.data.JsonReader( {
idProperty	: 'id',
        root		: 'status',
        totalProperty	: 'total'
} , [ Field Set ] );

예를 들어 데이터가 많아서 페이지네이션을 위해 Ext.PagingToolbar 컴포넌트를 이용할 수 있는데 이때 필요한 정보는 전체 개수와 블록개수이다.  그리고 GridPanel에서는 복잡하게 정의된 Data Source에서 표시해야 할 레코드 영역을 필요로 한다. 
  이렇게 구성옵션에 정의한 ‘root’나 ‘totalProperty’등의 메타정보가 프레임워크 내에서 데이터를 참조하고 유연하게 동작할 수 있는 역할을 한다.

그리고 또 하나의 중요한 것은 recordType 을 지정하는 것이다.  recordType 은 데이터베이스에서 Field 처럼 Data Source에서 Field를 정의하는 객체 배열이다.

 



Record

이것은 Store 객체에서 클라이언트(즉 브라우저)에 캐시된 레코드에 접근하기 위해서 레코드 정보를 정의한 것과 Data Source를 캡슐화한 클래스이다.

Ext.data.Record는 Reader 객체에 전달된 recordType 을 인자로 받아 생성자가 만들어 지는데 이 것들은 구조화 되지 않는 데이터 객체들을 처리가 발생하는 시점에서 오직 Ext.data.Reader의 구현부에 의해서만 인스턴스가 생성되어진다.

예시
// Record 생성자 함수 생성
var FriendRecord = Ext.data.Record.create([ //Ext.data.Record의 서브 클래스 생성
{ id : 1, name : ‘rhio’, age : 20, gender : ‘male’ },
{ id : 2, name : ‘edina’, age : 21, gender : ‘female’ },
{ id : 3, name : ‘chan’, age : 30, gender : ‘female’ }
]);

//Record 인스턴스 생성
var myNewFriend = new FriendRecord (
    {
        id : 4,
        name: 'hans.ryu',
        gender: ‘male’
    }
);
dataSource.add(myNewFriend);

Data Source를 캡슐화한 Record 인스턴스는 데이터베이스의 레코드 객체와 유사하게 제공되어 GridPanel, ComboBox, DataView 등과 같은 컴포넌트에서 요구되는 데이터 구조로 직렬화(serialize)하여 사용하거나 수정, 삭제 등의 처리를 다양한 포맷에 있어서 일관된 기능을 제공한다.



ColumnModel

이렇게 Store의 Proxy를 통해 클라이언트측 캐시에 로드되고 Record를 통해 구조화된 Data Source는 GridPanel에 표시되기 위해서 Ext.grid.ColumnModel 클래스를 구현해 사용하고 있다.

Grid의 ColumnModel 의 각각의 컬럼이 Store의 각 Record에 어떻게 인덱싱 할 수 있는지 보여주기 위하여 dataIndex를 설정하게 된다.

다음 예시는 ColumnModel  클래스가 초기화하는 2가지 방법이다.

Data Source가 배열인 경우의 초기화 방법
var colModel = new Ext.grid.ColumnModel([
   { header : ‘Company’, width : 200, sortable : true },
   { header : ‘Price’, width : 50, sortable : true },
   { header : ‘Change’, width : 50, sortable : true }
   { header : ‘% Change’, width : 50, sortable : true },
   { header : ‘Last Updated’, width : 60, sortable : true }
]);

 

ColumnModel은 Grid에서 컬럼의 첫번째 레이아웃/디스플레이를 정의하기 위해 Ext.grid.Column의 컬럼 설정 개체 배열로 초기화 된다.  Ext.grid.Column 컬럼 구성 객체에는 다양한 속성이 있다.  그 중 구성객체에 hidden 으로 컬럼을 숨기거나 ColumnModel에 포함되지 않은 모든 필드는 모두 표시되지 않을 것이다.

Grid의 각 컬럼이 Store의 Record 와 맵핑되어 데이터를 Grid에 표시하는 것은 dataIndex를 통해서 설정된다. 만약 위의 예시와 같이 명시적인 dataIndex가 정의되지 않았다면 컬럼 모델에 지정한 index를 그대로 적용한다.



Data Source가 오브젝트인 경우의 초기화 방법
컬럼 구성객체 배열은 columns 구성 속성에서 지정 되어지고 defaults 구성 속성은 모든 컬럼에 기본적으로 적용될 속성을 지정한다.

 

var colModel = new Ext.grid.ColumnModel({
   columns : [ 
     { header : ‘Friend’, dataIndex : ‘name’ },
     { header : ‘Age’, dataIndex : ‘age’, width : 30, sortable : true },
     { header : ‘Gender’, dataIndex : ‘gender’, width : 50, sortable : true }
   ],
   defaults : { 
     sortable : true,
     menuDisabled : true,
     width : 100
   }
});


GridPanel 요약

GridPanel에 데이터를 표시하기 위해서 살펴보았다.  사실 GridPanel을 살펴 보았다기 보다 Store 객체에 대해 자세히 살펴보았는데 내용에서도 알 수 있듯이 Store 객체의 구성옵션인 data와 reader에 대해서 알아 보았고 reader에 대해서는 좀더 자세한 동작원리에 대해서 살펴보았다.

요약하자면 GridPanel에 데이터를 표시하기 위해서는 수동이나 런타임에 Data Source를 지정하거나 Proxy를 이용한 원격 데이터를 로드합니다.  이렇게 로드된 Data Source는 GridPanel 이 사용할 수 있도록 규격화가 되어있지 않기 때문에 Array, JSON, XML 형태의 Data Source를 판독하는 Reader 클래스를 중간에 두어 레코드 형태의 규격화를 하도록 합니다.  

규격화를 위해 데이터의 메타 정보(meta)와 레코드 형태(recordType)를 정의하는 객체배열을 인자로 받게 되는데 recordType 은 Ext.data.Record.create에 인자로 전달되어 레코드 형태를 정의한 객체 배열과 Data Source의 해당 레코드 값을 캡슐화한 Record의 서브 클래스가 만들어지고 Store 객체를 통하여 GridPanel의 column 구성옵션에서 지정한 ‘dataIndex’와 reader의 ‘mapping’이 서로 매칭되어 GridPanel에 데이터를 아래와 같이 표시하게 된다.


 



함께 읽어 보세요.
Ext JS 를 이용한 고급 웹 애플리케이션 UI 설계 – Viewport 편 - http://rhio.tistory.com/349
Advanced Application Design in Ext JS – http://rhio.tistory.com/303
VCL(Visual Component Library) in Ext JS – http://rhio.tistory.com/345

Extjs GridPanel 및 데이터 축출하기 - http://techbug.tistory.com/36
Building a Simple GridPanel in Ext JS - http://www.devx.com/webdev/Article/42975
Grid PHP SQL Part1 - http://www.extjs.com/learn/Tutorial:Grid_PHP_SQL_Part1


예시 및 데모
http://www.extjs.com/deploy/dev/examples/#sample-3

신고
Posted by Rhio.kim

Ext JS를 이용한 애플리케이션 설계 시에 인기 있는 기능은 Viewport 이다.  이것은 Ext.onReady() 런타임시에 유일한 인스턴스로 생성되어 Ext JS 애플리케이션 영역을 관리하는 특수한 패널로 인스턴스 생성시 자동으로 브라우저의  표시영역 크기에 맞게 document.body 에 렌더링 된다.

여기에서는 Viewport와 연관되어 Layout에 대해서도 잠깐 살펴볼 예정이다.  


Ext.Viewport 구성옵션

Ext JS에서는 클래스의 인스턴스를 생성할 때 각종 구성옵션(Configuration Option)을 설정함으로써 클래스들의 초기 동작과 습성을 지정할 수 있는데 각각의 구성옵션이 어떤 설정을 위한 것인지는 API 문서를 통해서 확인 할 수 있다.  

Viewport 에서 사용하는 구성옵션 중에 레이아웃을 지정하는 layout 옵션과 설정된 레이아웃 영역에 배치할 패널들을 지정한 items가 있다.  이 두 가지는 필수 설정이므로 반드시 지정해야 한다..


layout

현재 프레임워크에서 제공되어 사용할 수 있는 레이아웃으로는 absolute, accordion, anchor, auto, border, card, column, fit, form, hbox, menu, table, toolbar, vbox 와 같이 14 가지를 가지고 있다. 


   
이것들 중 가장 자주 사용되는 것은 border 레이아웃과 fit 레이아웃이다.  Border 레이아웃은 일반적으로 비즈니스 응용 프로그램의 기본 UI로 사용되는 레이아웃이고 fit 레이아웃의 경우에는 좀더 복잡한 중첩 레이아웃을 표현하기 위해 필수적인 레이아웃으로 거의 활용된다.


items

items 옵션에는 레이아웃에 배치 될 요소들이 배열로 지정하게 된다.  이때 layout 에 따라 items 를 구성하는 요소들은 특정한 구성옵션을 필요로 할 수 있다.  그렇기 때문에 각각의 레이아웃에 대한 특징을 정확히 알고 있어야 한다.

예를 들면 border 레이아웃의 경우 패널 구성옵션에 region 을 통해 자신이 위치 할 영역이 지정되어야 한다.  그러면 실제로 Viewport를 만들어 보자.

1. HTML 소스
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Viewport Example</title>
        <!--Ext JS 기본 CSS 요소-->
<link rel="stylesheet" href="../js/ext/resources/css/ext-all.css" type="text/css" />
<!-- Ext JS 기본 JavaScript 요소-->
<script type="text/javascript" src="../js/ext/adapter/ext/ext-base.js"></script>
     <script type="text/javascript" src="../js/ext/ext-all.js"></script>
<!-- 구현 코드 JavaScript -->
        <script type="text/javascript" src="../js/ext/myApp.js"></script>
</head>
<body>
<div></div>
</body>
</html>

2. JavaScript 
  A. fit 레이아웃
Ext.onReady 런타임에서 Ext.Viewport 클래스의 인스턴스를 생성하고 구성옵션의 레이아웃을 ‘fit’ 으로 설정합니다.  fit 레이아웃은 나뉘어진 영역이 없이 단일의 콘테이너로써 자식의 되는 컴포넌트를 꽉 채워 표시한다.  이 것은 중첩된 레이아웃의 형태를 구성하기 위해 매우 유용하게 사용된다.

Ext.onReady(function(){
    new Ext.Viewport({
        layout:'fit',
        items:[
            {
                title:'Fit Panel Example',
html:'<div style="text-align:center;padding:100px;"></div>',
                collapsible: true
            }
        ]
    });
});

items에 지정한 요소는 단순히 HTML을 렌더링하는 패널이다.  collapsible 값을 true로 설정함으로써 viewport에 가득 채워진 패널을 접어 레이아웃 영역을 확보할 수 있게 된다.


  B. border 레이아웃
 

Viewport 에 border 레이아웃을 설정하면 그림에서 언급한 형태로 레이아웃이 구성되어진다.  이때 그림에서 지정한 것과 같이 레이아웃을 구성하는 각 요소들에 region 구성 옵션을 지정된 ‘north’, ‘west’, ‘center’, ‘east’, ‘south’를 지정해 주어야 한다. 

 

만약 지정되지 않을 경우 구성 요소가 표시되지 않으니 유의해야 한다.  다만 border 레이아웃에서 중간 영역(region:’center’)은 필수 임으로 꼭 지정하도록 한다.

Ext.onReady(function() {
var viewport = new Ext.Viewport({
layout: 'border',
items: [{
title : 'East Item',
html : '<p>East</p>',
padding : 20,
region : 'east'
},{
title : 'Center Item',
html : '<p>Center</p>',
padding : 20,
region : 'center'
},{
title : 'West Item',
html : '<p>West</p>',
padding : 20,
region : 'west'
},{
title : 'South Item',
html : '<p>South</p>',
padding : 20,
region : 'south'
},{
title : 'North Item',
html : '<p>North</p>',
padding : 20,
region : 'north'
}]
});

items 의 각각의 요소의 collapsible와 split 속성을 지정하여 해당 요소를 접거나 펼칠 수 있고 드래그를 통해서 요소의 너비를 변경할 수 있다. Ext.Container를 상속받고 있는 컴포넌트들의 경우에는 구성옵션에 레이아웃을 지정하여 중첩 레이아웃 구성을 할 수 있다.


  C. Accordion
 


스택 레이아웃으로 한 번에 하나의 패널을 표시하도록 한다.  items에 지정된 요소들은 모두 아코디언 패널로 변환되어 표시된다.
 


만약 위의 아코디언 패널에 개인적인 스타일을 지정해야 하는 경우에는 다음의 예시 처럼 items의 요소에 id 속성을 지정하고 style 을 지정할 수 있다.

  CSS 소스
#panel2 .x-panel-body {
   background:#ffe;
   color:#15428B;
   padding: 35px;
}
#panel2 .x-panel-header-text {
   color:#555;
   font-weight:bold;
}

  JavaScript 소스
Ext.onReady(function() {
var viewport = new Ext.Viewport({
layout: 'accordion',
items: [{
title : 'Menu1',
html : '<p>Menu1</p>'
},{
title : 'Menu2',
html : '<p>Menu2</p>’,
                    id : ‘panel2’
},{
title : 'Menu3',
html : '<p>Menu3</p>'
}]
});
});


Viewport 컴포넌트에 대해서 살펴보려고 했으나 그 내용이 layout package에 더 가까웠네요.  하지만 Ext JS를 이용한 고급 UI 설계를 위해 매우 중요한 기초와 같습니다. 

그리고 14가지의 레이아웃을 포함하고 있으나 특별히 개념적으로 이해하기 위한 수단으로는 fit과 border의 정도만 잘 이해한다면 그 외의 레이아웃을 사용하는데 있어서는 그다지 어려움을 느끼지 않을 것입니다.


레이아웃 샘플 http://www.extjs.com/deploy/dev/examples/layout-browser/layout-browser.html
설명 http://www.extjs.com/learn/Ext_2_Overview#Layouts

함께 읽어 보세요.

Advanced Application Design in Ext JS - http://rhio.tistory.com/303
VCL(Vissual Component Library) in Ext JS - http://rhio.tistory.com/345

데꾸벅님 블로그 - Extjs Viewport를 이용한 기본레이아웃 잡기 - http://techbug.tistory.com/13 



신고
Posted by Rhio.kim

Ext JS와 VCL
VLC(Visual Component Library)은 볼랜드Borland 사에서 1995년에 델파이를 개발하면서 설계한 윈도우 프로그래밍 라이브러리입니다.  VCL을 윈도우 플랫폼의 데스크탑 애플리케이션 개발에 있어서 공통적으로 빈번하게 사용되는 요소들을 미리 만들어 두고 필요할 때마다 쉽게 이용할 수 있도록 해서 개발자들로 하여금 반복적인 작업을 빠르고 쉽게 처리할 수 있도록 하는 라이브러리입니다. 

Ext JS 는 이러한 메커니즘을 도입하여 철처하게 컴포넌트 중심의 컴포넌트를 지향하는 프레임웍으로 설정해 가고 있습니다.  그리고 Ext JS의 VCL은 델파이의 VCL과 마찬가지로 컴포넌트들로 구성하는데 필요한 몇 가지 클래스들이 상속 개념에 의해 계층구조로 잘 정의되어 있는 객체지향 클래스들의 그룹이라고 말 할 수도 있습니다.

 
TComponent Class in Delphi

TComponent Class in Delphi



Ext JS는 델파이의 이런 컴포넌트 중심의 컴포넌트 지향적인 구조와 동일하며 각각의 컴포넌트들은 윈도우 프로그래밍에 필요한 컴포넌트들 처럼 웹에서 이와 동일하게 프로그래밍 할 수 있도록 특정 기능들을 잘 포장하고 있습니다.

Ext JS의 VCL은 기본적으로 Ext.Component 클래스를 상속받는 객체라고 정의할 수 있습니다.  그래서 Ext JS에서는 JavaScript에서 간단한 코드 몇 줄을 이용하여 마치 레고 조각을 하나씩 맞춰서 결과를 완성하듯이 컴포넌트들의 속성과 이벤트 조작을 통해서 쉽게 웹 애플리케이션을 완성할 수 있습니다.

델파이가 데스크탑 프로그래밍 개발을 위한 컴포넌트 기반의 프로그래밍 구조를 적립시켰다면 이러한 데스크탑의 프로그래밍의 경헙을 웹으로 옮기는 시도를 바로 Ext JS가 진행하고 있습니다.


Ext JS 의 비시각적 컴포넌트
Visual Component Library라는 이름 때문에 Ext JS 가 갖는 VCL 안에 포함된 컴포넌트들이 모두 시각적인 특성을 갖는다고 생각할 수도 있을 것이다.  하지만 Ext JS는 많은 비시각적인 컴포넌트도 상당히 많습니다.  Ext JS 3.0과 함께 발표한 Design Preview 에서 볼 수 있듯이 시각적인 컴포넌트는 폼을 디자인 타임뿐 아니라 브라우저 내에 런 타임 시에 우리가 볼 수 있는 컴포넌트를 말합니다.  그리고 비시각적인 컴포넌트란 런 타임에는 브라우저상에 표시되지 않는 컴포넌트를 말합니다. 예를 들면 Ext.util.TaskRunner나 Ext.data 패키지와 같은 컴포넌트가 대표적인 것들입니다.

일반적으로 프로그래밍 언어에서는 컴포넌트보다 클래스라고 이해하고 사용을 하지만 Ext JS 프레임워크가 갖는 사상은 컴포넌트의 개념을 가지고 접근을 합니다.


Component 계층 구조와 주요 클래스들
Ext JS의 비주얼 컴포넌트들은 객체 지향 언어의 상속 개념에 의해 계층 구조를 이루는 여러 클래스들로 구성되며 다음의 그림이 비주얼 컴포넌트의 기복적인 계층 구조를 보여 줍니다.

 
[그림 첨부 : 컴포넌트 계층 구조]

위의 그림을 바탕으로 각 클래스들의 특징과 기능에 대해서 좀더 상세히 알아보기로 하겠다.


Ext.Component
클래스 다이어그램에서 알 수 있듯이 비주얼 컴포넌트에서 가장 상위 단계의 클래스는 Ext.Component이다. Ext.Component는 Ext JS에서 비주얼 컴포넌트들의 최상위 선조 클래스로서 VCL 계층 구조 안에 포함되어 있는 모든 클래스의 공통적인 특성과 기능을 가지고 있다.  

Ext.Component의 주요 역할은  Ext 의 모든 컴포넌트들은 Component의 서브 클래스로 자동적으로 생성, 렌더링, 소멸의 Ext.Component Life Cycle(생명주기)을 적용 받고 Ext.Observable 클래스를 상속받아 컴포넌트의 동작을 위한 일관된 이벤트 제어, 관리, 동작 모델을 제공한다.  좀더 자세한 사항은 다음에서 구체적으로 살펴본다. [계속..]


Ext.Component의 기본구조
Ext.Component의 구조는 Config Options, Public Properties, Public Methods, Public Events 의 4가지로 이루어 진다. 고도의 사용자 정의를 통해 Component를 설정하기 위한 Config Options 과 Component 에 지정된 Public Events 이 것은 흔히 말하는 Custom Event 모델을 통해 컴포넌트에 이미 정의되어져 있다.  그외 컴포넌트의 주요 변수와 메소드로 구분되어진다.

 
[그림 컴포넌트 내부 구성도]



Configuration Option Object
Config 속성들은 컴포넌트의 생명주기(Life Cycle)인 생성, 렌더링, 소멸 시 컴포넌트가 동작하게 될 일련의 과정을 정의하는 오브젝트이다. 

이 오브젝트에는 관심 있게 봐야 할 것은 모든 컴포넌트들의 공통 속성인 xtype 속성의 도입이다.  xtype 속성은 한 컴포넌트를 다른 컴포넌트와 구별하는데 사용될 수 있고 DOM의 관점에서 본다면 id 속성과 같다. 

그래서 당연한 애기지만 컴포넌트의 xtype속성 값은 다른 것들과 중복 되지 않는 유일한 값이어야 한다.

생성과 소멸을 위한 속성은 data, plugins, ptype, stateEvents, stated, stateful, tplWriteMode, xtype 정도이고 그 밖의 대부분은 컴포넌트의 외형적인 설정을 위한 렌더링 시점에서 필요한 속성들이 대부분이다.

Public Properties
컴포넌트의 표시 및 활성 상태, DOM 엘리먼트, Configuration Option, Node 관계, 렌더링 상태 등을 참조할 수 있는 변수를 나타낸다.

Public Methods
생성자와 소멸자를 포함하고 DOM 접근 방식과 일관된 컴포넌트 접근 모델, 표시 및 활성상태, 렌더링 속성 변경 등 컴포넌트의 기초적인 동작 구현의 집합이다.

Public Events
이 이벤트들은 Ext.util.Observable 이벤트 모델을 통하여 Ext.Component 클래스에 정의된 사용자 이벤트로 컴포넌트의 생명주기에서 발생하는 일련의 세세한 과정마다의 이벤트를 등록하여 컴포넌트마다 유일한 동작 방식을 정의할 수 있게 된다.



신고
Posted by Rhio.kim
TAG ext JS, VCL

저번주에 3.0.3을 개봉하려고 봤더니 목요일에 3.1을 릴리즈 했네요.
Change Log를 토대로 수정을 더 보긴 했지만 누락될 수 있습니다. :)




워낙 방대하다보니 한번 릴리즈 하면 점검해야할 것들이 꾀 많아 지내요.
혹시 쓰시다 오류 있으시면 메세지나 메일 남겨주시면 감사할께요 :)


신고
Posted by Rhio.kim
오래 전부터 매우 관심있게 보고 있는 JavaScript 프레임워크 입니다.

제 블로그에 오시는 분들은 Ext JS 에 대해서 극히 잘 아시겠지만 Ext JS는 자바스크립트 개발자로서 혹은 Web 2.0 시대를 살아가는 RIA 개발에 관심있는 개발자라면 혹은 섣불리 UI 개발에 접근하지 못하는 서버사이드 개발자들 혹은 델파이 개발자(?)들은 꼭 관심있게 봐야할 프레임워크 입니다.

우리는 단순히 이 프레임워크를 Prototype JS, jQuery, YUI, Dojo 와는 다른 뭔가 색다른 프레임워크이고 UI 자체가 매우 성숙해 있다는 것 쯤으로 알고 있지만 이것은 RIA를 위한 매우 잘 설계된 프레임워크입니다.

그리고 HTML 5가 세상에 자리잡고 웹이 정보를 표현하는 문서와 링크의 수단에서 애플리케이션 형태로 발전해 가는 현재의 시점에서 꼭 알아야 할 기술 중 하나가 자바스크립트입니다.

일반적으로 웹을 즐기는 사용자의 관점을 바라보는 개발자라면 Ext JS의 활용도가 극히 제한적일 수 있지만 프레임워크에 포함된 코어 기술들은 언제 어디서든지 활용 가치가 높은 것을을 많이 담고 있습니다.  

뜬금없는 델파이 개발자라고 한 이유는 파스칼에서 진보한 델파이는 Ext JS의 아키텍쳐와 매우 유사한 부분들을 많이 갖습니다.  그중 가장 중요한 부분이 바로 VCL(Visual Component Library)의 개념입니다.  이 개념은 Ext JS의 전부라고 해도 과언이 아닌 매우 중요한 개념입니다.

다음은 Ext JS 3.0.3 릴리즈가 좀 지났지만 Class Diagram 업데이트를 해볼까 합니다. :)
워낙에 해상도가 높은지라... 필요하신 분들이 계실련지?! 
(아래 것들은 베타 버전때 제작된 것이라 현재 버젼하고는 차이가 있습니다.)


1. Ext.chart.PieChart don't extends Ext.chart.CartsianChart
신고
Posted by Rhio.kim

전 포스팅에서 공개하기로한 Ext JS 클래스 다이어 그램입니다.  기다리는 분들도 없지만(^-^;;) 늦었네요.

특별히 설명할 것은 없네요.  Ext JS 2.2.1 버젼의 클래스 관계도를 그렸습니다.
ActionScript 3.0에 이러한 클래스 다이어그램이 있어서 보고 있으니 유용하게 사용될 때가 있어서요.

관심있고 실무에서 사용하시거나 한눈에 보고자 하는 분들께 도움이 되었으면 좋겠네요.
개인적으로 필요해서 만들었지만 이런 일러스터레이터 CS3로 예쁘게 출판용 문서화를 해보려니 쉽지 않군요.
큰 사이즈 벡트이미지를 편집하는 것이라 컴퓨터도 받쳐줘야 하구요.

PDF파일이 용량이 커서 이곳에 못 올리고 mediafire.com 에 올렸으니 필요하신 분은 다음 링크를 통해서 다운로드 받으시기 바랍니다..

Ext JS 2.2.1 Class Diagram Download
[PDF] Ext JS 2.2.1_02 Class Diagram Download
[JPG] Ext JS 2.2.1_02 Class Diagram Download







신고
Posted by Rhio.kim
처음에 Cheat Sheet를 만들 계획이였는데 그리다보니 험한길을 택했네요.  

Ext JS 클래스 다이어그램을 그리려던 것은 아니였는데...
PPT로 그리다가 어차피 할것 PDF로 예쁘게 만들고 고해상도로 출력해 보자 라는 마음에 결국은 일러스트레이터까지 손을 대다니 ㅠ.ㅠ 요즘 Adobe 제품군을 아주 손에 달고 다니게 됩니다.

현재 몇가지 수정작업에 있고 이번주중으로 공개할 예정입니다. 

Ext JS 프레임웍에 대한 관심도도 높이고 이미 관련 개발자들에게 도움이 되었으면 하고 이번 이 문서화를 기본으로 국내외 유용한 라이브러리, 프레임웍들의 이런 유사한 문서화를 하나씩 해나가보려 합니다.

아래 설명 부분은 ActionScript Class Diagram를 조금 따라 해봤습니다.




현재 Ext JS 2.2.1까지 발표 되었는데요.  4월 컨퍼런스를 시작으로 3.0 이 릴리즈도 이뤄질 것 같네요.
Ext JS는 준비중인 3.0 에서는 여타 라이브러리와는 다른 RIA 플렛폼에 있어 매우 임팩트한 JavaScript 프레임웍으로 자리매김하리라 봅니다.

미약하지만 국외에서는 Ext JS에 관한 몇 권의 책도 출간되었고 또한 준비중인 책들도 있는 것 같습니다.  그만큼 관심도가 서서히 높아지고 있고 국내에서도 차차 관심을 갖을때...



신고
Posted by Rhio.kim