Results 1 to 6 of 6

Thread: CardLayout.setActiveItem not working

  1. #1

    Default CardLayout.setActiveItem not working

    I'm trying to use code found in the laout-browser example.
    I've set up a Panel with a card layout and defined two states for the panel:
    I can set the 'activeItem' as 0 or 1 in the config and it works fine.
    However I want to be able to control the Panel from another Panel. On a panel (called 'tab') which has tabs I've tried to set up this listener:

    Code:
    tab.on('tabchange', function (tab, activatedTab) {
        var comp = Ext.getCmp('eastCentre');
        comp.layout.setActiveItem(1);
    });
    However when I try to run that the whole window which is displaying my panels does not render at all.
    I've found out that I can execute up to:

    Code:
    var panelLayout = Ext.getCmp('eastCentre').layout;
    But as soon as I try to execute setActiveItem it fails. Firebug says setActiveItem is not a function. But it's used in line 68 of the layout-browser.js file! How am I supposed to remotely set the active item in the Panel which has a card layout?

  2. #2
    Sencha User Condor's Avatar
    Join Date
    Mar 2007
    Location
    The Netherlands
    Posts
    24,246

    Default

    Are you sure that the eastCentre panel has card layout and that the panel is rendered?

  3. #3

    Default

    Yep - here is the code for it:

    Code:
    var eastCentre = new Ext.Panel({
        id            :    'eastCentre',
        region        : 'center',
        layout: 'card',
        activeItem: 1,
        items        : [notesPanel, invoicePanel]
    })
    Also, if I try code like this:

    Code:
    var comp = Ext.getCmp('eastCentre');
    alert(comp.layout)
    it displays card as expected

  4. #4
    Sencha User Condor's Avatar
    Join Date
    Mar 2007
    Location
    The Netherlands
    Posts
    24,246

    Default

    It shouldn't display 'card', it should display (Object).

    This means your eastCentre component isn't rendered yet.

    You could use:
    Code:
    var comp = Ext.getCmp('eastCentre');
    if (comp.rendered) {
      comp.layout.setActiveItem(1);
    } else {
      comp.activeItem = 1
    }

  5. #5

    Default

    Excellent I've been able to get it to work!

    Tis a bit frustrating though - the 'activeItem' property is listed as a config property but not as a public property so I didn't think to try calling it directly. Same thing goes for the setActiveItem method which I only found as listed for the CardLayout class. And the checking for the rendered state is not used in the layout-browser example. I don't think I'd ever have found out how to fix this without your help...

  6. #6
    Sencha User Condor's Avatar
    Join Date
    Mar 2007
    Location
    The Netherlands
    Posts
    24,246

    Default

    activeItem isn't a property, it is indeed a config option.

    Most Ext components apply the config object to themselves (making all config options temporary properties) and uses these during creation and render.
    activeItem is used during render, so it is still available as a property before that. After render it isn't used anymore, so changing it then won't do anything.

Posting Permissions

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