Card Containers inside tab panel, no method setActiveItem

[pflopez]

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 :

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:

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:

        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!

[mitchellsimoens]

Any subclass of Ext.Container will have a setActiveItem method and all will work great if that component is using card layout.

[pflopez]

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....

[mitchellsimoens]

Example:

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

[pflopez]

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