2011-12-08 1 views
1

'취소'를 클릭 한 후 아무 것도 나타나지 않는 창이 있습니다. 정말 내가 잘못지고있어 수있는 것을 혼동하고 있습니다 :extjs 버튼 처리기가 작동하지 않는 이유

this.cancel이 정의되어 있기 때문이다
Ext.define('Myapp.view.User.NewForm', { 
    extend: 'Ext.window.Window', 
    width: 610, 
    height: 380, 
    y: 50, 
    resizable: false, 
    closable: true, 
    draggable: false, 
    title: 'new user', 

    items: [{ 
     buttons: [{ 
       text: 'save', 
       iconCls: 'form-save' 
      },{ 
       text: 'cancel', 
       iconCls: 'form-cancel', 
       scope: this, 
       handler: this.cancel  
      }] 
    }], 
    cancel: function() { alert('cancel'); } 

}) 

답변

2

Lolo가 말한 것처럼 this.cancel은 Form 클래스를 정의 할 때 정의되지 않았습니다.

이 문제에 대한 표준 용액은 initComponent 내부 items 배열을 만드는 것입니다 : 사람이 기대하는 것처럼 initComponent은 당신의 폼의 인스턴스에 this 포인트를 호출

Ext.define('Myapp.view.User.NewForm', { 
    ... 

    initComponent: function() { 
     this.items = [{ 
      buttons: [{ 
       text: 'save', 
       iconCls: 'form-save' 
      },{ 
       text: 'cancel', 
       iconCls: 'form-cancel', 
       scope: this, 
       handler: this.cancel  
      }] 
     }]; 

     this.callParent(); 
    }, 

    cancel: function() { alert('cancel'); } 

}); 

. 당신의 코드에서 this은 취소 기능을 포함하지 않는 세계 window 객체를 가리 킵니다.

0

. 이 코드를 참조하십시오 :

var that = this; 
Ext.define('Myapp.view.User.NewForm', { 

    items: [{ 
     buttons: [{ 
       text: 'save', 
       iconCls: 'form-save' 
      },{ 
       text: 'cancel', 
       iconCls: 'form-cancel', 
       scope: this, // that === this 
       handler: this.cancel  
      }] 
    }], 
    cancel: function() { alert('cancel'); } 
}) 

이 값은 해당 변수와 동일한 개체를 가리키는 범위를 가리 킵니다. 상위 컨트롤에 대한 참조를 얻으려면 다른 방법을 찾아야합니다. 시도 할 수 있습니다 : handler: function(){ this.ownerCt.ownerCt.cancel.apply(this, arguments); }, scope: this 줄을 제거하십시오.

1

당신은 또한 당신의 창 버튼이 방법

... 
initComponent: function(){ 
this.buttons = [ 
      { text:'Close', 
       handler: function(){ 
        this.up('window').close(); //<--Notice "this" refers to the button 
       } 
      }, 
      { 
       text: 'Save', 
       action: 'save', 
       handler: this.save, 
       scope: this 
      } 
     ]; //eo buttons 
     this.callParent(arguments); 
    }, //eo initComponent 
    save: function(){ ... } 
... 
를 정의 할 수 있습니다