Question

我在Sencha touch中有4个按钮。每个按钮的文字都是投票。我希望当用户点击任何按钮时，相应按钮的文本应更改为“Voted”。我想以最好的方式在Controller中编写所有这些代码。

代码：

buttons.js

items:
[
 {
     xtype:'button',
     text:"Item1",
     cls:'items'

  },

     xtype:'button',
     text:"Item2",
     cls:'items'

  },

     xtype:'button',
     text:"Item3",
     cls:'items'

  },

     xtype:'button',
     text:"Item4",
     cls:'items'

  },

]

Controller.js

control:
 {
   button:
     {
       tap:'OnButtonTap'
     }
 }
   OnButtonTap()
    {
      //how to get value of clicked button here
    }

Answer 1

您应该为所有按钮分配唯一ID，然后编写以下代码以更改按钮文本。

在Sencha Touch中，您必须将该函数编写为onButtonTap：function（）{}

代码：

OnButtonTap:function(button)
{
    Ext.getCmp(button.id).setText('Voted');
}

在上面的功能中，“按钮”是您单击的对象，您可以访问所有的sencha触摸按钮方法。

Answer 2

查看button tap event的文档。回调函数中的第一个参数是被点击的按钮。它可以用于立即操作。在fiddle.sencha.com上查看working example

使用控制器和视图设置app.js。

Ext.application({
    name : 'Fiddle',

    controllers: [
        'ButtonsController'
    ],

    views: [
        'ButtonsView'
    ],

    launch : function() {
        Ext.Viewport.add(Ext.create('Fiddle.view.ButtonsView'));
    }
});

控制器引用按钮并在已点击的按钮上设置新文本。

Ext.define('Fiddle.controller.ButtonsController', {
    extend: 'Ext.app.Controller',

    config: {
        refs: {
            button: 'buttonsview button'
        },
        control: {
            button: {
                tap: 'onButtonTap'
            }
        }
    },

    onButtonTap: function(button) {
        button.setText('Voted');
    }
});

视图包含按钮。默认配置也很方便。

Ext.define('Fiddle.view.ButtonsView', {
    extend: 'Ext.Container',
    xtype: 'buttonsview',

    config: {
        layout: 'vbox',
        defaults: {
            xtype: 'button',
            cls: 'items'
        },
        items: [
            { text: 'Item1' },
            { text: 'Item2' },
            { text: 'Item3' },
            { text: 'Item4' }
        ]
    }
});

如何在sencha touch中为按钮设置tap tap？

2 个答案: