添加处理程序到文档事件将范围更改为 Sencha Touch 中的文档答案

【问题标题】：Adding Handler to Document event change the scope to document in Sencha Touch添加处理程序到文档事件将范围更改为 Sencha Touch 中的文档
【发布时间】：2014-03-06 07:13:52
【问题描述】：

我的问题是当添加侦听器到文档点击事件时，在处理程序内，范围设置为文档对象，所以我无法访问容器对象内定义的方法。

我的代码：

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);

    }

});

【问题讨论】：

标签： javascript extjs sencha-touch sencha-touch-2 dom-events

【解决方案1】：

好吧，我认为您应该使用 sencha 组件并创建自己的组件。在 sencha touch 上使用 MVC 非常容易。（只是一个提示）

现在关于您的问题，您可以使用bind 更改范围来更改范围。

所以你的代码会是这样的：

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

【讨论】：