ExtJS DOM 요소 조작 경험 Sharing_extjs

웹페이지에서 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 방금 문서에서 지침을 찾았습니다.

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

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