extjs 학습 노트 (2) Ext.Element 클래스

차이점은fly가 되돌아오는 것은 Element 경량급으로 적은 메모리를 차지하지만 대상의 인용을 저장하지 않고 사용할 때마다 이전의 대상을 바꾸며 get은 되돌아오는 Element 대상을 캐시하지만 많은 메모리를 차지한다는 것이다.우리는 하나의 예를 통해 양자의 차이를 설명하고, 동시에 Element이 우리에게 제공하는 강력한 기능을 보았다.다음 내용을 포함하는 html 페이지를 프로젝트에 추가합니다.

물론 요소도 첨가해야 한다.js 파일, 먼저 Ext.get 방법을 사용하여 요소 객체를 가져오고 다음과 같은 작업을 수행합니다.

 
  
/// 
  
/**//* 
  
* ：  
  
* ：2009-10-12 
  
* ：1.0 
  
*/ 
  
 
  
Ext.onReady(function() { 
  
Ext.get("btn").on("click", function() { 
  
var el1 = Ext.get("div1"); 
  
var el2 = Ext.get("div2"); 
  
el1.addClass("red"); // CSS  
  
el2.addClass("green"); 
  
el1.setWidth(); //  
  
el1.highlight(); //  
  
el1.center(); //  
  
el1.setOpacity(0.5); //  
  
el2.fadeIn({ endOpacity: 1, // 0 1  
  
easing: 'easeOut', 
  
duration: 1 
  
}); 
  
//el1.addClass("red").setWidth(100).setOpacity(0.5).center(); 
  
}); 
  
}); 
  
 
 

실행 후 button 단추를 누르면 효과를 볼 수 있습니다.코드는 모두 직관적이어서 너무 많은 해석이 필요 없다.현재 우리는 Element의 get 방법을fly로 바꿨다. 운행한 후에 우리는 모든 조작이div2에서 진행되는 것을 발견할 수 있다. div1의 Element 인용이 저장되지 않았기 때문에 두 번째fly 방법을 사용할 때 처음 얻은 Element 대상을 바꾸었기 때문에 우리는 조작이div2에서 진행되는 것을 보았다.jquery를 사용한 많은 사람들이 메소드 체인(method chain) 방식으로 코드를 쓰는 것을 좋아한다. Element 대상의 대다수 방법이 Element 대상으로 되돌아오기 때문에 여기도 메소드 체인을 사용할 수 있다. 내가 23줄에 쓴 것처럼.그러나 하이라이트,fadeIn,fadeOut 이런 방법은 사실상 Element 대상의 방법이 아니다. 그들은 사실 Ext.Fx류의 방법이다. 단지 js의 apply 방법으로 Element 대상에 추가되었다(apply 방법의 사용은 여기에 참고할 수 있다). Fx눈물의 방법은 내부의 효과 대기열을 사용했고 효과는 특정한 순서에 따랐으며 Element 대상의 방법은 즉각 집행되었다.따라서 메소드 체인에서 Element과 Fx 메소드를 함께 사용할 때는 원하지 않는 결과가 발생할 수 있으므로 주의해야 합니다.
저희 코드에서 setWith 방법을 사용했습니다. Element 클래스에서 set으로 시작하는 방법도 있습니다. 일부 설정을 할 때 선택할 수 있는 매개 변수가 애니메이션의 효과를 나타낼 수 있습니다. 이 매개 변수는 브리 값일 수도 있고 기본 설정을 열 수도 있고 json 대상일 수도 있습니다. 애니메이션에 대한 상세한 맞춤형 설정을 할 수도 있습니다. 위의 코드를 바꾸어 애니메이션이 있는 효과를 보겠습니다.

 
  
/// 
  
/**//* 
  
* ：  
  
* ：2009-10-12 
  
* ：1.0 
  
*/ 
  
Ext.onReady(function() { 
  
Ext.get("btn").on("click", function() { 
  
Ext.fly("div1").addClass("red").setWidth(100, { 
  
duration: 3, 
  
easing: 'elasticIn', 
  
callback: function() {Ext.Msg.alert(" ","div1 100") }, 
  
scope: this 
  
}); 
  
}); 
  
}); 
  
 
 

간단하게 아래 위의 코드를 설명하자면duration은 애니메이션의 시간을 가리키는데 여기는 3초입니다.easing에서 애니메이션을 설정하는 방법은 유효한 Ext.lib이어야 합니다.도움말 문서에서 모든 유효한 값을 얻을 수 있는 Easing 값콜백, 애니메이션이 실행되었을 때 호출되는 함수, scope는 콜백 함수의 작용역을 가리킨다.
get과fly 방법을 사용하는 것 외에 Element에는 select 방법이 하나 더 있습니다. 이것은 매우 강력한 방법입니다.선택기에 따라 Element의 그룹을 얻을 수 있습니다. (사실 되돌아오는 것은 Composite Element Lite나 Composite Element 대상입니다. 이 두 종류는 js의 계승 관계로 내부에서 하나의 Element 대상의 그룹을 유지합니다. 되돌아오는 대상에 Element 방법을 사용하면 실제적으로 그룹의 모든 Element 대상을 호출하는 방법입니다.)이 방법은 간단히 Ext.select로 쓸 수 있으며 선택기가 매개 변수로 되어 있으며 사용 방법은 jquery와 유사하다. 예를 들어 Ext.select("p")는 모든 p 라벨을 선택하고 Ext.select(".red")는 css류가 레드인 모든 라벨을 선택하며 선택기는 조합해서 사용할 수 있다. 예를 들어 "div.foo:nth-child(odd)[@foo=bar].bar:first"등이다.선택기를 잘 사용하면 원소를 제어하는 데 큰 편리를 줄 수 있고 Ext.DomQuery 종류의 문서를 참고하여 더 많은 선택기에 대한 지식을 얻을 수 있다.
Element의query 방법은 select와 비슷한 방법을 사용하여 Dom 노드의 집합을 되돌려줍니다. 그러나 주의해야 할 것은 Ext.query는 Ext.Element이 아닙니다.query의 약자는 Ext.DomQuery입니다.select 방법의 약자.Dom 접점은 get 방법으로 Element 대상을 얻을 수 있고, Element 대상은dom 속성을 통해 Dom 노드를 얻을 수 있어 서로 다른 수요에 따라 쉽게 전환할 수 있다.
마지막으로 Element의addListener 방법을 말씀드리겠습니다. 이 방법은 on으로 간략하게 써서 Element 대상에게 이벤트를 등록하는 데 사용할 수 있습니다. 우리는 이미 on("click",function(){})이라는 용법을 보았습니다.이 방법을 사용하면 여러 이벤트를 한 번에 등록할 수 있습니다. 예를 들면 다음과 같습니다.

 
  
el.on({ 
  
'click' : { 
  
fn: this.onClick, 
  
scope: this, 
  
delay: 100 
  
}, 
  
'mouseover' : { 
  
fn: this.onMouseOver, 
  
scope: this 
  
}, 
  
'mouseout' : { 
  
fn: this.onMouseOut, 
  
scope: this 
  
} 
  
}); 
  
 
 

delay는 이벤트가 터치된 지 얼마나 된 후에 이벤트 처리 함수를 실행하는지 알려줍니다. 단위는 밀리초입니다.또 하나의 간결한 문법이 있다.

 
  
el.on({ 
  
'click' : this.onClick, 
  
'mouseover' : this.onMouseOver, 
  
'mouseout' : this.onMouseOut, 
  
scope: this 
  
});