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

时间:2014-08-19 08:24:35

标签: sencha-touch sencha-touch-2 sencha-architect

我对sencha touch非常新,当我在我的练习应用程序中点击主视图中的添加按钮时,我很难从一个视图移动到另一个视图。我尝试在我的控制台面板中搜索错误但是Chrome只显示并清空控制台。对不起,如果这看起来像是一个noob查询,但感谢任何帮助。

MainView.js

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'
                }
            ]
        }
    }

});

AddForm.js

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'
            }
        ]
    }

});

FirstControl.js(控制器)

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'
        });
    }

});

2 个答案:

答案 0 :(得分:0)

忘了添加别名:'字段'

答案 1 :(得分:0)

将FirstControl.js(Controller file)文件中的添加功能更改为以下。

add: function(button, e, eOpts) { console.log('inside the add function'); this.getMainView().push(Ext.create('MyApp.view.AddForm')); }

它应该有用。