javascript - Sencha Touch2 - 带有卡片布局的面板不起作用

Question

我有 tabpanel，其中包含几个选项卡。我将在这里专注于第 6 个选项卡 - navigatingPanels.js 文件。在这个文件中，我有一个卡片布局，以便用户可以填写 form1 并在提交时移动到 form2(滑动到 form2)。我还有一个带后退按钮的停靠工具栏，以便用户可以返回到 form1(如果需要)。它给出了一个错误 -

Uncaught Error: [ERROR][Ext.Base#callParent] Invalid item given: undefined, must be either the config object to factory a new item, or an existing component instance.

可以在这里看到该应用程序 - http://maalguru.in/touch/Raxa-70/MyApp/

更新 - 如果我向相关面板添加一张额外的卡片，并删除 form1 和 form2(必需的面板/卡片)，那么它就可以正常工作。在这种情况下，我必须将 setActiveItem 设置为所需的卡片(form1 和 form2)。更改视口(viewport) - http://pastebin.com/P4k04dBQ有什么解决方案可以只用 2 个面板/卡来实现吗？

Viewport.js

Ext.define('MyApp.view.Viewport', {
    extend: 'Ext.TabPanel',
    xtype: 'my-viewport',

    config: {
        fullscreen: true,
        tabBarPosition: 'bottom',

        items: [{
            xclass: 'MyApp.view.navigatingPanels'
        }]
    }
});

NavigatingPanels.js

Ext.define('MyApp.view.navigatingPanels', {
    extend: 'Ext.Panel',
    id: 'navigatingPanels',
    xtype: 'navigatingPanels',
    config: {
        iconCls: 'user',
        title: 'Navigating Panels',
        layout: 'card',
        animation: {
            type: 'slide',
            direction: 'left'
        },
        defaults: {
            styleHtmlContent: 'true'
        },
        items: [{
                docked: 'top',
                xtype: 'toolbar',
                title: 'Registeration Form',
                items: [{
                    text: 'Back',
                    ui: 'back',
                    align: 'centre',
                    //back button to take the user back from form2 to form1
                    handler: function() {
                        Ext.getCmp('navigatingPanels').setActiveItem(form1);

                    }
                }]
            },
            form1,
            form2
        ]
    }

});


var form1 = new Ext.Panel({
    scrollable: 'vertical',
    items: [{
        xtype: 'fieldset',
        title: 'Form 1',
        items: [{
                xtype: 'textfield',
                label: 'Name',
                name: 'name',
            },
            {
                xtype: 'button',
                text: 'Save Data & move to form2',
                ui: 'confirm',
                //TODO add some action: to store data
                //save data & move to form2
                handler: function() {
                    Ext.getCmp('navigatingPanels').setActiveItem(form2, {
                        type: 'slide',
                        direction: 'right'
                    });
                    console.log("Form1");
                }
            }
        ]
    }]
});
var form2 = new Ext.Panel({
    scrollable: 'vertical',
    items: [{
        xtype: 'fieldset',
        title: 'Form 2',
        items: [{
                xtype: 'textareafield',
                label: 'Message',
                name: 'message'
            },
            {
                xtype: 'button',
                text: 'Submit Data',
                ui: 'confirm',
                //TODO add some action: to store data
                //action: 'Submit Data'
            }
        ]
    }]
});

App.js

Ext.Loader.setConfig({
    enabled: true
});
Ext.application({
    name: 'MyApp',

    controllers: ['Main'],

    launch: function() {
        Ext.create('MyApp.view.Viewport', {
            fullscreen: true
        });

    }
});

Answer 1

我终于得到了答案。组件实例不应作为 Ext.define 中的项给出，而应给出它们的配置。 setActiveItem 可以以正常方式调用 -

Ext.getCmp('navigatingPanels').setActiveItem(0);

代码片段

Ext.define('MyApp.view.navigatingPanels', {
    extend: 'Ext.Panel',
    id: 'navigatingPanels',
    xtype: 'navigatingPanels',
    config: {
        iconCls: 'user',
        title: 'Navigating Panels',
        layout: 'card',
        animation: {
            type: 'slide',
            direction: 'left',
            duration: 300
        },
        defaults: {
            styleHtmlContent: 'true'
        },
        items: [{
                docked: 'top',
                xtype: 'toolbar',
                title: 'Registeration Form',
                items: [{
                    text: 'Back',
                    ui: 'back',
                    align: 'centre',
                    //back button to take the user back from form2 to form1
                    handler: function() {
                        Ext.getCmp('navigatingPanels').setActiveItem(0, {
                            type: 'slide',
                            reverse: 'true',
                            duration: '300'
                        });
                        console.log(Ext.getCmp('navigatingPanels'));

                    }
                }]
            },
            {
                xtype: 'fieldset',
                title: 'Form 1',
                scrollable: 'vertical',
                items: [{
                        xtype: 'textfield',
                        label: 'Name',
                        name: 'name',
                    },
                    {
                        xtype: 'button',
                        text: 'Save Data & move to form2',
                        ui: 'confirm',
                        //TODO add some action: to store data
                        //save data & move to form2
                        handler: function() {
                            Ext.getCmp('navigatingPanels').setActiveItem(1, {
                                type: 'slide',
                                direction: 'right'
                            });
                            console.log("Form1");
                        }
                    }
                ]
            },
            {
                scrollable: 'vertical',
                items: [{
                    xtype: 'fieldset',
                    title: 'Form 2',
                    items: [{
                            xtype: 'textareafield',
                            label: 'Message',
                            name: 'message'
                        },
                        {
                            xtype: 'button',
                            text: 'Submit Data',
                            ui: 'confirm',
                            //TODO add some action: to store data
                            //action: 'Submit Data'
                        }
                    ]
                }]
            }
        ]
    }

});