'JavaScript/ExtJS' 카테고리의 글 목록 (2 Page)

'JavaScript/ExtJS'에 해당되는 글 32건

2011.01.23 Hibernate, Spring MVC, Ext JS 한방에... 프레임워크의 사전 징조가 스믈스믈
2011.01.17 [ExtJS] TreeLoader, JSON 으로 파라미터 넘기기
2011.01.06 [ExtJS] EditorGridPanel 에서 값 변경 시 validation 처리
2010.04.06 [ExtJS] EditorGridPanel - CheckboxRenderer
2010.02.11 [ExtJS] Ext.PagingToolbar 커스터마이징 팁!! 1
2010.01.27 [ExtJS] EditorGridPanel에서 Combo 한 번 클릭으로 수정하기
2009.09.22 [ExtJS] XTemplate -_-;;; 2
2009.09.10 [ExtJS] 클래스 상속 기본 형식 2
2009.09.08 [ExtJS] apply, override, extend 비교!! 2
2009.09.07 ExtJS querystring 조회!

Hibernate, Spring MVC, Ext JS 한방에... 프레임워크의 사전 징조가 스믈스믈

JavaScript/ExtJS / 2011. 1. 23. 04:45

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

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

만약 아래와 같은 Entity 가 있다면

VickiHibernateDaoBaseImpl 을 구현한 Dao 클래스를 생성합니다.

AbstractBaseMonitoringController 를 상속받은 Controller 클래스를 생성하였습니다.

그런 후, ConfigLoadGridPanel 의 데이터에 기본 URL 을 설정해주기만 하면!!!

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

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

저작자표시

Posted by 자수씨

, |

[ExtJS] TreeLoader, JSON 으로 파라미터 넘기기

JavaScript/ExtJS / 2011. 1. 17. 14:39

일반적인 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 데이터를 설정합니다.

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

저작자표시

Posted by 자수씨

, |

[ExtJS] EditorGridPanel 에서 값 변경 시 validation 처리

JavaScript/ExtJS / 2011. 1. 6. 00:14

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

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

validateedit : ( Object e )
Fires after a cell is edited, but before the value is set in the record. Return false to cancel the change. The edit event object has the following properties
grid - This grid
record - The record being edited
field - The field name being edited
value - The value being set
originalValue - The original value for the field, before the edit.
row - The grid row index
column - The grid column index
cancel - Set this to true to cancel the edit or return false from your handler.

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

ExtJS 는 정말 항상 저의 상상을 초월합니다. 개발자들을 한번 뵙고 싶다는...

저작자표시

Posted by 자수씨

, |

[ExtJS] EditorGridPanel - CheckboxRenderer

JavaScript/ExtJS / 2010. 4. 6. 17:08

EditorGridPanel 에서 콤보 박스의 경우 Ext.util.Format.comboRenderer 라는 것을 인터넷에서 쉽게 찾을 수 있었으나 체크 박스는 찾을 수가 없어 약간 어색하지만 구현을 해 보았습니다.

EditorGridPanel 의 clicksToEdit 속성을 1 정도로 주면 그나마 덜 어색해집니다.

EditorGridPanel 의 cellClick 이벤트를 받아서 처리해도 되지만... 일단은 이정도에서 마무리 합니다.

저작자표시

Posted by 자수씨

, |

[ExtJS] Ext.PagingToolbar 커스터마이징 팁!!

JavaScript/ExtJS / 2010. 2. 11. 00:49

ExtJS 에서 Ext.PagingToolbar 를 이용하게 되면 위와 같이 똘똘한 페이징 툴바를 사용할 수 있습니다.

하지만... 별도로 파라미터를 이용한다면... 약간의 커스터마이징이 필요합니다.

new Ext.PagingToolbar({

pageSize: 20,

prependButtons: true,

store: new Ext.data.JsonStore({

root: 'rows',

totalProperty: 'totalCount',

idProperty: 'table',

remoteSort: true,

fields: [ ... ],

proxy: new Ext.data.HttpProxy({

url: '~~~'

})

...,

doLoad: function(start) {

var o = this.store.lastOptions.params;

var pn = this.getParams();

o[pn.start] = start;

o[pn.limit] = this.pageSize;

if (this.fireEvent('beforechange', this, o) !== false) {

this.store.load({

params: o

});

}

});

doLoad() 함수를 오버라이딩 하고, store 의 가장 마지막 파라미터를 이용하였습니다.
(기존의 doLoad() 함수에 파라미터만 얹은 격이죠)

위와 같이 하면 기존의 파라미터에 시작 번호와 리미트만 바뀌기 때문에 원하는 결과를 얻을 수 있습니다.

저작자표시

Posted by 자수씨

, |

[ExtJS] EditorGridPanel에서 Combo 한 번 클릭으로 수정하기

JavaScript/ExtJS / 2010. 1. 27. 15:21

ExtJS 에서 EditorGridPanel을 사용하는데 꼭 두번을 클릭해야 Combo가 확장이 되는 것 이었습니다.

이런식으로 한번 클릭하면 포커싱이 되고, 두 번 클릭해야 되는 불편함 때문에 고민을 했는데...
동료 직원이 짜 놓은 소스를 보고 찾아 냈습니다.

clicksToEdit : Number

The number of clicks on a cell required to display the cell's editor (defaults to 2).

Setting this option to 'auto' means that mousedown on the selected cell starts editing that cell.

http://www.extjs.com/deploy/dev/docs/?class=Ext.grid.EditorGridPanel

EditorGridPanel 의 config 에 clicksToEdit 를 설정된 숫자 만큼 클릭을 해야 에디트가 가능하게 됩니다.

1로 설정할 경우 위와 같이 한방에 짜잔~~

저작자표시

Posted by 자수씨

, |

[ExtJS] XTemplate -_-;;;

JavaScript/ExtJS / 2009. 9. 22. 16:25

아래 두 소스의 차이점은 무엇일까요...

아래의 store 로 template 를 dataview 에 붙여서 확인해보았습니다.

첫번째 결과

두번째 결과

자바스크립트에서 문자열을 만들 때, 작은 따옴표냐 큰 따옴표냐의 차이가 첫번째이며,
그 안에 또 따옴표를 쓸 때의 차이가 있을 뿐이였습니다.

즉, 첫번째는 큰 따옴표 속에 작은 따옴표가 들어가 있는 것이며
두번째는 작은 따옴표 속에 큰 따옴표가 있는 것입니다.

일반적으로 자바에서라면 첫번째 방법으로 해야 하는 것이 옳습니다.
하지만 자바스크립트에서는 두번째 방법도 지원을 하는 것 같습니다.

다만 XTemplate 에서는 두번째 방법으로 해야지 정상적인 결과를 볼 수 있다는 점이....
저를 5시간 동안 삽질하게 만들어 주네요 -_ㅜ...

저작자표시

Posted by 자수씨

, |

[ExtJS] 클래스 상속 기본 형식

JavaScript/ExtJS / 2009. 9. 10. 02:11

ExtJS 에서 기본 컴포넌트를 상속받아서 새로운 클래스를 만드는 기본형식입니다.
물론 여러가지 소스를 보구서 제 맘대로 만든 것 입니다...

약간 구조가 좀 그럴 수도 있지만~ 필요로 하는 사람이 있을 수도 있기에...

Ext.reg 를 통해 등록된 컴포넌트는 xtype 을 통해서 다른 컴포넌트의 자식 아이템으로 들어갈 수 있습니다.

...,
items: {
id: 'kr.co.vicki.CustomPanel$1',
xtype: 'kr.co.vicki.CustomPanel'
},
...

xtype 으로 생성된 컴포넌트의 레퍼런스를 얻으려면 Ext.getCmp(id) 함수를 통해 얻어옵니다.

var panel = Ext.getCmp('kr.co.vicki.CustomPanel$1');

당근아저씨의 구조를 이해 못해서 힘들었던 TY이에게~ ㅋㅋㅋㅋ

저작자표시

Posted by 자수씨

, |

[ExtJS] apply, override, extend 비교!!

JavaScript/ExtJS / 2009. 9. 8. 16:43

Ext.apply
c에 있는 모든 속성들을 o에 복사합니다. 세번째 인자인 defaults가 null이 아니면 default의 속성을 o에 복사합니다.
소스에서 알 수 있듯이 덮어쓰기가 되는 형식입니다.

Ext.applyIf
object c의 속성이 비어있지 않으면 o에 복사합니다.

isEmpty : function(v, allowBlank){
return v === null || v === undefined || ((Ext.isArray(v) && !v.length)) || (!allowBlank ? v === '' : false);
},

applyIf : function(o, c) { if(o) { for(var p in c) { if(Ext.isEmpty(o[p])) { o[p] = c[p]; } } } return o; },

Ext.override
origclass의 prototype에 복사하는 형식입니다.
override : function(origclass, overrides) { if(overrides) { var p = origclass.prototype; Ext.apply(p, overrides); if(Ext.isIE && overrides.toString != origclass.toString) { p.toString = overrides.toString; } } },

Ext.extend
constructor, superclass와 같은 ExtJS에서 의미를 갖는 함수들이 보입니다.
자세한 연구는 추후에...
extend : function() { // inline overrides var io = function(o) { for(var m in o) { this[m] = o[m]; } }; var oc = Object.prototype.constructor; return function(sb, sp, overrides) { if(Ext.isObject(sp)) { overrides = sp; sp = sb; sb = overrides.constructor != oc ? overrides.constructor : function(){sp.apply(this, arguments);}; } var F = function(){}, sbp, spp = sp.prototype; F.prototype = spp; sbp = sb.prototype = new F(); sbp.constructor=sb; sb.superclass=spp; if(spp.constructor == oc) { spp.constructor=sp; } sb.override = function(o) { Ext.override(sb, o); }; sbp.superclass = sbp.supr = (function() { return spp; }); sbp.override = io; Ext.override(sb, overrides); sb.extend = function(o){Ext.extend(sb, o);}; return sb; }; }();

파면 팔수록 더 나오는... ExtJS...

저작자표시

Posted by 자수씨

, |

ExtJS querystring 조회!

JavaScript/ExtJS / 2009. 9. 7. 11:32

ExtJS 에서 GET 방식으로 넘어온 파라미터를 조회하는 방식입니다.

var pageParameters = Ext.urlDecode(window.location.search.substring(1));

Ext.urlDecode 함수를 사용합니다~

출처: http://www.extjs.com/deploy/ext/docs/output/Ext.html

urlDecode

public function urlDecode( String string, [Boolean overwrite] )

Takes an encoded URL and and converts it to an object. e.g. Ext.urlDecode("foo=1&bar=2"); would return {foo: 1, bar: 2} or Ext.urlDecode("foo=1&bar=2&bar=3&bar=4", true); would return {foo: 1, bar: [2, 3, 4]}.

Parameters:

string : String
overwrite : Boolean
(optional) Items of the same name will overwrite previous values instead of creating an an array (Defaults to false).

Returns:

Object
A literal with members

This method is defined by Ext.

ㅋㅋㅋㅋㅋ

저작자표시

Posted by 자수씨

, |

«이전 1 2 3 4 다음»

불친절한자수씨

카테고리

달력

공지사항

최근에 올라온 글

최근에 달린 댓글

'JavaScript/ExtJS'에 해당되는 글 32건

Hibernate, Spring MVC, Ext JS 한방에... 프레임워크의 사전 징조가 스믈스믈

[ExtJS] TreeLoader, JSON 으로 파라미터 넘기기

[ExtJS] EditorGridPanel 에서 값 변경 시 validation 처리

[ExtJS] EditorGridPanel - CheckboxRenderer

[ExtJS] Ext.PagingToolbar 커스터마이징 팁!!

[ExtJS] EditorGridPanel에서 Combo 한 번 클릭으로 수정하기

[ExtJS] XTemplate -_-;;;

[ExtJS] 클래스 상속 기본 형식

[ExtJS] apply, override, extend 비교!!

ExtJS querystring 조회!

urlDecode

글 보관함

최근에 받은 트랙백

링크

티스토리툴바