'extjs' 태그의 글 목록

[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 자수씨

, |

[ExtJS] 생성자 오버라이딩

JavaScript/ExtJS / 2009. 8. 24. 17:05

ExtJS 에서 Ext.extend 를 통해서 상속을 받다보니 한가지 궁금한 점이 생겼습니다.

"생성자는 어떻게 상속을 받지???..."

그냥 ExtJS, 생성자, 상속 이런 키워드로 검색을 하니 만족할만한 결과를 찾을 수 없었습니다.

그래서 구글링~~

일단 기본적으로 생성자는 constructor 라는 함수입니다.

그 함수를 오버라이딩 한 후에, 상위 클래스의 생성자를 호출 (자바의 super()) 하기 위해서
SubClass.superclass.constructor.apply(this, arguments)
를 코드에 정의해 줍니다.

오버라이딩할 항목들만 미리 정의해 놓을 경우에는 약간 다른 방식으로 생성자가 정의됩니다.

arguments.callee.superclass.constructor.apply(this, arguments);

자바 문법을 왠만큼은 자바스크립트(ExtJS)로 변환을 할 수 있을 것 같다는 생각이 들었습니다.
조만간 자바를 자바스크립트로 변환해주는 이클립스 플러그인 개발에 도전을 해봐야겠네요.

참고자료: GeoSpiel document

저작자표시

Posted by 자수씨

, |

ExtJS 와 ActiveX 의 불편한 동거...

JavaScript/ExtJS / 2009. 8. 21. 01:31

요즘에 한참 개발 중인 페이지입니다.

임시저장 버튼을 누르면 Ext.Msg.alert() 메소드를 이용해서 확인하려고 하는데...
위의 툴바만 투명하게 gray 처리되었습니다. 왜 그럴까요?
원인은 바로!!! HwpCtrl, 즉, ActiveX 위로는 DIV 가 올라가지 않기 때문입니다.

예전에 GWT 할 때도 이런 사태가 발생해서 당근아저씨가 처리해 놓은 것이 있길래
약간 참조하여서 스크립트 버전으로 만들어보았습니다.

wiseone_staticframe.js

wiseone_msgbox.js

실제로 코드 작성시에 wiseone_msgbox.js 는 다른 js 와 마찬가지로 로드하시면 됩니다.
wiseone_staticframe.js 는 <body></body> 태그 안에 로드합니다.
그리고, msgbox 는 다음과 같이 사용합니다.

WiseOne.MsgBox.alert("임시저장 확인", "임시저장");

잘 나옵니다. 방식은 iframe 의 투명도를 0 으로 설정하고 전체 페이지에 가려놓은 후에 Ext 의 MsgBox 를 띄우는 것이었습니다.
예전에 같이 일했던 송아저씨의 이야기 (ActiveX 는 iframe 으로 가릴 수 있다는...) 를 토대로 당근아저씨가 만든 것입니다.

일단 좀 걱정되었던 부분이었는데 다행히도 쉽게 마무리 한 것 같습니다.

마무리하며...
그냥 iframe 을 로드했더니 전혀 변화가 없었습니다. 이유는 Ext ViewPort 의 contentEl 을 ActiveX 로 설정을 하여서 iframe 의 영역이 재대로 잡히지 않았던 것이었습니다. 그래서 position 을 absolute 로 설정하고, top 과 left 를 0 으로 설정하여서 처리를 하였습니다.

저작자표시

Posted by 자수씨

, |

불친절한자수씨

카테고리

달력

공지사항

최근에 올라온 글

최근에 달린 댓글

'extjs'에 해당되는 글 31건

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

[ExtJS] EditorGridPanel - CheckboxRenderer

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

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

[ExtJS] XTemplate -_-;;;

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

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

ExtJS querystring 조회!

urlDecode

[ExtJS] 생성자 오버라이딩

ExtJS 와 ActiveX 의 불편한 동거...

글 보관함

최근에 받은 트랙백

링크

티스토리툴바