Sencha Touch2 - Panels with Card layout not working

1
votes

I have tabpanel, which contains a few tabs. I will be concentrating on the 6th tab here - navigatingPanels.js file. In this file, I have a card layout, so that the user can fill form1 & move to form2 on submission (slide to form2). I also have a docked toolbar, with a back button, so that the user can move back to form1 (if needed). It gives an error - 

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.

The app can be seen here - http://maalguru.in/touch/Raxa-70/MyApp/

Update - If I add one extra card to the concerned panel, & remove the form1 & form2 (required panels/cards), then it works fine. In this case I have to setActiveItem to the desired cards (form1 & form2). Changed Viewport - http://pastebin.com/P4k04dBQ Is there any solution to achieve with only 2 panels/cards ?

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

    }
});
2
javascriptsencha-touchextjssencha-touch-2
The link doesn't work, but there might be a problem with the order in which they are loaded. – Silviu-Marian
Yes, I think order of loading is the reason for that, I sometimes encounter that in my localserver too. – Gaurav

2 Answers

2
votes

Finally I got the answer. The component instances should not be given as items in Ext.define, instead their config should be given. The setActiveItem can be called the the normal way -

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

CODE SNIPPET

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

});
0
votes

Try this...

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