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

Posted 2023-02-25

【中文标题】添加处理程序到文档事件将范围更改为 Sencha Touch 中的文档

【英文标题】：Adding Handler to Document event change the scope to document in 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);

    

);

【参考方案1】：

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

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

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

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