如何在 sencha touch 中使用函数在控制器文件中传递参数

Question

我在本地服务器上创建了一个sencha touch 应用程序。在该应用程序中，有一个文本字段和三个按钮。
以下是我的app.js文件

Ext.application({
name: 'MyApp',

requires: [
    'Ext.MessageBox'
],

views: [
    'Main'
],

controllers: [
    'CalcController'
],

icon: {
    '57': 'resources/icons/Icon.png',
    '72': 'resources/icons/Icon~ipad.png',
    '114': 'resources/icons/Icon@2x.png',
    '144': 'resources/icons/Icon~ipad@2x.png'
},

isIconPrecomposed: true,

startupImage: {
    '320x460': 'resources/startup/320x460.jpg',
    '640x920': 'resources/startup/640x920.png',
    '768x1004': 'resources/startup/768x1004.png',
    '748x1024': 'resources/startup/748x1024.png',
    '1536x2008': 'resources/startup/1536x2008.png',
    '1496x2048': 'resources/startup/1496x2048.png'
},

launch: function() {
    // Destroy the #appLoadingIndicator element
    Ext.fly('appLoadingIndicator').destroy();

    // Initialize the main view
    Ext.Viewport.add(Ext.create('MyApp.view.Main'));
},

onUpdated: function() {
    Ext.Msg.confirm(
        "Application Update",
        "This application has just successfully been updated to the latest version. Reload now?",
        function(buttonId) {
            if (buttonId === 'yes') {
                window.location.reload();
            }
        }
    );
}

});

以下是我的Main.js文件

Ext.define('MyApp.view.Main', {
extend: 'Ext.form.Panel',
xtype: 'main',
requires: [
    'Ext.TitleBar',
    'Ext.Video'
],
config: {
    items: [
        {
            xtype:'textfield',
            name:'txtDisplay',
            id:'idDisplay',
            readOnly:true,
        },
        {
            xtype:'button',
            name:'btnClear',
            id:'idClear',
            width:'25%',
            text:'C',
            style:'float:left;',
        },
        {
            xtype:'button',
            name:'btnSeven',
            id:'idSeven',
            width:'25%',
            text:'7',
            style:'float:left; clear:both;',
            //action:
            handler: function()
            {
                var x = Ext.getCmp('idSeven')._text;
                Ext.getCmp('idDisplay').setValue(x);
            }
        },
        {
            xtype:'button',
            name:'btnEight',
            id:'idEight',
            width:'25%',
            text:'8',
            style:'float:left;',
            action:'displayNum',
        }
    ]
}

});

以下是我的CalcController.js文件

Ext.define('MyApp.controller.CalcController', {
extend: 'Ext.app.Controller',
config: {
    control: {
        'button[action=displayNum]' : {
            tap: 'displayNum'
        },
    }
},
displayNum: function()
{
    console.log("This click event works");
}

});

现在我的问题如下：
当我按下名为 btnSeven 的按钮时，它在文本字段中显示数字 7，这意味着处理函数有效。现在我想在 CalcController.js 文件中单击事件代码，而不是在 Main.js 文件中编写处理函数，为此我创建了第二个名为 btnEight 的按钮并给出 action:'displayNum' 所以当该按钮单击事件转到 CalcController.js 文件.

当我按下名为 btnEight 的按钮时，我想借助在 CalcController.js 文件中编写代码而不是在 Main.js 文件中编写处理函数来在文本字段中显示数字 8。那么该怎么做呢？

Answer 1

不要为组件定义 Id，而是定义 Item Id

在 Controller 中，您必须在配置中定义引用。

config: {
refs: {
    'idDisplay': 'main #idDisplay'  // idDisplay is itemId not Id  here
},
control: {
'button[action=displayNum]' : {
    tap: 'displayNum'
  }
}
},

并在 displayNum 函数中编写如下代码。

displayNum: function(btn)
{
   var display =  this.getIdDisplay();
   display.setValue(btn.getText());
}

Answer 2

我用下面的方法解决了上面的问题：

现在我的 Main.js 文件如下：

Ext.define('MyApp.view.Main', {
extend: 'Ext.form.Panel',
xtype: 'main',
    requires: [
        'Ext.TitleBar',
        'Ext.Video'
    ],
    config: {
        items: [
            {
                xtype:'textfield',
                name:'txtDisplay',
                id:'idDisplay',
                readOnly:true,
            },
            {
                xtype:'button',
                name:'btnClear',
                id:'idClear',
                width:'25%',
                text:'C',
                style:'float:left;',
                action: 'clearDisplay',
            },
            {
                xtype:'button',
                name:'btnSeven',
                id:'idSeven',
                width:'25%',
                text:'7',
                style:'float:left; clear:both;',
                action: 'displayNum',
                /*handler: function()
                {
                    var x = Ext.getCmp('idSeven')._text;
                    Ext.getCmp('idDisplay').setValue(x);
                }*/
            },
            {
                xtype:'button',
                name:'btnEight',
                id:'idEight',
                width:'25%',
                text:'8',
                style:'float:left;',
                action:'displayNum',
            }
        ]
    }
});

和CalcController.js文件如下：

Ext.define('MyApp.controller.CalcController', {
extend: 'Ext.app.Controller',
    config: {
        control: {
            'button[action=displayNum]' : {
                tap: 'displayNum'
            },
            'button[action=clearDisplay]' : {
                tap: 'clearDisplay'
            },
        }
    },
    displayNum: function(button, e, eOpts)
    {
        var x = Ext.getCmp('idDisplay')._value + button._text;
        Ext.getCmp('idDisplay').setValue(x);
    },
    clearDisplay: function(button, e, eOpts)
    {
        Ext.getCmp('idDisplay').setValue('');
    }
});

使用此方法，我使用按钮的点击事件在控制器文件中传递按钮的属性。

如何在 sencha touch 中使用函数在控制器文件中传递参数

How to pass argument in Controller file using function in sencha touch

sencha-touch