1

我有 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（必需的面板/卡片），那么它工作正常。在这种情况下，我必须将 ActiveItem 设置为所需的卡片（form1 和 form2）。更改了视口 - http://pastebin.com/P4k04dBQ 是否有任何解决方案可以仅使用 2 个面板/卡来实现？

视口.js

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

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

        items: [{
            xclass: 'MyApp.view.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'
            }
        ]
    }]
});

应用程序.js

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

    controllers: ['Main'],

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

    }
});
4

2 回答 2

2

最后我得到了答案。组件实例不应作为 中的项目给出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'
                        }
                    ]
                }]
            }
        ]
    }

});
于 2012-04-16T23:27:19.567 回答
0

尝试这个...

myNavigationPanel = Ext.create('MyApp.view.navigatingPanels');
myNavigationPanel.setActiveItem(0);

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

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

        items: [{
                xclass: 'MyApp.view.Home'
            },
            {
                xclass: 'MyApp.view.Contact'
            },
            {
                xclass: 'MyApp.view.Products'
            },
            {
                xclass: 'MyApp.view.Forms'
            },
            {
                xclass: 'MyApp.view.NestedTabPanels'
            },
            myNavigationPanel
        ]
    }
});
于 2012-04-16T04:56:43.920 回答