ExtJS_extjs 시작하기

시작...
ExtJS에서 가장 일반적으로 사용되는 메소드는 아마도 Ext.onReady 메소드일 것이며, ExtJS를 학습할 때 가장 먼저 접하게 되는 메소드일 수도 있습니다. 이 메소드는 현재 DOM의 로딩을 완료합니다. 페이지의 모든 요소가 스크립트에서 참조될 수 있도록 나중에 자동으로 호출됩니다. 이 메소드에 명령문을 추가하여 페이지가 열린 후 어떤 일이 일어나는지 확인할 수 있습니다.

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

Ext.onReady(function() {
alert('hello world!');
})

위 코드는 페이지가 로드된 후 대화 상자를 표시하고 'hello world!'라는 단어를 인쇄합니다.
요소 가져오기
일반적으로 사용되는 또 다른 방법은 페이지의 요소를 가져오는 것입니다. ExtJS는 ID를 기반으로 페이지의 요소를 가져올 수 있는 get 메서드를 제공합니다.
var myDiv = Ext.get('myDiv ');
은 ID가 'myDiv'인 요소에서 페이지를 가져옵니다. Element.dom 메소드를 사용하면 기본 DOM 노드를 직접 조작할 수 있으며 Ext.get은 Element 객체를 반환합니다. 이 방법을 사용하여 여러 DOM 노드를 얻을 수 없거나, 일관성이 없지만 동일한 특성을 가진 일부 ID를 얻으려는 경우 예를 들어 모든
태그를 얻으려는 경우 선택기를 통해 얻을 수 있습니다. 페이지에서 다음을 사용할 수 있습니다.
var ps = Ext.select('p');
이러한 방식으로 얻고자 하는 요소에 대해 작업을 수행할 수 있습니다. select() 메서드는 Ext를 반환합니다. CompositeElement 객체이며, Each() 메소드를 사용하여 노드를 순회할 수 있습니다.

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

ps.each(function(el) {
el.highlight();
})

물론, 얻은 모든 요소에 대해 동일한 작업을 수행하려면 다음과 같이 CompositeElement 개체에 직접 적용할 수 있습니다.
ps.highlight()
또는:
Ext.select('p').highlight(); ;
물론, select 매개변수는 W3C Css3Dom 선택 변환기, 기본 XPath, HTML 속성 등을 포함할 수 있어 더 복잡할 수 있습니다. 자세한 내용은 DomQuery API 문서를 참조하세요.

이벤트 응답
요소를 얻으면 일부 요소에 대한 이벤트가 발생할 수 있습니다. 버튼 가져오기와 같은 일부 처리를 수행하기 위해 클릭 이벤트 응답을 추가합니다.

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

Ext.onReady(function() {
Ext.get ('myButton').on('click', function() {
alert('버튼을 클릭했습니다!' );
})
}); >물론, select() 메소드를 통해 얻은 요소에 이벤트 응답을 추가할 수 있습니다:

코드 복사

코드는 다음과 같습니다. 다음과 같습니다: Ext.select('p').on('click', function() { alert('문단을 클릭했습니다!');

}) ;

위젯
ExtJS는 또한 모든 사람이 사용할 수 있는 풍부한 UI 라이브러리를 제공합니다.

메시지 창

이전의 경고() 메서드를 솔루션으로 바꿉니다. ExtJS에서 제공:


코드 복사

코드는 다음과 같습니다. Ext.onReady(function () { Ext.get('myButton').on('click', function() {

alert(' 버튼을 클릭했습니다!');

}); ;