如何在 Sencha Touch 的按钮处理程序中使用 this.up() 函数

Posted

技术标签:

【中文标题】如何在 Sencha Touch 的按钮处理程序中使用 this.up() 函数【英文标题】:How to use this.up() function in button handler in Sencha Touch 【发布时间】:2014-06-02 00:35:38 【问题描述】:

我已经研究过这个问题,但这并不能解决我的问题 How to use up() in Ext.Button handler

我正在尝试实现一个简单的按钮处理程序,并且想要处理面板工具栏的按钮。我在面板中定义了一个 onNewFeed3 函数,不确定在单击按钮的点击事件时如何调用它。我不想使用单独的控制器类,但希望它全部在 View 类中。上面的链接似乎回答了这个问题,我仍然收到我在下面代码中提到的两个错误。

第一个注释之后的第一个代码的原因是为了确定“this”的 XType,我不确定最好的方法是什么,因为我得到了一个 TypeError

谢谢

Ext.define('Volt.view.FeedView', 
    extend: 'Ext.Panel',

    requires: [
        'Ext.TitleBar',
        'Ext.Button',
        'Ext.Toolbar'
        //'Ext.Panel'
    ],

    xtype: 'feedViewCard',



    config: 
        iconCls: 'action',
        title: 'FeedView',

        layout: 
            type: 'vbox'
        ,

        items: [
            
                xtype: 'toolbar',
                title: 'Home',
                docked: 'top',
                items: [
                    
                        xtype: 'spacer'

                    ,
                    
                        xtype: 'button',
                        text: 'New2 Feed',
                        ui: 'action',
                        id: 'new_note_button',

/*  I HAVE TRIED THIS AND DOES NOT WORK - GIVES TypeError : undefined is not a function */
                        handler: function()
                            console.log('button tapped inline handler, xtype =');
                            console.log(this.getXTypes());

                        ,

/*  and this gives the same error as well : TypeError : undefined is not a function*/
                        handler: this.up('feedViewCard').onNewFeed3,

                        scope: this
                    

                ]

            
        ]
    ,

    onNewFeed3: function()
        console.log('New Feed 3 button clicked');
    

);

【问题讨论】:

【参考方案1】:

您的处理程序不在按钮范围内运行,因此this 的错误指向全局范围(窗口)。按钮处理程序接收单击的按钮作为第一个参数,因此处理程序应读取:

handler:function(btn) 
    btn.up('feedViewCard').onNewFeed3();

【讨论】:

感谢此代码与 (btn) 并使用 btn.up() 工作,但不是来自上面“sha”的代码,使用它。我不确定 handler:function() 中的“this”指向哪里——它肯定应该指向按钮吗?如何打印以控制台 XType 或一些识别属性,如“this”的标题?谢谢【参考方案2】:

将其更改为类似的内容(这不起作用,因为处理程序已经在视图范围内执行,并且未指向按钮):

handler: function() 
    this.up('feedViewCard').onNewFeed3();

您始终可以使用

调试函数的范围
console.log(this)

如果默认情况下处理程序在视图本身的范围内执行,则根本不需要任何查找函数。将处理程序更改为:

handler: function() 
    this.onNewFeed3();

【讨论】:

我检查了这个。请参阅@saki 对答案的评论

以上是关于如何在 Sencha Touch 的按钮处理程序中使用 this.up() 函数的主要内容,如果未能解决你的问题,请参考以下文章

如何在 Touch Sencha 中对齐左侧的单选按钮?

SENCHA:如何通过单击 SENCHA touch 中的添加/删除按钮动态添加/删除文本字段

Sencha Touch:如何在底部停靠的工具栏中居中对齐两个按钮?

sencha touch 在按钮的选项卡上隐藏和显示组件

Sencha Touch:功能期间更新视图

如何使用视图通过 MVC 在 Sencha Touch 2.0 中放置一个按钮