블로그 이미지
Xeon의 세상 Xeoness

카테고리

Xeon World (23)
Diary (1)
Tuning (0)
Project (0)
Scrap (0)
Media (0)
L ♡ L (0)
일상생활 (4)
Web Programming (14)
IT 강국? 노가다 강국 (4)
Linux (0)
아리아리 동동~ (0)
Total
Today
Yesterday

'ext JS'에 해당되는 글 7건

  1. 2010.01.14 Ext JS - 3. Burst Events in action
  2. 2010.01.14 Ext JS - 2. Dom based Events

부모 노드의 이벤트가 자식 노드에게 상속되길 원하지 않는 경우에는 stopEvent()를 호출하여 정지시켜준다.

아래는 마우스 우클릭 하였을 때, 부모 노드('myDiv')는 브라우저의 메뉴를 보여주지만, 자식 노드('meHref')는 커스텀 메뉴 컨텍스트를 보여주는 예제이다.

파이어 폭스에서 확인을 해보자.(당연한 얘기겠지만, FireBug 설치는 필수이다.)
IE에서 실행하려 하면 script error를 뿜어낼 것인다.(console error)

-------------------------------------------------------------------------------------------------
 // 마우스 우클릭을 하였을 때 실행할 이벤트
Ext.get('myDiv').on('contextmenu', function(eventObj, elRef) { 
    // 콘솔에 글을 뿌려준다.
    console.log('myDiv contextmenu Handler, source elment ID: ' + elRef.id);
    });

// 마우스 우클릭을 하였을 때 실행할 이벤트
Ext.get('myHref').on('contextmenu', function(eventObj, elRef) {
    eventObj.stopEvent();   // 다른 이벤트는 실행하지 않는다.(자신의 이벤트만 실행을 위하여)
    console.log('myHref contextmenu Handler, source elment ID: ' + elRef.id);   // 콘솔에 글을 뿌려준다.

    if (!this.ctxMenu) {                    // ctxMenu 객체가 없다면 새로 생성하는 코드
        this.ctxMenu = new Ext.menu.Menu({  // ctxMenu는 Ext.menu.Menu의 객체
        items : [{                          // item의 내용 (항상 JSON Store 형태로)
        text : "This is"                    // 첫 번째 item text에 'This is'
        },{
        text : "our custom"                 // 두 번째 item text에 'our custom'
        },{
        text : "context menu"               // 세 번째 item text에 'context menu' 를 대입
        }]
        });
    }
   
    this.ctxMenu.show(elRef);               // ctxMenu를 보여준다.
    });
-------------------------------------------------------------------------------------------------

Posted by Xeoness
, |

var el = Ext.get('myDiv');
el.on('click', doSomething);
Ext.get을 이용한 기본적인 방식.

Here, we use the native method, Ext.get, which allows Ext to wrap its element management class, Ext.Element, around a referenced element. Embedded with each instance of Ext.Element is the usage of the Ext event management engine, Ext.util.Observable. It is important to remember that all event management with Ext stems from Ext.util.Observable, which serves as a base for all DOM elements and components that need to manage events.
Next, we attach a listener by calling the el.on and pass the native event to be handled and a method to perform an action on the event. Ext takes event listener registration a step further by allowing you to pass a reference to the scope from which the event handler is to be called and any parameters:

var el = Ext.get('myDiv');
el.on('click', doSomething, scopeRef, [opt1, opt2]);
on 함수에 파라미터 추가

It’s important to note that the default scope is always the object from which the handler is being defined. If scope were not explicitly passed, the method doSomething would be called within the scope of the object el, which is an instantiation of Ext.Element.
Posted by Xeoness
, |

최근에 달린 댓글

최근에 받은 트랙백

글 보관함