javascript - Adding Handler to Document event change the scope to document in Sencha Touch -

my problem when adding listener document click event, inside handler scope set document object, not able access method defined inside container object.

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 throw exception, because here document object not 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 touching 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 , how added listener document click event                         document.addeventlistener('click',this.documentclickhandler, false);                     }                     else {                         this.add({ xtype: "settinglist", height: '349px', sorthandler: this.config.sorthandler, segmentcontrol: container });                          //this , how added listener 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);      }  }); 

well, think should work sencha components , create owns. work mvc on sencha touch pretty easy. (just tip)

now question, can change scope using bind change scope.

so code this:

document.addeventlistener('click',this.documentclickhandler.bind(this), false);