'JavaScript' 카테고리의 글 목록 (4 Page)

[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 3.0] Toolbar Buttons Group Ribbon Style

JavaScript/ExtJS / 2009. 8. 20. 19:24

ExtJS 3.0 에서 Toolbar ButtonsGroup 이 새로 추가되었습니다.

(예제 페이지 : https://www.extjs.com/deploy/dev/examples/toolbar/toolbars.html)

하지만 우리가 쓰는 Office 2007 에는 그룹 타이틀이 하단에 위치해 있는 것을 볼 수 있습니다.

그리하여 구글링으로 찾은 결과물이 바로 아래 게시물입니다.
https://www.extjs.com/forum/showthread.php?p=375447

culybracket 이라는 닉네임을 쓰시는 분이 fbar 에 text 로 title 을 작성하고 css 형식을 입히는 방식으로
오피스와 같은 형식의 그룹 버튼 만드는 법을 정리하셨습니다.

CSS

.x-btn-group.x-btn-group-ribbonstyle .x-btn-group-bc {
    /* Set this path to your environment! */
    background-image:    url(assets/images/group-bt.gif);
}
.x-btn-group.x-btn-group-ribbonstyle .x-btn-group-footer .xtb-text {
    color:                #3E6AAA;
    padding:            0;
}
.x-btn-group.x-btn-group-ribbonstyle .x-btn-group-footer,
.x-btn-group.x-btn-group-ribbonstyle .x-btn-group-footer .x-panel-btns,
.x-btn-group.x-btn-group-ribbonstyle .x-btn-group-footer .x-panel-btns td.x-toolbar-cell {
    padding:            0;
}

.x-btn-group.x-btn-group-ribbonstyle .x-btn-group-footer .x-panel-btns-right .x-panel-fbar {
    float:                none;
}
.x-btn-group.x-btn-group-ribbonstyle .x-btn-group-footer .x-panel-btns .x-toolbar-left table {
    margin:                0 auto;
}

/* FIXES FOR IE: */
.x-btn-group.x-btn-group-ribbonstyle .x-btn-group-footer .x-panel-btns.x-panel-btns-right .x-clear {
    font:                0 sans-serif;
}
.x-btn-group.x-btn-group-ribbonstyle .x-btn-group-footer .x-panel-btns .x-toolbar-left {
    text-align:            center;
}
.x-btn-group.x-btn-group-ribbonstyle .x-btn-group-tc {
    vertical-align:        top;
}

실제 사용 예제 (fbar 의 속성으로 배열에 텍스트 요소하나만 넣으면 됩니다.)
new Ext.ButtonGroup({ cls: 'x-btn-group-ribbonstyle', fbar: ['YourTitleHere'] });

CSS 를 보시면 assets/images/group-bt.gif 가 필요합니다.
아래의 주소에서 구하시면 될 것 같습니다. (이미지의 위치에 따라 CSS도 변경해주셔야 하는 거 잊지마시구요...)
http://js.curlybracket.de/examples/buttongroup-ribbonstyle/group-bt.gif

실제로 개발자 분의 예제 페이지를 보면 아래처럼 나오게 됩니다.

이로서 한걸음 더 오피스와 가까워지는 ExtJS 를 보셨습니다. ㅋㅋㅋ
메뉴랑 연동이 되는 툴바도 나왔으면 좋겠네요~

저작자표시

Posted by 자수씨

, |

[JavaScript] replaceAll

JavaScript / 2009. 8. 12. 10:59

예전에 한참 스크립트와 생활을 할 때 봤던 내용인데 까먹을까봐 정리해야 겠습니다 ㅋㅋㅋ

String의 prototype에 replaceAll함수를 추가하는 방식입니다.

split함수를 이용하여 바꿀 부분으로 자르고 join으로 합치는 방식은 어떤 분이 생각했는지 몰라도 참 대단한 발상인 것 같았습니다.

Split, Join 함수의 정의를 보면 다음과 같습니다.

split Method (Windows Scripting - JScript)
Returns the array of strings that results when a string is separated into substrings.
stringObj.split([separator[, limit]])
Arguments

stringObj

Required. The String object or literal to be split. This object is not modified by the split method.

separator

Optional. A string or an instance of a Regular Expression object identifying one or more characters to use in separating the string. If omitted, a single-element array containing the entire string is returned.

limit

Optional. A value used to limit the number of elements returned in the array.
출처: MSDN (http://msdn.microsoft.com/en-us/library/t5az126b(VS.85).aspx)

join Method (Windows Scripting - JScript)
Updated: March 2009

Returns a string value consisting of all the elements of an array concatenated together and separated by the specified separator string.
arrayObj.join(separator)
Arguments

arrayObj

Required. An Array object.

separator

Required. A String object used to separate one element of an array from the next in the resulting String object. If omitted, the array elements are separated with a comma.
출처: MSDN (http://msdn.microsoft.com/en-us/library/59x7k999(VS.85).aspx)

split은 문자열 뿐만아니라 정규식으로도 잘라낼 수 있기 때문에 자바에서 쓰는 replaceAll과 거의 유사하게 결과를 볼 수 있을 것이라 생각됩니다. 하지만 수행속도는 당연히 떨어지겠죠...

요즘 회사일이 너무 자주 바껴서 정신이 읍네요 -_ㅜ...

저작자표시

Posted by 자수씨

, |

자바스크립트 라이브러리 별 브라우저 확인 함수~!

JavaScript / 2009. 4. 28. 15:36

prototype

Prototype.Browser.IE :: Boolean
Prototype.Browser.Opera :: Boolean
Prototype.Browser.WebKit :: Boolean
Prototype.Browser.Gecko :: Boolean
...

jquery

jQuery.browser.safari :: Boolean
jQuery.browser.opera :: Boolean
jQuery.browser.msie :: Boolean
jQuery.browser.mozilla :: Boolean
...

ExtJS

Ext.isIE :: Boolean
Ext.isIE6 :: Boolean
Ext.isIE7 :: Boolean
Ext.isOpera :: Boolean
Ext.isSafari :: Boolean
Ext.isGecko :: Boolean
...

흠... 그냥 자바스크립트 표준에서 지원을 해줬으면 좋겠네엽;;;

Posted by 자수씨

, |

[Ext JS] 아악 tooltip....

JavaScript/ExtJS / 2009. 3. 17. 20:59

gwt-ext 로 개발한 UI 가 너무 느려서 extjs 로 포팅한 모듈이 있었습니다.

하다보니 tooltip, 즉 풍선도움말이 정상적으로 표시가 안되서 그냥 넘어갔었는데...
고객의 불만이 많다는 연락을 받고... 다시한번 눈을 씻고 찾아보았지만 해결할 수 있는 방법이 없었습니다.

분명히 Ext API Documentation 대로 tooltip 속성도 넣어주고 하였는데 안되길래,
ext:qtip 속성에 값도 넣어도 보고 하였지만... 역시 마찬가지 였습니다.

한참을 고민하고 있는데 그냥 QuickTips 라는 것이 눈에 띄었습니다.

tooltip : String/Object

The tooltip for the button - can be a string or QuickTips config object

그래서 Ext API Documentation::Ext.QuickTips 를 확인해 보니 아래와 같은 예제 코드가 있었습니다.

그래서 저도 속는 셈치고 아래 코드를 넣어보았습니다.

Ext.QuickTips.init();

-_-;;; 이제서야 tooltip 이 나옵니다.....

이걸로 지난번의 5시간과 오늘의 4시간 삽질의 끝을 볼 수 있었습니다.

extjs 가 주특기라 아니라 원인을 파악하기는 힘들지만 어쨌든 해결했으니~ 이제 쵸큼 쉴 수 있겠습니다.

Posted by 자수씨

, |

자바스크립트 bind() 라는 함수를 아시나요?

JavaScript/ExtJS / 2009. 2. 27. 19:11

bind() 는 순수 자바스크립트라고 하기는 뭐하고 Prototype 에서 제공해주는 함수입니다.

하는일은 function 에 파라미터를 넘겨주는 역할을 합니다.

가장 많이 쓰이는 곳은 async 환경에서 callback 함수에서 특정값을 넘길때 주로 사용하게 됩니다.

extjs 에서도 이런기능을 찾다가 검색에 성공하였습니다.

Function 클래스의 createDelegate 함수를 통해서 파라미터가 설정된 function 이 재구성됩니다.
저 함수를 변수로 받아서 호출을 하게되면 파라미터는 항상 1, 2 가 넘어가게 됩니다.

http://www.prototypejs.org/api/function/bind
http://www.extjs.com/deploy/dev/docs/?class=Function

Function 클래스도 쓸만한게 꽤 되는군요... 후훗...

Posted by 자수씨

, |

불친절한자수씨

카테고리

달력

공지사항

최근에 올라온 글

최근에 달린 댓글

'JavaScript'에 해당되는 글 59건

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

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

ExtJS querystring 조회!

urlDecode

[ExtJS] 생성자 오버라이딩

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

[ExtJS 3.0] Toolbar Buttons Group Ribbon Style

[JavaScript] replaceAll

자바스크립트 라이브러리 별 브라우저 확인 함수~!

[Ext JS] 아악 tooltip....

자바스크립트 bind() 라는 함수를 아시나요?

글 보관함

최근에 받은 트랙백

링크

티스토리툴바