행복만땅 개발자

ExtJS에서 많이 쓰이는 것중 하나가 그리드 또는 트리패널이 아닐까 싶다.

데이타 갱신이나 검색시 해당 레코드나 트리 노드에 선택포커스를 주게 된다.

페이징처리가 되는 그리드나 노드가 그다지 많지 않은 트리패널에서야

selectRow() 메소드나 select() 메소드로 해당 레코드와 노드가 선택되었슴만 표시해도 상관없다.

하지만 스크롤링 되는 경우 패널 하단에 위치한 레코드나 노드가 선택될 때

선택마스크는 표시가 되는데 선택위치로 자동스크롤링이 되지 않는다.

즉 선택된 곳에 스크롤바가 위치하게 하고 싶을 때...

그럴때는 focusRow() 나 ensureVisible() 로 선택된 레코드나 노드위치로 자동스크롤링을 해줄수 있다.

그리드인 경우

그리드패널.getView().focusRow(선택된 레코드의 Index);

트리패널인 경우

선택된트리노드.ensureVisible();

javascript에서의 delete는 개체(object), 개체의 속성(property),

배열의 특정 인덱스에 있는 원소(element)를 지우는 연산자이며. 문법은 다음과 같다

delete objectName
delete objectName.property
delete objectName[index]
delete property // with 문장 안에서만 유효

objectName은 개체 이름이고, property는 개체에 존재하는 속성이고, index는 배열의 원소 위치를 나타내는 정수.

네 번째 형식은 개체의 속성을 지우는 코드인데, with 문장 안에서만 사용할 수 있다.

암시적으로 선언된 변수를 지울 때는 delete 연산자를 사용할 수 있지만

단 var 문장을 이용해서 선언된 변수는 지울 수 없다.

delete 연산자 실행이 성공하면, 속성이나 원소가 undefined로 설정되며.

delete 연산자는 실행이 가능하면 true를 반환하고, 불가능하면 false를 반환하게 된다.

x=42
var y= 43
myobj=new Number()
myobj.h=4      // h라는 속성을 만듭니다
delete x       // returns true (암시적으로 선언된 변수는 지울 수 있습니다)
delete y       // returns false (var로 선언한 변수는 지울 수 없습니다)
delete Math.PI // returns false (미리 정의된 속성은 지울 수 없습니다)
delete myobj.h // returns true (사용자 정의 속성은 지울 수 있습니다)
delete myobj   // returns true (암시적으로 선언되었으므로 지울 수 있습니다)

배열의 원소를 지우기

머 당연하지만 배열의 원소를 지워도, 배열의 길이에는 변화가 없게 된다.

즉 delete로 지우는 경우 원소는 더이상 배열에 존재하지 않게 된다(undefined).

하지만 delete와 배열원소에 undefined를 할당한 경우 조금 의미가 다르다.

먼저 아래 예제에서 trees[3]을 delete로 제거한 예제이다.

trees=new Array("redwood","bay","cedar","oak","maple")
delete trees[3]
if (3 in trees) {
   // 이 블록은 실행되지 않는다.

   alert(trees[3]);
}

즉 trees라는 배열에는 trees[3] 이라는 배열원소 자체가 삭제(undefined)되어 실행되지 않지만
단지 배열 원소가 존재하긴 하지만 정의되지 않은 값을 가지도록 하고 싶다면 
delete 연산자 대신 undefined 키워드를 사용하면 된다. 
 
다음은 trees[3]에 undefined 값을 할당하는 경우이다
 
trees=new Array("redwood","bay","cedar","oak","maple")
trees[3]=undefined
if (3 in trees) {
   // 이 블록은 실행된다.
}
 
undefined  키워드로 배열의 값은 정의되지 않았지만 배열원소는 유지되므로 블록은 실행된다
 

typeof 연산자는 형식 정보를 문자열로 반환하며 "Number", "String", "Boolean", "Object", "Function", "undefined"라는 6가지 형식을 반환할 수 있습니다.

선택적인 요소로 typeof 구문에 괄호를 사용할 수도 있기에 다음 둘 중 한 가지 방법으로 사용할 수 있습니다.

1. typeof operand
2. typeof (operand)

if ( typeof 'AAA'  != 'Number' ) {

alert('숫자가 아닙니다.');

}

또다른 예를 들어 우리가 이런 변수를 정의했다고 해봅시다.

• var myFun = new Function("5+2");
  var shape="round";
  var size=1;
  var today=new Date()

typeof는 이 변수들에 대해서 다음과 같은 결과를 반환할 것입니다. 

• typeof myFun is function
  typeof shape is string
  typeof size is number
  typeof today is object
  typeof dontExist is undefined
  

true와 null 키워드에 대해서 typeof 연산자는 다음과 같은 결과를 반환합니다.

• typeof true is boolean
  typeof null is object

수와 문자열에 대해서 typeof 연산자는 다음과 같은 결과를 반환합니다.

• typeof 62 is number
  typeof 'Hello world' is string

속성 값에 대해서 typeof 연산자는 속성이 포함하고 있는 값의 형식을 반환합니다.

• typeof document.lastModified is string
  typeof window.length is number
  typeof Math.LN2 is number

메소드와 함수에 사용하면 typeof 연산자는 다음과 같은 결과를 반환합니다.

• typeof blur is function
  typeof eval is function
  typeof parseInt is function
  typeof shape.split is function

미리 정의된 개체들에 대해서 typeof 연산자는 다음과 같은 결과를 반환합니다.

• typeof Date is function
  typeof Function is function
  typeof Math is function
  typeof Option is function
  typeof String is function
  

Tree.TreeLoader 의  beforeload와 load 이벤트에서 Mask를 정의하면

Tree컴포넌트를 생성시  '로딩중...' 이라는 mask 를 볼수 있다.

그럼 다른 곳에서는 사용할 수 없는걸까?

mask()는 Ext.LoadMask Object 를 사용하고 있기 때문에 어떤 Element에도 적용할 수 있다.

기본적으로 UpdateManager에 다음과 같이 바인딩하면 된다.

new Ext.LoadMask(el, {msg: 'Please Wait...'});

예를 들면 Store에서는 다음과 같이 바인딩하면 된다.

new Ext.LoadMask(el, {msg: 'Please Wait...', store: yourStore});

또 다른 예로 TreeLoader인 경우를 들면 샘플예제 때문인지 다음과 같이 많이들 사용하고 있는 듯하다.

var tree = Tree.TreeLoader({
        ...

         listeners: {
          beforeload: function(treeLoader, node) {
             node.getOwnerTree().getEl().mask('Loading...');
          },
          load: function(treeLoader, node) {
             node.getOwnerTree().getEl().unmask();
          }
       }
   }
});

위의 코드를 다음과 같이 사용하면 된다.

new Ext.LoadMask(tree.el, {msg: 'Please Wait...', store: tree.loader});

Grid 의 경우는 더 간단하다.

config option으로 loadMask항목을 true로 해주기만 하면 된다.(기본값은 false)

아니면 다음과 같이 해도 상관없다.

loadMask : {msg: 'Loading Data...', msgCls: 'some-css-class'}

앞서 말한바 있지만 모든 elements에 적용할 수 있다는 말은 Ext.Element 의 API를 보면 잘 알 수 있다

Ext.Element 에는 mask() 라는 Function 에는 의 선택 arguments를 가지고 있는 것을 확인할 수 있다.

el.mask(msg, msgCls);

font:normal 11px tahoma

font:normal 12px tahoma

자세히 보면 탭 아래 공간이 비어 있는것을 볼 수 있다. 탭을 선택 하더라도 깨져서 표현이 된다.
반면에 IE 를 제외한 ExtJS 호환 브라우져 에서는 굴림체를 11px로 표시함으로서 위와 같은 문제가 발생하지 않는다.

해결방법은??
11px 이 사용되는 부분의 폰트를 아래와 같이 굴림으로 명확히 지정해 주면 된다.

font:normal 11px gulim

또는 아래의 코드로 IE 의 탭 관련 css 를 재정의 한다.

.ext-ie .x-tab-strip span.x-tab-strip-text {    font: 11px Gulim, Tahoma;}

흐음 아직은 국내에서 ExtJS를 쓰는 곳은 많이 없는지 덕분에 머 하나 막히면 ExtJS 포럼을 열씸 뒤지는 중이다.

그래도 예전에 비해 ExtJS에 관련된 블로그들이 많이 눈에 띄는 것을 보면 언젠가 ExtJS의 한글서적도 나오지 않을까?

dojo 관련한 책도 영문서적만 있는 걸 보면 큰 기대는 못하고 있지만...-_-

mvc 프레임워크로 스트럿츠2를 사용하기 때문에 요즈음 dojo와  extjs, jQuery 통합을 시도해보고는 있는데

기냥 하나만 쓸까? 고민..

여하튼 ExtJS 사용자들을 위한 팁하나 소개할까 한다.

ExtJS로 툴바 또는 버튼을 만들면 a 태그를 사용할 때 처럼 onFocus 상태에서 점선박스가 생기게 된다.

매번 해당 컴포넌트를 만들면서 onFocus ='this.blur()' 를 해주기는 어려운 노릇..

ext-all.js 파일을 열어보자

<em unselectable=\"on\"><button class=\"x-btn-text\" type=\"{1}\" >{0}</button></em>

라는 구문을 찾아서 다음과 같이 수정한다.

<em unselectable=\"on\"><button class=\"x-btn-text\" type=\"{1}\" onfocus=\"this.blur()\">{0}</button></em>

 이젠 별다른 조치없이도 점선박스는 사라진다. ㅋㅋ

PS. 찾아보면 두군데 수정을 하게 된다.

혹여나 이글을  보고 수정했는데 여전히 점선이 나온다는 사람이 있을지 몰라서 언급..*^^*