1. #1
    Sencha User
    Join Date
    Mar 2012
    Posts
    9
    Vote Rating
    0
    chughgaurav is on a distinguished road

      0  

    Default Answered: Sencha Touch2 - Panels with Card layout, not working

    Answered: Sencha Touch2 - Panels with Card layout, not working


    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/

    NavigatingPanels.js

    Code:
    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' } ] } ] });
    Viewport.js
    Code:
    Ext.define('MyApp.view.Viewport', {
        extend: 'Ext.TabPanel',
        xtype: 'my-viewport',
        
        config:{
            fullscreen: true,
            tabBarPosition: 'bottom',
            
            items: [
                    {
                        xclass: 'MyApp.view.navigatingPanels'
                    }
            ]
        }
    });
    App.js

    Code:
    Ext.Loader.setConfig({
        enabled: true
    });
    Ext.application({
        name: 'MyApp',
        
        controllers:['Main'],
        
        launch: function() {
              Ext.create('MyApp.view.Viewport', {fullscreen: true});    
    
    
        }
    });
    Last edited by chughgaurav; 16 Apr 2012 at 4:21 AM. Reason: Removed extra tabs & other irrelevant code

  2. You should not give component instances as items in Ext.define like you are. You should just specify config objects

  3. #2
    Sencha - Senior Forum Manager mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    37,652
    Vote Rating
    901
    Answers
    3575
    mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute

      0  

    Default


    You should not give component instances as items in Ext.define like you are. You should just specify config objects
    Mitchell Simoens @SenchaMitch
    Sencha Inc, Senior Forum Manager
    ________________
    Check out my GitHub, lots of nice things for Ext JS 4 and Sencha Touch 2
    https://github.com/mitchellsimoens

    Think my support is good? Get more personalized support via a support subscription. https://www.sencha.com/store/

    Need more help with your app? Hire Sencha Services services@sencha.com

    Want to learn Sencha Touch 2? Check out Sencha Touch in Action that is in print!

    When posting code, please use BBCode's CODE tags.

  4. #3
    Sencha User
    Join Date
    Mar 2012
    Posts
    9
    Vote Rating
    0
    chughgaurav is on a distinguished road

      0  

    Default


    Thanks, your answer reminded me, I could have simply used
    Ext.getCmp('navigatingPanels').setActiveItem(0,{ type: 'slide', direction: 'right' }); instead of using those instances.