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

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

, |

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

, |

Ext.util.Format 클래스~

JavaScript/ExtJS / 2009. 2. 27. 01:40

http://www.extjs.com/deploy/dev/docs/?class=Ext.util.Format

간만에 extjs 로 코딩할 거리가 생겼습니다. -_-;;;; 스크립트 손 놓은지 오래됐는데;;;

유용한 extjs util 클래스를 정리하고자 합니다.

함수명	파라미터	리턴값	설명
capitalize	String value	String	Converts the first character only of a string to upper case 첫번째 문자를 대문자로 바꾸는 함수로 추정됩니다.
date	String/Date value, [String format]	String	Parse a value into a formatted date using the specified format pattern. 형식에 맞게 날짜/시간을 변환합니다.
dateRenderer	String format	Function	Returns a date rendering function that can be reused to apply a date format multiple times efficiently 안써봐서 모르겠습니다. ㅋㅋㅋ
defaultValue	Mixed value, String defaultValue	String	Checks a reference and converts it to the default value if it's empty 값이 비어 있을 경우 기본값으로 반환해줍니다.
ellipsis	String value, Number length	String	Truncate a string and add an ellipsis ('...') to the end if it exceeds the specified length 문자열의 길이가 일정 길이를 넘어서면 해당길이 뒤에 '…' 을 붙여 표시합니다.
fileSize	Number/String value	String	Simple format for a file size (xxx bytes, xxx KB, xxx MB) 파일크기로 변환해줍니다.
htmlDecode	String value	String	Convert certain characters (&, <, >, and ') from their HTML character equivalents. 인코딩된 특정 문자를 디코딩합니다.
htmlEndcode	String value	String	Convert certain characters (&, <, >, and ') to their HTML character equivalents for literal display in web pages. 특정 문자를 인코딩합니다.
lowercase	String value	String	Converts a string to all lower case letters 문자열을 소문자로 변환합니다.
nl2br	String The	String	Converts newline characters to the HTML tag <br/> 뉴라인을 <br/> 태그로 변환합니다.
stripScripts	Mixed value	String	Strips all script tags script 태그를 벗겨내는 건가요???
stripTags	Mixed value	String	Strips all HTML tags HTML 태그들을 벗겨내는...???
substr	String value, Number start, Number length	String	Returns a substring from within an original string 문자열을 잘라냅니다.
trim	String value	String	Trims any whitespace from either side of a string 좌우 공백을 제거합니다.
undef	Mixed value	Mixed	Checks a reference and converts it to empty string if it is undefined 파라미터가 undefined 일 경우 빈 스트링을 반환???
uppercase	String value	String	Converts a string to all upper case letters 대문자로 변환합니다.
usMoney	Number/String value	String	Format a number as US currency 미국 통화단위로 포맷팅합니다.

스크립트는... 정말~ 피곤하지만 재밌는 언어입니다. ㅋㅋㅋㅋ

Posted by 자수씨

, |

ExtJS Panel 안에 P Tag 의 margin 이...

JavaScript/ExtJS / 2009. 1. 15. 10:35

프로젝트를 사내에 배포하여 사용하고 있는데 에디터에서 보이는 모양과 다르게 볼 때는 이상하게 나오는 것이었습니다.

원인은 P 태그...

이것 때문에 XML 다 열어서 <BR /> 다 넣어주고 난리가 아니였습니다.
결재 문서라 조금 크리티컬 했기에 -_ㅜ...
왜 그런걸까요... 어디선가 CSS 의 조작이 있는듯한데 일단은 땜방!!!

Posted by 자수씨

, |

Ext JS 인쇄시 오류현상 - 해결..

JavaScript/ExtJS / 2008. 10. 27. 16:46

Ext JS 에서 (GWT-Ext) 인쇄를 하려고 보니 화면에 보이는대로 인쇄가 되지 않는 문제가...

~~다음 미션은 배경색 보이게 하기....~~
컹... 배경색은 익스플로러의 경우 도구 - 인터넷 옵션 - 고급 탭 - 인쇄_배경색 및 이미지 인쇄 체크를 해야 합니다...

Posted by 자수씨

, |

[extjs] 라이브러리에 에러가 발생한다면...

JavaScript/ExtJS / 2008. 6. 10. 14:12

당근아저씨가 만든 메일쓰기에서 메일을 쓰고나면 스크립트 오류가 발생...

extjs 쪽 라이브러리라서 어떻게 할까 고민하다가 해당 라인을 try ~ catch 로 묶어버렸다..

LGPL 인데 ㅋㅋㅋ 괜찮겠지? ㅋㅋ

Posted by 자수씨

, |

[extjs] Grid RowActions Plugin

JavaScript/ExtJS / 2008. 3. 30. 14:29

참고자료: RowActions Forum Thread

GridPanel 에 아이콘을 삽입하여 이벤트를 줄 수 있는 플러그인이다.

gwt-ext 에 없으면 또 노가다인가... -_ㅜ

그림 1 Grid RowActions Plugin for Ext 2.x

우리도 저런 아이콘 만들어줄 수 있는 디자이너 한명 있었으면 좋겠는데...

Posted by 자수씨

, |

불친절한자수씨

카테고리

달력

공지사항

최근에 올라온 글

최근에 달린 댓글

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

[ExtJS] 생성자 오버라이딩

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

[ExtJS 3.0] Toolbar Buttons Group Ribbon Style

[Ext JS] 아악 tooltip....

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

Ext.util.Format 클래스~

ExtJS Panel 안에 P Tag 의 margin 이...

Ext JS 인쇄시 오류현상 - 해결..

[extjs] 라이브러리에 에러가 발생한다면...

[extjs] Grid RowActions Plugin

글 보관함

최근에 받은 트랙백

링크

티스토리툴바