添加處理器到文檔事件的範圍更改爲文檔中的煎茶觸摸

Question

我的問題是添加偵聽器時記錄點擊事件，範圍設置爲記錄對象的處理程序中，所以我不能夠訪問方法內部容器定義目的。

mycode的：

Ext.define('MyApp.view.ControlPanel.ControlPanel', { 
    extend: 'Ext.Container', 
    alias: "widget.controlpanel", 
    requires: [ 
        'Ext.SegmentedButton' 
    ], 
    config: { 
     layout: { 
      pack:'stretch' 
     }, 
     docked:'bottom' 
    }, 
    documentClickHandler:function(){ 
     console.log('Document Clicked'); 

     //Here is throw exception, Because here this is Document object not this Container object 
     var settingListContainer = this.down("#setting-list-container"); 
     if (settingListContainer) { 
         this.remove(settingListContainer, true); 
    }, 

    onSegmentToggled: function (container, button, pressed) 
    {  
      console.log("Toggle Event"); 
      var index = container.getItems().indexOf(button); 
      if (index == 0) { 
       if (pressed) { 
        container.setPressedButtons(); 
        var settingListContainer = this.down("#setting-list-container"); 
        if (settingListContainer) { 
         this.remove(settingListContainer, true); 
         // close nav by touching the partial off-screen content 

        } 
       } 
      } 
      else { 
       var settingListContainer = this.down("#setting-list-container"); 
       if (settingListContainer) { 
        this.remove(settingListContainer, true); 
       } 
       else if (pressed) { 
        var existingList = Ext.ComponentQuery.query('settingList')[0]; 
        if (existingList) { 
         this.add(existingList); 
         //This is where and how I added listener to Document click event 
         document.addEventListener('click',this.documentClickHandler, false); 
        } 
        else { 
         this.add({ xtype: "settingList", height: '349px', sortHandler: this.config.sortHandler, segmentControl: container }); 

         //This is where and how I added listener to Document click event 
         document.addEventListener('click',this.documentClickHandler, false); 
        } 
       } 
      } 

    }, 
    listeners: [ 
     { 
      delegate: "#control-segment-button", 
      event: 'toggle', 
      fn: 'onSegmentToggled' 

     } 
      ], 
    initialize: function() { 
     //Ext.require(""); 
     var segmentedButton = Ext.create('Ext.SegmentedButton', { 
      layout: { 
       type: 'hbox', 
       pack: 'center', 
       align: 'stretchmax' 
      }, 
      docked: 'bottom', 
      id:'control-segment-button', 
      allowMultiple: false, 
      allowDepress: true, 
      config: { flex: 1 }, 
      items: [ 
       { 
        iconCls: 'time', 
        width: '50%', 
        cls:'palin-segment', 
        style:"border-radius:0px" 
       }, 
       { 
        iconCls: 'settings', 
        width: '50%', 
        cls: 'palin-segment', 
        style: "border-radius:0px" 
       } 
      ] 
     }); 
     this.add(segmentedButton); 

    } 

}); 

Answer 1

嗯，我想你應該煎茶組件的工作原理，並創建你的擁有。在sencha touch上使用MVC很容易。 （只是一個尖）

現在關於你的問題，你可以使用bind更改範圍更改範圍。

所以，你的代碼將是這樣的：

document.addEventListener('click',this.documentClickHandler.bind(this), false);