Sencha touch 使用sencha touch从一个视图移动到另一个视图

我对sencha touch非常陌生，当我在练习应用程序中单击主视图中的添加按钮时，我很难从一个视图移动到另一个视图。我尝试在控制台面板中搜索错误，但Chrome只显示一个空控制台。我很抱歉，如果这似乎是一个noob查询，但任何帮助都将被感激地接受

MainView.js

AddForm.js

FirstControl.jsController

---

忘记添加别名：'field'

将FirstControl.jsController文件中的add函数更改为以下

添加：功能按钮，e，eOpts{ 日志“在添加函数内部”； 创建'MyApp.view.AddForm'； }

它应该会起作用

Ext.define('MyApp.view.MainView', {
    extend: 'Ext.navigation.View',

    requires: [
        'Ext.navigation.Bar',
        'Ext.Button'
    ],

    config: {
        itemId: 'MainView',
        navigationBar: {
            docked: 'top',
            itemId: 'navbar',
            items: [
                {
                    xtype: 'button',
                    align: 'right',
                    itemId: 'addButton',
                    iconAlign: 'center',
                    iconCls: 'add'
                }
            ]
        }
    }

});

Ext.define('MyApp.view.AddForm', {
    extend: 'Ext.form.Panel',

    requires: [
        'Ext.form.FieldSet',
        'Ext.field.DatePicker',
        'Ext.picker.Date',
        'Ext.Button'
    ],

    config: {
        items: [
            {
                xtype: 'fieldset',
                itemId: 'myForm',
                title: 'Insert Data',
                items: [
                    {
                        xtype: 'textfield',
                        label: 'ID',
                        name: 'id',
                        required: true
                    },
                    {
                        xtype: 'textfield',
                        label: 'Name',
                        name: 'username',
                        required: true,
                        autoCapitalize: true
                    },
                    {
                        xtype: 'datepickerfield',
                        label: 'Date Of Birth',
                        labelWrap: true,
                        placeHolder: 'mm/dd/yyyy'
                    }
                ]
            },
            {
                xtype: 'button',
                itemId: 'saveButton',
                margin: 10,
                ui: 'confirm',
                text: 'SAVE'
            },
            {
                xtype: 'button',
                itemId: 'declineButton',
                margin: 10,
                ui: 'decline',
                text: 'DELETE'
            }
        ]
    }

});

Ext.define('MyApp.controller.FirstControl', {
    extend: 'Ext.app.Controller',

    config: {
        refs: {
            MainView: 'mainview',
            addButton: 'mainview #addButton'
        },

        control: {
            "mainview #addButton": {
                tap: 'add'
            }
        }
    },

    add: function(button, e, eOpts) {
        console.log('inside the add function');
        this.getMainView().push({
            xtype:'AddForm',
            title:'Insert'
        });
    }

});