불친절한자수씨

 

다운로드

http://www.sencha.com/products/extjs/download/ 에서 Ext JS 4 를 다운로드 받습니다.
이 글을 작성하는 시점에는 Ext JS 4.0.2a 를 GPL 로 제공합니다.

Ext JS 4 디렉토리 구성

다운로드 받은 파일의 압축을 풀고, 아래의 디렉토리/파일을 작업 폴더로 복사 합니다.





작업 디렉토리는 Ext JS 에서 제공하는 가이드 대로 아래와 같이 구성하였습니다.




웹 애플리케이션의 시작점인 index.html 을 프로젝트 루트에 아래와 같이 생성합니다.

app.js 의 생성

모든 Ext JS 4 애플리케이션은 Application 클래스의 인스턴스로 부터 시작됩니다.

Ext.application({ name: 'Vicki', appFolder: 'app', launch: function() { Ext.create('Ext.container.Viewport', { layout: 'fit', items: [ { xtype: 'panel', title: 'Users', html : '사용자 리스트' } ] }); } });

Ext.Application 에서 애플리케이션에 대한 별도의 설정이 가능합니다.

name 속성을 통해 전역변수를 설정하고 Ext.Loader 에 네임스페이스를 등록합니다.
appFolder 속성은 위에서 등록한 네임스페이스의 클래스 구조를 설정한 디렉토리를 설정합니다.
launch 함수는 애플리케이션 생성이 불려지는 함수를 정의합니다.


프로그램을 실행시키면 아래와 같은 화면이 나옵니다.

 

참고자료

http://docs.sencha.com/ext-js/4-0/#!/guide/application_architecture

Ext 에서 제공해주는 ArrayReader 는 위와 같은 방식으로 정의를 하며, 데이터는 아래와 같은 방식이여야 합니다.



하지만 아래와 같이 하나의 배열에 담긴 데이터가 들어올 때 읽어들일 수 있는 방법은 존재하지 않습니다. (찾아본 바로는...)


ArrayReader 로 읽더라도 스토어에는 'v', 't', 'd' 와 같이 앞의 한자리만 가지고오게 됩니다.


/app/ux/data/reader/SingleElementArray.js
Ext.define('WO.ux.data.reader.SingleElementArray', { extend: 'Ext.data.reader.Json', alternateClassName: 'Ext.data.SingleElementArray', alias : 'reader.singleElementArray', /** * @private */ buildExtractors: function() { this.callParent(arguments); var fields = this.model.prototype.fields.items, length = fields.length, extractorFunctions = [], i; for (i = 0; i < length; i++) { extractorFunctions.push(function(index) { return function(data) { if (typeof data == 'string') { return data; } return data[index]; }; }(fields[i].mapping || i)); } this.extractorFunctions = extractorFunctions; } });


위와 같이 단일 요소 배열도 처리할 수 있는 ArrayReader 를 확장한 후 아래와 같이 사용하면 끝~ 입니다.

Ext.define('SingleElement', { extend: 'Ext.data.Model', fields: ['key'] }); var store = Ext.create('Ext.data.Store', { model: 'SingleElement', proxy: { type: 'ajax', url: '/test.php', reader: { type: 'singleElementArray', root: 'data' } } });

Ext JS 4.0 에서 제공해주는 "Row Editing Grid" 는 아래와 같이 Update 와 Cancel 버튼 밖에 없습니다.
(http://docs.sencha.com/ext-js/4-0/#!/example/grid/row-editing.html)




위의 기능에 Delete 버튼이 있으면 좋을 것 같아서 클래스를 확장해 보았습니다.

/app/ux/grid/plugin/DeletableRowEditing.js
Ext.define('WO.ux.grid.plugin.DeletableRowEditing', { extend: 'Ext.grid.plugin.RowEditing', alias: 'plugin.ux.deletablerowediting', initComponent: function() { this.addEvents({ deleterow: true }); this.callParent(arguments); }, // override initEditor: function() { var me = this, grid = me.grid, view = me.view, headerCt = grid.headerCt; return Ext.create('WO.ux.grid.DeletableRowEditor', { autoCancel: me.autoCancel, errorSummary: me.errorSummary, fields: headerCt.getGridColumns(), hidden: true, // keep a reference.. editingPlugin: me, renderTo: view.el }); }, deleteRow: function(record) { var me = this; me.getEditor().deleteRow(); me.fireEvent('deleterow', record); } });

/app/ux/grid/DeletableRowEditor.js
Ext.define('WO.ux.grid.DeletableRowEditor', { extend: 'Ext.grid.RowEditor', deleteBtnText: 'Delete', // override getFloatingButtons: function() { var me = this, cssPrefix = Ext.baseCSSPrefix, btnsCss = cssPrefix + 'grid-row-editor-buttons', plugin = me.editingPlugin, btns; if (!me.floatingButtons) { btns = me.floatingButtons = Ext.create('Ext.Container', { renderTpl: ['<div class="{baseCls}-ml"></div>', '<div class="{baseCls}-mr"></div>', '<div class="{baseCls}-bl"></div>', '<div class="{baseCls}-br"></div>', '<div class="{baseCls}-bc"></div>'], renderTo: me.el, baseCls: btnsCss, layout: { type: 'hbox', align: 'middle' }, defaults: { margins: '0 1 0 1' }, items: [{ itemId: 'update', flex: 1, xtype: 'button', handler: plugin.completeEdit, scope: plugin, text: me.saveBtnText, disabled: !me.isValid }, { flex: 1, xtype: 'button', handler: Ext.Function.pass(plugin.deleteRow, [me.context.record], plugin), scope: plugin, text: 'Delete' }, { flex: 1, xtype: 'button', handler: plugin.cancelEdit, scope: plugin, text: me.cancelBtnText }] }); // Prevent from bubbling click events to the grid view me.mon(btns.el, { // BrowserBug: Opera 11.01 // causes the view to scroll when a button is focused from mousedown mousedown: Ext.emptyFn, click: Ext.emptyFn, stopEvent: true }); } return me.floatingButtons; }, deleteRow: function(record) { var me = this; me.hide(); } });


위와 같이 Editing 클래스와 Editor 클래스를 확장한 후 그리드 패널에 위에서 생성한 플러그인으로 설정하면 됩니다.

Row Editing Grid 정의
Ext.define('WO.view.XxxxGrid', { extend: 'Ext.grid.Panel', ... initComponent: function() { this.selMode = 'rowmodel'; this.plugins = [Ext.create('Ext.grid.plugin.RowEditing', { clicksToEdit: 1 })]; ... } ... });

Deletable Row Editing Grid 정의
- 리스너에 deleterow 이벤트 핸들러를 추가하여 수정 중인 행에 대한 record 인자로 받아 처리합니다.
(나중에 내공이 더 쌓이면 내부 기능으로 붙여버리는 것도 고려를... 으흠...)
Ext.define('WO.view.XxxxGrid', { extend: 'Ext.grid.Panel', requires: ['WO.ux.grid.plugin.DeletableRowEditing'], ... initComponent: function() { this.selMode = 'rowmodel'; this.plugins = [Ext.create('WO.ux.grid.plugin.DeletableRowEditing', { this.plugins = [Ext.create('Ext.grid.plugin.RowEditing', { clicksToEdit: 1, listeners: { deleterow: function(record) { // do not something... } } })]; ... } ... });

최근에 연봉이랑 잡다구리한 것 때문에 신경을 많이 못 쓰다가 최근 여유가 좀 생겨서 Sencha 블로그를 둘러보다가 CI 관련 글을 보는데 Jasmine 이라는 프로젝트가 눈에 띄였습니다. 프로젝트 홈에 들어가 보았더니 먼가 몽롱한 분위기의 페이지가...

Jasmine is a behavior-driven development framework for testing your JavaScript code.
구글 번역을 빌리자면~ "재스민은 자바 스크립트 코드를 테스트하기위한 행동 기반의 개발 프레임 워크입니다."

describe("Jasmine", function() { it("makes testing JavaScript awesome!", function() { expect(yourCode).toBeLotsBetter(); }); });


아직 자세한 내용은 살펴보지 않아 잘 모르겠지만 관심이 가네요~

지난 금요일에 Ext JS 4 에 대해 포스팅 이 하나 더 올라왔습니다. 새로워진 Data Package 에 대해 알아보도록 하겠습니다.


Data Package 는 Ext JS 4 에서 완벽하게 다시 쓰여졌습니다. 하지만 이전 버전과 같은 접근 방식으로 사용할 수 있습니다.


무엇이 달라졌을까?
Ext JS 4 의 Data Package 는 43 종류의 클래스로 구성되어 있습니다. Model, Proxy, Store 가 가장 중요한 클래스 3개와 나머지로 구성되어 있습니다.





모델과 스토어
데이터 패키지의 중심은 Ext.data.Model 입니다. 모델은 어플리케이션에서 몇가지 데이터 타입으로 표현됩니다. 가장 심플한 모델은 필드와 데이터로 설정됩니다. Ext JS 3  에서는 Ext.data.Model 의 선구자 격인 Ext.data.Record 를 유사하게 사용하였습니다. 새로운 모델을 만드는 방법은 아래와 같습니다.
Ext.regModel('User', { fields: [ {name: 'id', type: 'int'}, {name: 'name', type: 'string'} ] })
모델은 일반적으로 스토어와 함께 기본적인 모델 인스턴스의 집합으로 사용됩니다. 간단하게 스토어를 설정하고 데이터를 로딩하는 방법은 아래와 같습니다.
new Ext.data.Store({ model: 'User', proxy: { type: 'ajax', url : 'users.json', reader: 'json' }, autoLoad: true });
User 모델 인스턴스는 'users.json' 의 url 을 통해 로드됩니다. 스토어는 AjaxProxy 를 사용하며, url 을 통해 읽어들인 데이터를 Ext.data.Reader 클래스를 통해 디코드 하도록 설정되어 있습니다. 이 경우 서버는 json 을 반환하므로 응답에 대해 JsonReader 가 설정되어야 합니다.

스토어는 Ext JS 4 를 사용한다면, 리모트에서 뿐만 아니라, 로컬에서 정렬, 필터링, 그룹핑을 수행할 수 있습니다. 더 이상 별도의 GroupingStore 는 필요하지 않습니다. 다중 정렬, 필터링, 그룹핑을 표준 스토어에서 처리할 수 있습니다.
new Ext.data.Store({ model: 'User', sorters: ['name', 'id'], filters: { property: 'name', value : 'Ed' }, groupers: { property : 'age', direction: 'ASC' } });
스토어가 생성되면, 데이터는 id 보다 name 을 우선순위로 정렬이 됩니다. name 이 'Ed' 인것만 포함되도록 필터링 되며, age 로 그룹핑될 것 입니다. Store API 를 통해 언제든지 쉽게 정렬, 필터링과 그룹핑을 변경할 수 있습니다.



프록시
아래를 통해 스토어를 사용하여 프록시에서 데이터를 어떻게 읽어들이는지 볼 수 있습니다. Ext JS 4 에서의 한가지 구조적 변화는 스토어에서 Reader 와 Writer 에 대한 직접 연결이 필요없다는 것 입니다. 이것은 엄청난 혜택을 제공합니다. 프록시를 모델에서 직접 정의할 수 있습니다.
Ext.regModel('User', { fields: ['id', 'name', 'age'], proxy: { type: 'rest', url : '/users', reader: { type: 'json', root: 'users' } } }); //uses the User Model's Proxy new Ext.data.Store({ model: 'User' });
첫번째는 같은 방식으로 데이터를 로드하는 모델을 사용하는 스토어의 중복을 피할 수 있습니다. 두번째는 모델 데이터의 저장과 불러오기를 스토어 없이 할 수 있습니다.
//gives us a reference to the User class var User = Ext.getModel('User'); var ed = new User({ name: 'Ed Spencer', age : 25 }); //we can save Ed directly without having to add him to a Store first because we //configured a RestProxy this will automatically send a POST request to the url /users ed.save({ success: function(ed) { console.log("Saved Ed! His ID is "+ ed.getId()); } }); //load User 123 and do something with it (performs a GET request to /users/123) User.load(123, { success: function(user) { console.log("Loaded user 123: " + user.get('name')); } });
HTML5 의 새로운 기능을 활용하여 몇 가지 새로운 프록시를 도입하였습니다(LocalStoargeProxy, SessionStorageProxy). 이전 브라우저는 새로운 HTML5 API 를 지원하지는 않지만, 많은 애플리케이션들이 그들의 존재로부터 엄청난 혜택을 알고 있기에 유용합니다. 그리고 필요로 하는 프록시가 없는 경우 쉽게 만들 수 있습니다.



연관 (Associations)
프록시는 모델에 새로운 기능을 추가하는 것에 지나지 않습니다. 새로운 Association API 와 함께 모델을 연결할 수 있습니다. 대부분의 애플리케이션은 다양한 모델과 거의 대부분이 모델과 연관된 것으로 다루어 집니다. 블로그 작성 애플리케이션은 사용자(User), 포스트(Post)와 댓글(Comment)을 가지고 있을 것 입니다. 각 사용자는 포스트를 작성하고, 각 포스트는 댓글을 전달받을 것 입니다. 이들의 관계는 아래와 같이 표현할 수 잇습니다.
Ext.regModel('User', { fields: ['id', 'name'], hasMany: 'Posts' }); Ext.regModel('Post', { fields: ['id', 'user_id', 'title', 'body'], belongsTo: 'User', hasMany: 'Comments' }); Ext.regModel('Comment', { fields: ['id', 'post_id', 'name', 'message'], belongsTo: 'Post' });
이것을 통해 애플리케이션에서 다른 모델들 간의 풍부한 관계를 표현하기 쉬워집니다. 각 모델들은 임의의 순서를 정의할 수 있는 모델을 통해 임의의 연관 번호를 가질 수 있습니다. 일단 모델 인스턴스를 갖는다면, 쉽게 연관 데이터를 조회할 수 있습니다. 예를 들어, 특정 사용자의 각 포스트에 만들어진 댓글을 로깅하기를 원한다면 아래처럼 할 수 있습니다.
//loads User with ID 123 using User's Proxy User.load(123, { success: function(user) { console.log("User: " + user.get('name')); user.posts().each(function(post) { console.log("Comments for post: " + post.get('title')); post.comments().each(function(comment) { console.log(comment.get('message')); }); }); } });
각 hasMany 관계는 모델에 추가된 새로운 함수에 의한 결과 위에 만들어집니다. 각 사용자 모델은 hasMany 포스트로 선언되었습니다. user.posts() 호출에 의한 결과 스토어는 포스트 모델에 의해 구성됩니다. 결과적으로 설정된 hasMany 댓글 연관으로 인해 포스트 모델은 comments() 함수에서 댓글들을 가지고 올 수 있습니다.

User.load 호출에서 'success' 함수로 왜 전달을 해야 하는지 궁금해 할 수도 있습니다. 하지만 사용자의 포스트와 댓글을 접근할 때 그럴 필요가 없어졌습니다. 모든 데이터는 보통 어딘가에 있는 서버로 부터 로드되어야 하기 때문에 비동기적으로 로드될 것으로 간주합니다. 이것은 보통 위에 정의된 'success' 함수와 마찬가지로 데이터가 로드되었을 때 호출되는 콜백에 전달하는 것을 의미합니다.



중첩 데이터 로드(Loading Nested Data)
위에서 그랬듯이 연관을 설정함으로써, 프레임워크가 단일 요청에 의해 자동으로 중첩 데이터를 파싱 할 수 있습니다. 단일 서버에 응답으로 이 모든 데이터를 반환할 수 있습니다.
{ id: 1 name: 'Ed', posts: [ { id : 12, title: 'All about data in Ext JS 4', body : 'One of the areas that has seen the most improvement in Ext JS 4...', comments: [ { id: 123, name: 'S Jobs', message: 'One more thing' } ] } ] }
데이터는 프레임워크에 의해 모두 자동으로 파싱됩니다. 대부분 환경에서 데이터를 로드하는 모델에 대한 프록시들을 쉽게 구성할 수 있고, Reader 들은 대부분의 형식을 처리할 수 있습니다. Ext JS 3 과 마찬가지로, 모델과 스토어는 그리드, 트리와 폼과 같은 다양한 구성요소들의 프레임워크에 걸쳐 사용됩니다.


아래 그림은 Ext JS 4 가 곧 출시된다는 것을 표현한 것 입니다. 먼가 확 와닫는 디자인이네요.
 

Ext JS 4 가 슬슬 공개가 되려나 봅니다. Sencha 블로그 에 관련 포스팅이 올라왔습니다.

다이나믹 로딩과 새로운 클래스 시스템에 대한 설명입니다.


ㅁ Ext JS 4 Class System



Ext JS 4 에서는 새로운 네가지 특징(클래스 정의, 믹스인, 자동 getter/setter 설정, 다이나믹 디펜던시 로딩)을 갖습니다.


1. 클래스 정의

Ext JS 3 버전에서는 아래와 같은 방식으로 클래스를 정의하였습니다.
//Ext JS 3.x class definition MyApp.LoginWindow = Ext.extend(Ext.Window, { title: 'Log in', initComponent: function() { Ext.apply(this, { items: [ { xtype: 'textfield', name : 'username', fieldLabel: 'Username' }, ... ] }); MyApp.LoginWindow.superclass.initComponent.apply(this, arguments); } });

Ext JS 4 에서는 아래와 같이 "Ext.define" 이라는 함수를 이용하여 새로운 클래스를 정의합니다.
//Ext JS 4.x class definition Ext.define('MyApp.LoginWindow', { extend: 'Ext.Window', title: 'Log in', initComponent: function() { Ext.apply(this, { items: [ //as above ] }); MyApp.LoginWindow.superclass.initComponent.apply(this, arguments); } });

Ext JS 4 의 클래스 매니저를 통해 문자열로 설정된 부모 클래스를 찾아 새로운 클래스를 정의하는 구조로 변경되었습니다.

클래스 정의가 깔끔해지긴 했지만, 아직까지 큰 장점에 대해서는 와 닿지 않네요.



2. 믹스인

믹스인은 재사용이 가능한 행동이나 구성을 정의한 것으로 쉽게 클래스에 정의가 가능합니다. 하나의 클래스에는 여러 개의 믹스인을 적용할 수 있습니다.
Ext.define('Sample.Musician', { extend: 'Sample.Person', mixins: { guitar: 'Sample.ability.CanPlayGuitar', compose: 'Sample.ability.CanComposeSongs', sing: 'Sample.ability.CanSing' } });

위의 "Sample.Musician" 클래스는 "guitar" 에 대해 "Sample.ability.CanPlayGuitar" 의 기능을 갖게 되는 것 입니다. DI 랑 유사한 구조라고 볼 수도 있을 것 같습니다.
Ext.define('Sample.ability.CanPlayGuitar', { playGuitar: function() { //code to play } });



3. 자동 getter/setter 설정

Ext JS 4 에서는 아래와 같이 정의를 하게 되면 title 과 관련된 getter/setter 가 자동으로 정의됩니다.
Ext.define('MyClass', { config: { title: 'Default Title' } });

Ext JS 3.3 에서 위와 같은 효과를 보려면 아래와 같이 클래스를 정의해야 합니다.
MyClass = Ext.extend(MyBaseClass, { title: 'Default Title', getTitle: function() { return this.title; }, resetTitle: function() { this.setTitle('Default Title'); }, setTitle: function(newTitle) { this.title = this.applyTitle(newTitle) || newTitle; }, applyTitle: function(newTitle) { //custom code here } });

자동으로 생성된 getter/setter 에 대해 오버라이딩도 가능합니다.
Ext.define('MyClass', { extend: 'MyBaseClass', config: { title: 'Default Title' }, applyTitle: function(newTitle) { Ext.get('titleEl').update(newTitle); } });

getter/setter 정의가 코드에서 빠지면서 소스 코드의 크기도 많이 줄어들 것으로 예상됩니다.



4. 다이나믹 로딩

이전의 Ext JS 에서는 사용하는 클래스가 미리 다운로드 되어 있지 않는 경우 에러를 발생하게 됩니다. Ext JS 4 의 Ext.require() 함수를 이용하여, Ext.Window 클래스가 다운로드 되어 로드 되는 시점에 호출이 되도록 처리할 수 있습니다.
Ext.require('Ext.Window', function() { new Ext.Window({ title : 'Loaded Dynamically!', width : 200, height: 100 }).show(); });

Ext.Window 는 아래와 같이 extend, requires, mixins 설정으로 정의되어 있습니다. 관련 설정들이 안정적으로 로드될 때 까지 다이나믹 로더가 반복적으로 작업을 처리하게 됩니다.
Ext.define('Ext.Window', { extend: 'Ext.Panel', requires: ['Ext.util.MixedCollection'], mixins: { draggable: 'Ext.util.Draggable' } });

이전의 Ext JS 의 경우 ext-all-debug.js 파일 안에 모든 클래스들이 정의되어 있었습니다. 실제 운영환경에서 사용하기에는 사이즈가 너무 크기에 JS Builder 를 이용하여 ext-all.js 파일로 배포를 하지만 그 사이즈도 만만치가 않습니다. 다이나믹 로더를 통해 필요한 클래스들만 로드할 수 있는 구조가 될 것으로 생각됩니다.

클래스 구조

드디어 Ext JS 도 자바의 패키지의 구조 처럼 패키지를 폴더로 구성하는 것 같습니다. 다이나믹 로더에서 패키지 명을 토대로 클래스 위치를 판단하여 로딩하는 구조라면... 조금 더 직관적인 환경으로 발전해 나갈 것 같습니다.



Ext JS 4 기대가 되는군요...

요즘에 한참 재미가 들린 하이버네이트와 Spring MVC, 그리고 Ext JS 를 이용하여 손쉽게 DB 테이블 데이터를 그려주는 방법을 연구하고 있었습니다.

즉, 하이버네이트로 데이터를 조회하고, Spring MVC 로 Ext JS 에서 사용할 데이터를 만들어서 Ext JS 의 컴포넌트가 요청하는 구조입니다.


만약 아래와 같은 Entity 가 있다면
import java.math.BigDecimal; import java.util.Date; import javax.persistence.Column; import javax.persistence.Entity; import javax.persistence.GeneratedValue; import javax.persistence.GenerationType; import javax.persistence.Id; import javax.persistence.Table; import javax.persistence.Temporal; import javax.persistence.TemporalType; import javax.persistence.Transient; import kr.co.vicki.extjs.support.annotation.ExtJSGridColumn; import kr.co.vicki.extjs.support.annotation.ExtJSGridPanel; @Entity @Table(name = "TSA9110") @ExtJSGridPanel(title = "통합파일", autoExpandColumn = "filename") public class Tsa9110 { @Id @Column(name = "PACK_SEQ") @GeneratedValue(strategy = GenerationType.AUTO) @ExtJSGridColumn(width = 50, header = "Seq", order = 1) private BigDecimal packSeq; @Column(name = "FILENAME") @ExtJSGridColumn(width = 150, order = 12) private String filename; ... }



VickiHibernateDaoBaseImpl 을 구현한 Dao 클래스를 생성합니다.
import java.math.BigDecimal; import kr.co.vicki.egov.relay.data.ITsa9110Dao; import kr.co.vicki.egov.relay.model.persistence.Tsa9110; import kr.co.vicki.hibernate.support.data.WiseOneHibernateDaoBaseImpl; public class Tsa9110DaoImpl extends VickiHibernateDaoBaseImpl<Tsa9110, BigDecimal> implements ITsa9110Dao { }

더보기

AbstractBaseMonitoringController 를 상속받은 Controller 클래스를 생성하였습니다.
import java.math.BigDecimal; import org.springframework.stereotype.Controller; import org.springframework.web.bind.annotation.RequestMapping; import kr.co.vicki.egov.relay.data.impl.Tsa9110DaoImpl; import kr.co.vicki.egov.relay.model.persistence.Tsa9110; @Controller @RequestMapping("/pack") public class PackMonitoringController extends AbstractBaseMonitoringController<Tsa9110, BigDecimal, Tsa9110DaoImpl> { }

더보기

그런 후, ConfigLoadGridPanel 의 데이터에 기본 URL 을 설정해주기만 하면!!!
var viewport = new Ext.Viewport({ layout: 'fit', items: [{ xtype: 'tabpanel', activeTab: 0, items: [{ xtype: 'ConfigLoadGridPanel', baseUrl: '/monitoring/pack' }, { xtype: 'ConfigLoadGridPanel', baseUrl: '/monitoring/content' }] }] });


아래와 같이 데이터를 확인할 수 있습니다.




역시 짜릿한 어노테이션의 손맛!!!

일반적인 TreeLoader 에서는 파라미터를 GET 방식으로 넘기게 됩니다. GET 으로 처리하기 어려운 특수문자의 경우 POST 로 보내야 하는데, 이럴 경우에는 TreeLoader 에서는 방법이 없어 클래스를 확장하게 되었습니다.
(requestMethod 를 post 로 주더라도 실제로 발송 시에는 파리미터가 GET 방식으로 넘어갑니다.)
Ext.ns('Ext.ux.tree'); Ext.ux.tree.JSONTreeLoader = Ext.extend(Ext.tree.TreeLoader, { requestData: function(node, callback, scope) { if (this.fireEvent("beforeload", this, node, callback) !== false) { if (this.directFn) { var args = this.getParams(node); args.push(this.processDirectResponse.createDelegate(this, [{ callback: callback, node: node, scope: scope }], true)); this.directFn.apply(window, args); } else { var requestOptions = { method: this.requestMethod, url: this.dataUrl || this.url, success: this.handleResponse, failure: this.handleFailure, scope: this, argument: { callback: callback, node: node, scope: scope }, params: this.getParams(node) } if (this.requestJsonData) { requestOptions.jsonData = this.requestJsonData; } this.transId = Ext.Ajax.request(requestOptions); } } else { // if the load is cancelled, make sure we notify // the node that we are done this.runCallback(callback, scope || node, []); } } });


실제로 사용 시에는 beforeload 이벤트를 통해 JSON 데이터를 설정합니다.
var treeLoader = new Ext.ux.tree.JSONTreeLoader({ dataUrl: '/gwtbuilder-webapp/ajax/deploy/dir', requestMethod: 'post', listeners: { beforeload: function(treeLoader, node) { treeLoader.requestJsonData = { path: node.attributes.relativePath } } } });


확장성이 좀 유연한 Ext JS... 덕분에 쉽게 해결합니다.

ExtJS 의 EditorGridPanel 에서 입력되는 값이 공백으로 들어올 경우 반영이 되지 않도록 처리를 해야되는 경우가 발생하여서 API 문서를 확인하였으나, beforeedit 와 afteredit 이벤트는 있는데, 정작 edit 이벤트는 보이지 않았습니다.

그래서 valid 로 찾아보니 validateedit 라는 이벤트가 있었습니다.



두 번째 컬럼에 공백이 입력될 경우 edit 이벤트를 취소하는 예제는 아래와 같습니다. 

다음 코드는 IE8 에서는 정상 처리되고 IE7 에서는 오류(문법 오류)가 납니다.