[ExtJS 3] 5. Ext.get 함수와 Ext.fly 함수

1. Ext.get 함수

ExtJs 에는 DOM 을 읽거나 조작할 수 있도록 하는 많은 함수들을 제공한다.
Ext 의 핵심 라이브러리로써 이들 중 get 의 사용빈도가 높다.

var myDiv = Ext.get('my_id');

'my_id' : 이 식별자는 Ext.Element 객체를 통해 도큐먼트 내의 요소 (element) 에 접근이 가능하다.
html 에서 쓰일때에는 <div id ='my_id'> 와 같이 id 요소를 넣어주어야 한다.

위와 같이 Ext.get('my_id') 는 눈치 빠르신 분들께서는
javascript 문법의
document.getElementById('my_id') 와 같은 기능을 한다는 것을 눈치 빠르신 분들은 채셨겠지요?~ ^-^

쓰임새 Ex>

Ext.get('my_id').highlight ( 'red', {

endColor : '0000FF' ,
duration : 3

});

< 유. 의. 사. 항 >

*  DOM 요소의 ID 는 유일해야 한다.

* 일단 my_id 가 사용되면 도큐먼트에서 같은  ID 를 다시 사용할 수 없다. (document 에서 같은 아이디가 사용되는 경우 예측하지 못한 이상한 결과를 보게 될 수도 있다고 하네요... ^^ 괜한 버그를 만들지 맙시다.)

* 위젯을 생성하면 해당 위젯의 ID 는 ExtJS 가 모두 관리해 줍니다.
( But,  HTML 요소를 미리 정의해 놓고 그 위에 ExtJS 컴포넌트를 적용시키는 SCAFFOLDING (겹치기기법) 을 사용하는 경우는 예외라고 합니다. )

---

2. Ext.fly (메모리 사용 최소화)

요소를 반복적으로 사용하지 않는다면 Ext.get 이 요소 검색을 최적화 하기 위해 사용하는 캐시 매커니즘을 피할 수 있다.
간단한 작업을 수행하기 위해 "flyweight" 라 불뤼는 것을 사용할 수 있다.
( => 브라우저 메모리에 캐시 되었지만, 다시 사용하지 않을 요소로 인해 정체되는 일이 없도록 함으로써 속도를 높인다)
* flyWeight : 소프트웨어 디자인 패턴으로, 유사한 다른 객체와 데이터를 공유함으로써 메모리 사용을 최소화 하는 객체.

 

쓰임새 Ex >

Ext.fly('my_id').highlight ( 'red', {

endColor : '0000FF' ,
duration : 3

});

Ext.get -> Ext.fly 로 변경된 것을 볼 수 있다.
이것은 단 한 번 사용하는 코드에 유용하다.
FlyWeight 는 호출 될 때마다 같은 메모리를 재사용 한다.

FlyWeight  는 변수에 저장되지 않고 다시 사용되지 않는다.

다음과 같은 경우에는 쓰이지 말아야 한다.

안좋은 쓰임새 Ex>

var my_id = Ext.fly('my_id');
Ext.fly('another_id');
my_id.highlight( 'red' , {

endColor: '0000FF' ,
duration : 3

});

=> flyWeight 는 호출 될 때마다 같은 메모리는 재사용 한다고 했다.
my_id 참조 객체에 대해 하이라이트 함수를 호출하는 부분은 실제로  another_id  에 대해 참조하고 있다.

Ext.get  과 Ext.fly 의 차이를 조금은 이해 하셨으면 좋겠습니다.~ ^-^