ExtJS DOM 요소 조작 경험 Sharing_extjs-JS 튜토리얼-php.cn

ExtJS DOM 요소 조작 경험 Sharing_extjs

WBOY

풀어 주다： 2016-05-16 17:24:10

원래의

982명이 탐색했습니다.

웹페이지에서 DOM 요소를 조작하는 방법을 처음 접한 것은 졸업 프로젝트를 할 때였는데, 이를 위해 JQuery를 사용했던 것으로 기억합니다. 졸업 후 2년 뒤에는 C 프로그래밍에 종사했는데, 이번에는 JQuery 대신 ExtJS를 사용했습니다. 제 경험상 프로그래머는 지속적인 학습이 필요한 업종입니다(그래서 제 주변 동료들도 백발이 많습니다).

오늘 기사의 주제는 ExtJS를 사용하여 DOM 요소를 조작한 경험을 공유하는 것입니다.
요소 클릭 처리 기능 설정 방법

코드 복사 코드는 다음과 같습니다.

 
var elem = Ext.get('start'); 

elem.on('click', function(e, t) { 
alert(t.id); 
} );

여러 요소 연산 쿼리

코드 복사 코드는 다음과 같습니다.

 
var body = Ext.query('body')[0]; 
body.className = "myStyle"; 

실제 프로젝트에서는 필요에 따라 특정 요소 유형의 정보 프롬프트 스타일을 변경하려면 CSS 기반으로 검색할 경우 사라지는 작업이 필요한 경우 CSS 기반으로 모든 요소를 계속 검색할 수는 없습니다. 이때 동료가 다음과 같은 새로운 방법을 가르쳐주었습니다.

코드 복사 코드는 다음과 같습니다.

 
 

// 역시 그룹에 속하는 여러 요소를 다음 방법으로 얻을 수 있습니다. 
var elemMessageArray = Ext.select("span [ group='message_group']"); 

var newCssObj = {}; 

if (isInfo) { 
newCssObj["class"] = "info"; 
 } else { 
newCssObj["class"] = "error"; 
} 

// 그런 다음 각 요소의 CSS 스타일을 재설정하세요. 
elemMessageArray.each( function(el) { 
el.set(newCssObj); 
el.update(text); 
el.show("display") 
}); 숨기기 

평소 사용했던 방식

코드 복사 코드는 다음과 같습니다 Uncompleted = Ext.get('uncompleted');

elemUncompleted.setDisplayed(true);

 
이 메소드는 애니메이션 효과를 제공할 수 있지만, 이 경우 요소 need to fade : 요소가 사라지더라도 여전히 요소의 공간을 차지하므로 레이아웃이 불편합니다. 나중에 동료들은 이 방법을 사용할 수 있음을 발견했습니다. 애니메이션 효과는 없지만 요소의 위치를 ​​차지하지 않습니다. 

코드 복사 코드는 다음과 같습니다. el.show("display")

el.hide("display")

I 방금 문서에서 지침을 찾았습니다.

이 요소 숨기기 - 디스플레이 모드를 사용하여 "표시" 또는 "가시성"을 사용할지 여부를 결정합니다.

문서를 주의 깊게 읽는 것이 프로그래머입니다. 하는 법을 배워야합니다!