1. #1
    Sencha User
    Join Date
    Nov 2012
    Posts
    14
    Vote Rating
    0
    pflopez is on a distinguished road

      0  

    Default Card Containers inside tab panel, no method setActiveItem

    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 - Senior Forum Manager mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    36,602
    Vote Rating
    814
    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


    Any subclass of Ext.Container will have a setActiveItem method and all will work great if that component is using card layout.
    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.

  3. #3
    Sencha User
    Join Date
    Nov 2012
    Posts
    14
    Vote Rating
    0
    pflopez is on a distinguished road

      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 - Senior Forum Manager mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    36,602
    Vote Rating
    814
    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


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

  5. #5
    Sencha User
    Join Date
    Nov 2012
    Posts
    14
    Vote Rating
    0
    pflopez is on a distinguished road

      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