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组件并创建自己的所有者。在sencha touch上使用MVC非常容易。（只是一个提示）

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

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

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

将Handler添加到Document事件会将范围更改为Sencha Touch中的文档

1 个答案: