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文件中编写hander函数，在textfield中显示数字8。那怎么做呢？

Answer 1

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

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

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中的函数传递Controller文件中的参数

2 个答案: