Results 1 to 3 of 3

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

  1. #1
    Sencha User
    Join Date
    Mar 2012
    Posts
    9
    Vote Rating
    0
      0  

    Default 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 - Sr Software Engineer mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    39,553
    Answers
    3931
    Vote Rating
    1272
      0  

    Default

    You should not give component instances as items in Ext.define like you are. You should just specify config objects
    Mitchell Simoens @LikelyMitch
    Sencha Inc, Senior Software Engineer
    ________________
    Learn BBCode and use it! Checkout the CODE tag!

    Check out my GitHub, lots of nice things for Ext JS and Sencha Touch
    https://github.com/mitchellsimoens

  4. #3
    Sencha User
    Join Date
    Mar 2012
    Posts
    9
    Vote Rating
    0
      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.

Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •