extjs의 사용자 정의 이벤트

extjs의 사용자 정의 이벤트는 주로 3단계로 나뉜다. 1.클래스에서 이벤트 이름을 정의합니다.

  Person = function(config) {
        Person.superclass.constructor.call(this, config);
        this.name = config.name || '';
        this.sex = config.sex || '';
        this.addEvents({
            "nameChange": true,
            "sexChange": true
        });
    };

 
2. 실례화된 객체와 해당 객체에 이벤트의 감청 함수를 정의합니다.

  var person = new Person({
            name: 'binoruv',
            sex: 'man'
        });

        person.on("nameChange", function() { alert("Name has been changed to " + this.name); });
        person.on("sexChange", function() { alert("Sex has been changed to " + this.sex); });

 3.이벤트 트리거
  

Ext.extend(Person, Ext.util.Observable, {
       //extend ， 
        setName: function(_name) {
            if (this.name != _name) {
                this.name = _name;
                this.fireEvent("nameChange", this);
            }
        },
        setSex: function(_sex) {
            if (this.sex != _sex) {
                this.sex = _sex;
                this.fireEvent("sexChange", this);
            }
        }
    });

        person.setName("binoruv");
        person.setSex("woman");

 
전체 코드는 다음과 같습니다.

<script type="text/javascript">
    Person = function(config) {
        /*
         addEvents Person Ext.util.Observable 
        api Observable ： （Abstract base class）， 
         。 "events" 
         。
        */
        Person.superclass.constructor.call(this, config);

        this.name = config.name || '';
        this.sex = config.sex || '';
        this.addEvents({
            "nameChange": true,
            "sexChange": true
        });
    };

    Ext.extend(Person, Ext.util.Observable, {
        setName : function(_name) {
            if (this.name != _name) {
                this.name = _name;
                this.fireEvent("nameChange", this);
            }
        },
        setSex : function(_sex) {
            if (this.sex != _sex) {
                this.sex = _sex;
                this.fireEvent("sexChange", this);
            }
        }
    });

    Ext.onReady(function() {
        var person = new Person({
            name: 'binoruv',
            sex: 'Man'
        });

        person.on("nameChange", function() { /*debugger;*/Ext.Msg.alert("Message","Name has been changed to " + this.name); });
        person.on("sexChange", function() { /*debugger;*/Ext.Msg.alert("Message", "Sex has been changed to " + this.sex); });

        person.setName("binoruv");
        person.setSex("Woman");
    });
</script>

 1. HTML 요소를 처리하는 표준 이벤트 HTML 요소의 표준 이벤트는mouseover,mousedown,click,blur,focus,change 등을 가리킨다.ExtJS에서 이러한 이벤트의 처리는 다음과 같습니다. 이벤트 처리 함수를 등록하여 사용합니다: Ext.get('my Element').('click', myHandler, myScope) myElement는 등록할 요소의 ID입니다. click은 이벤트의 이름입니다. (주의, HTML 요소의 성명 onXX와 달리 여기는 on이 필요하지 않습니다.) myHandler는 처리 함수의 함수 이름입니다. myScope는 선택할 수 있는 매개 변수로 처리 함수 귀속의 대상, 즉 처리 함수의 역할 영역을 지정합니다. 이 매개 변수를 제공하지 않으면 기본 윈도우입니다.이벤트 처리 함수를 취소합니다: Ext.get("my Element").un('click', myHandler, myScope) 매개 변수의 의미는 같다.ExtJS는 여러 브라우저를 지원하는 다양한 브라우저에 따라 처리됩니다.이벤트 처리 함수의 매개 변수는 ExtJS의 문서만 참조할 수 있으며, 필요할 때 원본 코드도 참고해야 한다.2. 사용자 정의 이벤트를 처리하는 데 ExtJS에서 사용자 정의 이벤트를 사용하려면 Ext.util을 사용해야 합니다.Observable 상속, 예시 코드는 다음과 같습니다. Employee = function (name) {this.name = name;this.addEvents ({"fired":true, "quit":true});}Ext.extend(Employee, Ext.util.Observable, { ... }); 이 코드에서 Employee 클래스를 정의하고fired와quit 두 이벤트를 정의합니다.어떻게 이 두 사건을 촉발합니까, 기본 Ext.util.Observable는 사용자 정의 이벤트를 트리거하는 방법을 제공합니다. FireEventName,arg1,arg2,...argn), eventName은 트리거할 시간의 이름(대소문자 구분 없음), 뒤에 있는 매개 변수arg1,arg2 등은 이벤트 처리 함수에 전달할 매개 변수입니다.위의 Employee 클래스를 예로 들어quit 이벤트를 터치합니다:this.fireEvent('quit', this); 이 코드는 quit 이벤트를 터치하고 Empolyee 클래스의 실례를 quit 이벤트 처리 함수에 전달합니다. quit 이벤트 구독은 다음과 같은 코드를 사용할 수 있습니다. function myHandler1 (empolyee) {...}function myHandler2(empolyee){ ... } var emp = new Empolyee('tom'); emp.on('quit', myHandler1); emp.on('quit', myHandler2); 위의 코드에서quit 이벤트에 두 개의 처리 함수 (myHandler1과 myHandler) 를 등록하고quit 이벤트가 자극되면 myHandler1과 myHandler2 두 개의 함수를 순서대로 호출합니다.주의해야 할 것은 HTML 요소의 표준 이벤트든 사용자 정의 이벤트든 어느 시간에 여러 개의 처리 함수를 등록했다. 예를 들어 앞의 예에서 myHandler1이false로 되돌아오면 myHandler1 이후에 등록된 처리 함수의 실행을 취소한다. 즉, 이 이벤트가 취소되어 이 이벤트의 처리 함수를 계속 실행하지 못하게 된다. 이 반환값false는 이벤트가 자극하는 결과로 나타난다.empolyee, 즉:var result =this로 되돌아갑니다.fireEvent('quit', this); if(result===false) {alert('event canceled');//이것은 이벤트가 어떤 처리 함수에 의해 취소됨을 나타냅니다}else {alert('event complete');//이것은 이벤트가 실행되었다는 것을 나타냅니다} Ext의 사용자 정의 이벤트 메커니즘을 통해 한 쌍의 관찰자 모드를 실현할 수 있고 일대일 귀속 모드를 실현할 수 있다는 점에서 ExtJS의 개발에서 매우 중요합니다.