Ext 시작 2

응답 이벤트

이 범례에 이르기까지, 우리가 쓴 코드는 모두onReady에 놓여 있다. 즉, 페이지가 불러오면 바로 실행되고, 기능이 비교적 단일하다. 그러면 어떤 동작이나 이벤트에 어떻게 응답해서 당신이 하고 싶은 일을 실행하는지 알 수 있다. 방법은function을 나누고, 이벤트handler 이벤트 프로세서를 정의해서 응답하는 것이다.우리는 이 간단한 범례로 시작하고,

Ext.onReady(function() {
Ext.get('myButton').on('click', function(){
alert(" ");
    });
});

코드는 여전히 페이지를 불러와서 실행되지만, 중요한 차이점은 alert () 를 포함하는 function은 정의되어 있지만, 즉시 실행되지 않으며, 단추를 누르는 이벤트에 분배된다는 것이다.간단한 문자로 설명하자면, ID가'myDottom'원소라는 인용을 가져와 이 원소가 눌린 상황을 감청하고, 눌린 원소의 상황을 준비하기 위해 function을 분배합니다.
일반적으로 Element.select도 같은 일을 할 수 있다. 즉, 하나의 요소를 얻는 데 작용한다.다음 예제에서는 페이지의 단락을 클릭하면 팝업 창이 표시됩니다.

Ext.onReady(function() {
Ext.select('p').on('click', function() {
alert(" ;");
 });
});

이 두 가지 예에서 이벤트 처리의function은 모두 간단한 몇 마디로 함수의 이름이 없다. 이런 유형의 함수는'익명 함수(anonymous function)', 즉 이름이 없는 함수라고 한다.너도 이름이 있는 이벤트handler를 할당할 수 있다. 이것은 코드의 재사용이나 여러 이벤트에 매우 유용하다.다음 예는 이전 예와 같습니다.

Ext.onReady(function() {
var paragraphClicked = function() {
alert("You clicked a paragraph");
 }
Ext.select('p').on('click', paragraphClicked);
});

지금까지 우리는 어떤 동작을 어떻게 집행하는지 이미 알고 있다.그러나 사건이 촉발되었을 때, 우리는 이 이벤트handler가 실행될 때 어떤 특정한 요소에 작용하는지 어떻게 알 수 있습니까?이 점을 명확히 하는 것은 매우 간단하다, Element.on 방법은 evenhandler의function에 전송됩니다. (첫 번째 파라미터를 먼저 논의하지만, evenhandler에 대한 더 자세한 내용을 알기 위해 API 문서를 훑어봐야 합니다.)우리의 이전 예에서 function은 이 매개 변수들을 무시했다. 여기에 약간의 변화가 있을 수 있다. 우리는 기능적으로 더욱 깊은 제어를 제공했다.먼저 설명해야 할 것은 이것은 사실상 Ext의 이벤트 대상 (event object), 크로스 브라우저와 더 많은 제어를 가진 이벤트 대상이다.예를 들어, 다음 문장을 사용하여 이 이벤트가 응답하는 DOM 노드를 얻을 수 있습니다.

Ext.onReady(function() {
var paragraphClicked = function(e) {
Ext.get(e.target).highlight();
 }
Ext.select('p').on('click', paragraphClicked);
});

주의해서 알 수 있는 e.target은 DOM 노드이기 때문에 우리는 먼저 그것을 EXT의 Elemnet 요소로 전환한 다음에 완성하고자 하는 이벤트를 실행합니다. 이 예에서 우리는 단락이 하이라이트로 표시되는 것을 보았습니다.

Widgets 사용

(Widget “ ”， UI )

우리가 이미 토론한 핵심 자바스크립트 라이브러리를 제외하고 현재의 Ext는 일련의 최첨단 자바스크립트 UI 구성 요소 라이브러리를 포함한다.텍스트는 자주 사용하는widget을 예로 삼아 간단한 소개를 합니다.

MessageBox

약간 답답한 "Hello Wolrd"메시지 창에 비해 약간의 변화를 했습니다. 앞에서 쓴 코드는 어떤 단락을 누르면 밝아지고, 지금은 단락을 누르면 메시지 창에 단락 내용을 표시합니다.위의 paragraphClicked 함수에서 이 행 코드를

Ext.get(e.target).highlight();

다음으로 대체:

var paragraph = Ext.get(e.target);
paragraph.highlight();
Ext.MessageBox.show({
title: 'Paragraph Clicked',
 msg: paragraph.dom.innerHTML,
 width:400,
 buttons: Ext.MessageBox.OK,
 animEl: paragraph
});

여기에 새로운 개념들이 좀 토론해야 한다.첫 번째 줄에서 요소에 대한 참조를 저장하기 위해 로컬 변수(Local Variable)를 만들었습니다. 즉, 클릭한 DOM 노드 (이 예에서 DOM 노드는 단락 파라그라를 가리키며, 이 이벤트가 탭과 관련이 있다고 정의했기 때문입니다.)왜 이러지?음..위의 코드를 살펴보면 같은 요소를 인용하여 강조표시해야 합니다. MessageBox에서도 같은 요소를 인용하여 매개 변수로 사용합니다.일반적으로 같은 값(Value)이나 대상을 여러 번 반복적으로 사용하는 것은 좋지 않은 방식이기 때문에 좋은 OO 사고를 가진 개발자로서 이를 국부 변수에 분배하고 이 변수를 반복적으로 사용해야 한다!
이제 우리가 다음에 새로운 개념을 논술하는 데모를 위해 MessageBox의 호출을 관찰해 보십시오.언뜻 보기에는 일련의 매개 변수가 방법에 전해지는 것 같지만, 자세히 보면 이것은 매우 특별한 문법이다.실제로 MessageBox로 전송됩니다.show의 매개 변수는 하나입니다. 하나의 Objectliteral로 속성과 속성 값을 포함합니다.Javascript에서 Object Literal은 동적입니다. 언제든지 {와}로 전형적인 대상(object)을 만들 수 있습니다.그 중의 문자는 일련의name/value로 구성된 속성으로 속성의 형식은 [propertyname]: [propertyvalue]입니다.전체 Ext에서 당신은 이런 문법을 자주 만날 수 있기 때문에 이 지식을 즉시 소화하고 받아들여야 합니다!Object Literal을 사용하는 이유는 무엇일까요?주요 원인은 "신축성(flexibility)"을 고려하여 언제든지 속성을 추가하고 삭제할 수 있으며, 순서에 상관없이 삽입할 수 있기 때문이다. 방법은 변경할 필요가 없다. 이것도 여러 파라미터의 경우 최종 개발자에게 적지 않은 편의를 가져다 준다 (이 예에서 MessageBox.show ()).예를 들어, 우리는 이곳의foo를 말한다.action 방법은 네 개의 매개 변수가 있는데, 오직 하나는 당신이 반드시 전송해야 하는 것이다.이 예에서, 네가 상상하는 코드는 아마도 이러한foo일 것이다.action(null, null, null, 'hello').,만약 그 방법이 Object Literal로 쓰인다면, 그렇지,foo.action ({param4:'hello'}), 이것은 더욱 사용하기 쉽고 읽기 쉽습니다.