button - Sencha Touch 按钮对 Tap 事件没有响应

Question

我是 sencha touch 的新手，我遇到了一个奇怪的按钮问题。我正在使用 mvc，我有：

添加userview.js

Ext.define('App.view.Adduserview', {
extend: 'Ext.form.Panel',

xtype: 'adduserview',

requires: ['Ext.form.FieldSet','Ext.field.Select','App.store.Companies'],

config: {
    id: 'userform',
    items: [
        {
            xtype: 'fieldset',
            title: 'Details',
            items:[
                {
                    xtype: 'textfield',
                    name: 'userName',
                    label: 'Name'
                },
                {
                    xtype: 'textfield',
                    name: 'userLastname',
                    label: 'Lastname'
                },
                {
                    xtype: 'textfield',
                    name: 'userNumber',
                    label: 'Number'
                }
            ]
        },
        {
            xtype: 'fieldset',
            title: 'Links',
            items: {
                xtype: 'selectfield',
                label: 'Company',
                store: Ext.create('App.store.Companies'),
                displayField: 'companyName',
                valueField: 'companyName'
            }
        },
        {
            xtype: 'button',
            text: 'Send',
            id: 'adduserButton'
        }
    ]
}
});

添加用户.js

Ext.define('App.controller.Adduser', {
extend: 'Ext.app.Controller',

config: {
    refs:{
        userform: '#userform'
    },

    control: {
        '#adduserButton': {
            tap: function(){
                var valuesUser = this.getUserform().getValues();
                console.log(valuesUser);
                if (notNull(valuesUser.userName) && notNull(valuesUser.userLastname) && notNull(valuesUser.userNumber)){
                    Ext.Ajax.request({
                        url: 'http://server.com/insertUser.php',
                        params: valuesUser,
                        method: 'post',

                        success: function(response){
                            var text = response.responseText;
                            Ext.Msg.alert('Success', text);
                        },

                        failure : function(response) {
                            Ext.Msg.alert('Error','Error while submitting the form');
                            console.log(response.responseText);
                        }
                    });
                    this.getUserform().reset();
                }
                else{
                    Ext.Msg.alert('Error', 'All the fields are necessary');
                }
            }
        }
    }
}
});

function notNull(a) {
    if(a!="" && !(a.match(/^\s+$/))){
        return true;
    }
    else{
        return false;
    }
};

问题是按钮不起作用，按下时它什么也不做，而且我还有其他两个 FormPanel 完全一样，但数据不同，它们每个都有一个控制器，就像我展示的那样，但在水龙头功能，他们工作。我注意到当我看到在 chrome 中加载的脚本时，Adduser.js 不存在，所以我猜这就是它不工作的原因，但我不确定它为什么不加载。顺便说一下，我将控制器添加到 App.js。

谢谢您的帮助。

Answer 1

update your controoler code with

Ext.define('App.controller.Adduser', {
extend: 'Ext.app.Controller',

config: {
    refs:{
        userform: '#userform'
    }
    },

   init: function () {
        this.control({
        '#adduserButton': {
            tap: function(){
                var valuesUser = this.getUserform().getValues();
                console.log(valuesUser);
                if (notNull(valuesUser.userName) && notNull(valuesUser.userLastname) && notNull(valuesUser.userNumber)){
                    Ext.Ajax.request({
                        url: 'http://server.com/insertUser.php',
                        params: valuesUser,
                        method: 'post',

                        success: function(response){
                            var text = response.responseText;
                            Ext.Msg.alert('Success', text);
                        },

                        failure : function(response) {
                            Ext.Msg.alert('Error','Error while submitting the form');
                            console.log(response.responseText);
                        }
                    });
                    this.getUserform().reset();
                }
                else{
                    Ext.Msg.alert('Error', 'All the fields are necessary');
                }
            }
        }
    });
    },
}
});

Answer 2

添加

controllers: [
    'App.controller.Adduser',

],

在应用程序中

Answer 3

将您的参考更改为

refs:{
        userButton: '#adduserButton'
    }

和控制作为

control: {
        userButton: {

希望这可以帮助你