요소의 이벤트 핸들러에서 작동하지 않는 기능

톰 O.

예상대로 작동하는 다음 코드가 있습니다.

var container = Ext.create('Ext.Container', {
                    html: 'Click Me!',
                    listeners: {
                        click: {
                            element: 'el',
                            fn: function() {
                                Ext.Msg.alert('Test', 'It was clicked!');
                             }
                         }
                     }
                 });

Ext.create('Ext.panel.Panel', {
    itemId: 'mainContainer',
    renderTo: Ext.getBody(),
    border: false,
    layout: {
        type: 'vbox',
        align: 'stretch'
    },
    items: [container]
});

이 예에서는 말도 안되는 메시지를 경고하고 있지만 실제로 'up ()'메서드를 사용하여 부모 컨테이너의 itemId를 가져오고 싶지만 예상대로 작동하지 않습니다. 예를 들어 클릭 핸들러를 다음과 같이 변경하면 :

click: {
    element: 'el',
    fn: function() {
        console.log(this.up('panel'));
    }
}

그런 다음 'null'이 기록됩니다. 어떻게 여기서 up () 함수를 사용할 수 없으며이 코드를 사용할 수 있도록이 코드를 변경할 수있는 방법이 있습니까?

스튜어트

Surya의 대답을 확장하기 this위해 이벤트 핸들러에는 Ext.Container 인스턴스가 아니라 이벤트가 발생하는 Ext.dom.Element 인스턴스가 있습니다.

대안은 on 메서드를 사용하여 리스너를 추가하여 컨테이너 인스턴스에 핸들러의 범위를 강제 할 수 있도록하는 것입니다.

container.on({
        click: {
            element: 'el',
            fn: function() {
                console.log(this.up('panel'));
            },
            scope: container
        }

    });

실제 동작을 보여주는이 Fiddle을 살펴보십시오.

https://fiddle.sencha.com/#fiddle/1cka

이 기사는 인터넷에서 수집됩니다. 재 인쇄 할 때 출처를 알려주십시오.

침해가 발생한 경우 연락 주시기 바랍니다[email protected] 삭제

에서 수정
0

몇 마디 만하겠습니다

0리뷰
로그인참여 후 검토

관련 기사

분류에서Dev

React에서 후크가있는 기능적 구성 요소의 이벤트 핸들러

분류에서Dev

이벤트 핸들러에서 기능을 중지하는 방법

분류에서Dev

인라인 구문을 사용하지 않고 기능 구성 요소에서 이벤트 핸들러로 매개 변수 전달

분류에서Dev

파일 쓰기는 작동하지만 HTTP 서버 요청 핸들러에 쓰기는 작동하지 않는 이유는 무엇입니까?

분류에서Dev

모의 useHistory가 비동기 이벤트 핸들러에서 호출되지 않습니다.

분류에서Dev

흐림 이벤트에서 작동하지 않는 Javascript 기능

분류에서Dev

이벤트 핸들러는 이벤트 소스에 작용

분류에서Dev

"this"는 클릭 이벤트 핸들러에서 작동하지 않습니다.

분류에서Dev

동적 작동하지 않는 내용 요소에 동적 콘텐츠 쓰기 JQuery와 이벤트 핸들은 iframe을 추가

분류에서Dev

캡처 단계에서 요소의 이벤트 핸들러를 실행하는 다양한 방법

분류에서Dev

요소 만들기 기능이 작동하지 않습니다.

분류에서Dev

.html ()로 생성 된 요소에서 .on () 핸들러가 작동하지 않는 이유는 무엇입니까?

분류에서Dev

React 컴포넌트 이벤트 핸들러에서 정의되지 않은 "this"

분류에서Dev

핸들러가 Android의 기능에서 제대로 작동하지 않습니다.

분류에서Dev

Node.js의 이벤트 핸들러 내부에서 비동기 대기

분류에서Dev

for 루프 내부의 이벤트 핸들러가 모든 반복에서 작동하지 않는 이유는 무엇입니까?

분류에서Dev

여러 기능에 대해 함께 작동하지 않는 onclick 이벤트

분류에서Dev

svg 요소에 대해 작동하지 않는 onclick 이벤트

분류에서Dev

이벤트 핸들러에서 사용될 때 정의되지 않은 함수

분류에서Dev

여러 이벤트, 여러 핸들러 및 새 요소에 적용하는 jQuery .on

분류에서Dev

XML에서 이벤트 핸들러 주소 지정 :`.myHandler` 또는`myHandler`?

분류에서Dev

Yii 각 요청에서 이벤트 핸들러를 호출하는 방법

분류에서Dev

Javascript 이벤트 핸들러에서 DOM에 요소 추가를 지연하는 방법

분류에서Dev

이벤트 버블 링을 방지하는 컨테이너의 요소에 대해 Reactjs 이벤트 핸들러가 트리거되지 않음

분류에서Dev

angularJs 응용 프로그램에서 작동하지 않는 DOM 요소 클릭 이벤트 기능을 동적으로 추가

분류에서Dev

handleSubmit 기능이 React의 기능 구성 요소에서 작동하지 않습니다.

분류에서Dev

vuejs에서 부모와 자식 요소 사이에 클릭 이벤트 핸들러를 분리하는 방법

분류에서Dev

Android를 처음 사용하는 경우 프래그먼트 내부의 요소에 대한 이벤트 핸들러를 어떻게 초기화합니까?

분류에서Dev

이벤트 핸들러에서 InvokeRequired의 필요성 방지

Related 관련 기사

  1. 1

    React에서 후크가있는 기능적 구성 요소의 이벤트 핸들러

  2. 2

    이벤트 핸들러에서 기능을 중지하는 방법

  3. 3

    인라인 구문을 사용하지 않고 기능 구성 요소에서 이벤트 핸들러로 매개 변수 전달

  4. 4

    파일 쓰기는 작동하지만 HTTP 서버 요청 핸들러에 쓰기는 작동하지 않는 이유는 무엇입니까?

  5. 5

    모의 useHistory가 비동기 이벤트 핸들러에서 호출되지 않습니다.

  6. 6

    흐림 이벤트에서 작동하지 않는 Javascript 기능

  7. 7

    이벤트 핸들러는 이벤트 소스에 작용

  8. 8

    "this"는 클릭 이벤트 핸들러에서 작동하지 않습니다.

  9. 9

    동적 작동하지 않는 내용 요소에 동적 콘텐츠 쓰기 JQuery와 이벤트 핸들은 iframe을 추가

  10. 10

    캡처 단계에서 요소의 이벤트 핸들러를 실행하는 다양한 방법

  11. 11

    요소 만들기 기능이 작동하지 않습니다.

  12. 12

    .html ()로 생성 된 요소에서 .on () 핸들러가 작동하지 않는 이유는 무엇입니까?

  13. 13

    React 컴포넌트 이벤트 핸들러에서 정의되지 않은 "this"

  14. 14

    핸들러가 Android의 기능에서 제대로 작동하지 않습니다.

  15. 15

    Node.js의 이벤트 핸들러 내부에서 비동기 대기

  16. 16

    for 루프 내부의 이벤트 핸들러가 모든 반복에서 작동하지 않는 이유는 무엇입니까?

  17. 17

    여러 기능에 대해 함께 작동하지 않는 onclick 이벤트

  18. 18

    svg 요소에 대해 작동하지 않는 onclick 이벤트

  19. 19

    이벤트 핸들러에서 사용될 때 정의되지 않은 함수

  20. 20

    여러 이벤트, 여러 핸들러 및 새 요소에 적용하는 jQuery .on

  21. 21

    XML에서 이벤트 핸들러 주소 지정 :`.myHandler` 또는`myHandler`?

  22. 22

    Yii 각 요청에서 이벤트 핸들러를 호출하는 방법

  23. 23

    Javascript 이벤트 핸들러에서 DOM에 요소 추가를 지연하는 방법

  24. 24

    이벤트 버블 링을 방지하는 컨테이너의 요소에 대해 Reactjs 이벤트 핸들러가 트리거되지 않음

  25. 25

    angularJs 응용 프로그램에서 작동하지 않는 DOM 요소 클릭 이벤트 기능을 동적으로 추가

  26. 26

    handleSubmit 기능이 React의 기능 구성 요소에서 작동하지 않습니다.

  27. 27

    vuejs에서 부모와 자식 요소 사이에 클릭 이벤트 핸들러를 분리하는 방법

  28. 28

    Android를 처음 사용하는 경우 프래그먼트 내부의 요소에 대한 이벤트 핸들러를 어떻게 초기화합니까?

  29. 29

    이벤트 핸들러에서 InvokeRequired의 필요성 방지

뜨겁다태그

보관