Results 1 to 5 of 5

Thread: Card Containers inside tab panel, no method setActiveItem

  1. #1
    Sencha User
    Join Date
    Nov 2012
    Posts
    14
    Vote Rating
    0
      0  

    Default Card Containers inside tab panel, no method setActiveItem

    Hi Everyone,
    I've taken the form example available on github (https://github.com/senchalearn/Forms-demo) as a start point for an example app that I'm working on.
    The example is a listview with a button for adding a new item, and the corresponding form.


    I want to have the same two cards but inside a tab panel container, so one of the tabs holds (listview, new button, form) and other tabs show other components.

    What I'm trying to do is fairly simple but i'm running into some errors; dealing with the config options of layout, fullscreen and the setActiveItem method.

    The error i'm getting is:

    Uncaught TypeError: Object card has no method 'setActiveItem'


    Here's my tab container code :

    Code:
    App.views.Main = Ext.extend(Ext.TabPanel, {
        fullscreen: true,
        type: 'dark',
        initComponent: function() {
            Ext.apply(this, {
                items: [{
                    title: 'Users',
                    xtype: 'UserCardsContainer' ,
                    iconCls: 'info',
                }, {
                    title: 'Other',
                    xtype: 'sample' ,
                    iconCls: 'info',
                },],
                tabBar: {
                    dock: 'bottom',
                    layout: {
                      pack: 'center'
                    } 
                  },
              
            });
            
            App.views.Main.superclass.initComponent.apply(this, arguments);
        }
    });
    
    
    Ext.reg('Main', App.views.Main);
    And UserCardContainer:

    Code:
    App.views.UserCardsContainer = Ext.extend(Ext.Panel, { 
        layout: 'card',
        initComponent: function() {
            Ext.apply(this, {
                     items: [
                       { xtype: 'App.views.UsersList', id: 'usersList' },
                       { xtype: 'App.views.UsersForm', id: 'usersForm' },
                    ],
            });
            App.views.UserCardsContainer.superclass.initComponent.apply(this, arguments);
        },
    
    
        reveal: function(target) {
            var direction = (target === 'usersList') ? 'right' : 'left'
            this.setActiveItem(
                App.views[target],
                { type: 'slide', direction: direction }
            );
        }
    });
    Ext.reg('UserCardsContainer', App.views.UserCardsContainer);
    And, just to point out that the scope of the newForm button is correct, here is the button definition on the panel (userList) that holds the button:

    Code:
            addButton = {
                itemId: 'addButton',
                iconCls: 'add',
                iconMask: true,
                ui: 'plain',
                handler: this.onAddAction,
                scope: this
            };

    I've tried changing the method to setCard (as suggested on some other posts) and didn't seem to make the trick :

    Uncaught TypeError: Object [object Object] has no method 'setCard'


    So, i'm a bit lost why the method setActiveItem is defined for the panel, only if the panel is not included on a tabPanel..... am I missing something?

    Been stuck with this for a while, thanks in advance!

  2. #2
    Sencha - Sr Software Engineer mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    39,318
    Vote Rating
    1291
      0  

    Default

    Any subclass of Ext.Container will have a setActiveItem method and all will work great if that component is using card layout.
    Mitchell Simoens @LikelyMitch
    Sencha Inc, Senior Software Engineer
    ________________
    Learn BBCode and use it!

    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.

  3. #3
    Sencha User
    Join Date
    Nov 2012
    Posts
    14
    Vote Rating
    0
      0  

    Default

    Hi Mitchell, thanks for your answer.

    My view
    UserCardsContainer does have a card layout defined, and I believe TabPanels have card layout by default.
    I've tried setting card layout to the tab panel ( just to see if that may help) but the error still happens, so I'm not sure what to do next....





  4. #4
    Sencha - Sr Software Engineer mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    39,318
    Vote Rating
    1291
      0  

    Default

    Example:

    Code:
    new Ext.TabPanel({
        fullscreen : true,
        items      : [
            {
                title : 'One',
                html  : 'one'
            },
            {
                title : 'Two',
                html  : 'two'
            }
        ],
        dockedItems : [
            {
                xtype : 'toolbar',
                dock  : 'bottom',
                items : [
                    {
                        text    : 'setActiveItem(1)',
                        handler : function(btn) {
                            var tabpanel = btn.up('tabpanel');
    
                            tabpanel.setActiveItem(1);
                        }
                    }
                ]
            }
        ]
    });
    Mitchell Simoens @LikelyMitch
    Sencha Inc, Senior Software Engineer
    ________________
    Learn BBCode and use it!

    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.

  5. #5
    Sencha User
    Join Date
    Nov 2012
    Posts
    14
    Vote Rating
    0
      0  

    Default

    Well, you lost me even more there. :P

    Just to be clear, the tab panels are working fine.
    The structure is the following.

    tabpanel:
    items [ panel1, panel2, panel3]

    panel1:
    layout card ,
    items: [ list , form ]


    The error I'm having is when I try to show the form, on panel1.


    Thanks for the quick response, and sorry if I'm not being clear about my issue

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
  •