Card Layout Activate Event

[parky128]

Hello,

When the setActiveItem function is called in a panel layout implementation, is there an event fired to indicate the active item has changed?

I tried adding a listener for the activate event in my card panel config but it does not fire, I also tried listening for the panel's show event, see code below.

                id: 'centerRegion',
                xtype: 'panel',
                region: 'center',
                id: 'centerCardPanel',
                layout: 'card',
                activeItem: 0,
                items: [{
                    xtype: 'panel',
                    id: 'pnlHome',
                    title: 'Home Content.'
                },{
                    headerAsText: false,
                    layout: 'border',
                    items:[{
                        region: 'center',
                        items:[_mapPanel]
                     },{
                        title: 'Map Tools',
                        region: 'east',
                        width: 150,
                        collapsible:true
                        
                    },{
                        title: 'Location Grid',
                        region: 'south',
                        height: 150,
                        split: true,
                        collapsible:true
                    }],
                    bbar: new Ext.Toolbar({
                        buttonAlign: 'center',
                        items:[{
                                xtype: 'button',
                                id: 'btnToggleMap',
                                text: 'Show Map'

                            },'-',{
                                xtype: 'button',
                                id: 'btnZoomUnit',
                                text: 'Zoom To Unit'

                            },'-',{
                                xtype: 'button',
                                id: 'btnUnitDetails',
                                text: 'Unit Details',
                                handler: function() {
                                }
                            }
                        ],
                        autoHeight: true,
                        hideBorders: true
                        })

                }],
                listeners: {
                    activate: function(panel) {
                        alert('panel activated');
                    }
                }

Clearly I am doing something wrong, can someone please assist or at least point where in the API docs I will find my answer?

Many Thanks,
Rob

[Condor]

The 'activate' and 'deactivate' events are fired on the card layout items and not on the container with card layout itself.

[Animal]

Some problems looming with with that overnested layout with missing layout configs though!

[parky128]

Yeah I know, was just showing an extract of my code to assist with my question. Thanks

[parky128]

Hi Animal,

In regards to your last comment, I think I have indeed hit a problem but am unsure how I get around this (egg on my face!). At the moment I have a viewport with a center region defined as per my code below which as you can see contains a card layout. The second item of which I am tryng to define via another border layout so I can have two collapsible regions:

{
                xtype: 'panel',
                region: 'center',
                id: 'centerCardPanel',
                layout: 'card',
                activeItem: 0,
                defaults: {
                    listeners: {
                        activate: function(panel) {
                            this._setNavBarForCurrentPage();
                        },
                        scope: this
                    }
                },
                items: [{
                    xtype: 'panel',
                    id: 'pnlHome',
                    title: 'Home Content.'
                },{
                    id: 'pnlLocation',
                    layout: 'border',
                    items:[{
                        region: 'center',
                        collapsible:true
                    },{
                        region: 'south',
                        collapsible:true,
                        height:150            
                    }],
                    bbar: new Ext.Toolbar({
                        buttonAlign: 'center',
                        items:[{
                                xtype: 'button',
                                id: 'btnToggleMap',
                                text: 'Show Map'

                            },'-',{
                                xtype: 'button',
                                id: 'btnZoomUnit',
                                text: 'Zoom To Unit'

                            },'-',{
                                xtype: 'button',
                                id: 'btnUnitDetails',
                                text: 'Unit Details',
                                handler: function() {
                                }
                            }
                        ],
                        autoHeight: true,
                        hideBorders: true
                        })
                }]
            }

When navigating to this item in my card panel I get the layout as shown in my image attached. Although my nested center region collapses it does not cause the south region to expand and fill the available space as I would expect it to.

The reason I am approaching this like so is that I wish to control the collapsed status of these regions whenever the user clicks on certain top menu items.

I hope this makes sense - what I am trying to do that is, I am sure I am doing something wrong in code here, just unsure what.

Thanks,
Rob

[Animal]

You cannot collapse a Panel in a border layout. You must ASK the border layout's region to collapse.

myBorderLayoutContainer.layout.west.onCollapseClick();

[Condor]

Which Ext version are you using? Older Ext versions required that you configured the panels in a card layout that had layouts themselves (e.g. your border layout panel) with hideMode:'offsets'.

[parky128]

I am using 3.2.1

I am confused by being unable to collapse a panel in a border layout. If thats so, then how come my south region in my second card panel does collapse for me as expected?

Also, in my screen shot I have a west region in a border layout containing collapsible panels which also collapse and expand.

I cannot find a reference to this onCollapseClick function when looking in the API docs, although I see it in Firebug ok. I have looked in the BorderLayout.Region section in the latest version.

Cheers,
Rob

[Animal]

BorderLayout (And its helper classes, the Region managers) are VERY old code. From the yui-ext days. You will have to use these undocumented methods. It is a valid requirement to be able to manipulate the regions programatically through a documented API, but it's not there in this version.

They will need refactoring for them to be as usable and flexible as the modern layout classes like the Box layouts.

Ext 4 should bring a improvement.