1. #1
    Sencha User
    Join Date
    Jun 2009
    Posts
    411
    Vote Rating
    2
    parky128 is on a distinguished road

      0  

    Default Card Layout Activate Event

    Card Layout Activate Event


    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.

    Code:
                    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

  2. #2
    Sencha - Community Support Team Condor's Avatar
    Join Date
    Mar 2007
    Location
    The Netherlands
    Posts
    24,246
    Vote Rating
    97
    Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of

      0  

    Default


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

  3. #3
    Sencha - Ext JS Dev Team Animal's Avatar
    Join Date
    Mar 2007
    Location
    Notts/Redwood City
    Posts
    30,546
    Vote Rating
    64
    Animal is a jewel in the rough Animal is a jewel in the rough Animal is a jewel in the rough

      0  

    Default


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

  4. #4
    Sencha User
    Join Date
    Jun 2009
    Posts
    411
    Vote Rating
    2
    parky128 is on a distinguished road

      0  

    Default


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

  5. #5
    Sencha User
    Join Date
    Jun 2009
    Posts
    411
    Vote Rating
    2
    parky128 is on a distinguished road

      0  

    Default


    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:

    Code:
    {
                    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
    Attached Images

  6. #6
    Sencha - Ext JS Dev Team Animal's Avatar
    Join Date
    Mar 2007
    Location
    Notts/Redwood City
    Posts
    30,546
    Vote Rating
    64
    Animal is a jewel in the rough Animal is a jewel in the rough Animal is a jewel in the rough

      0  

    Default


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

    Code:
    myBorderLayoutContainer.layout.west.onCollapseClick();

  7. #7
    Sencha - Community Support Team Condor's Avatar
    Join Date
    Mar 2007
    Location
    The Netherlands
    Posts
    24,246
    Vote Rating
    97
    Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of

      0  

    Default


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

  8. #8
    Sencha User
    Join Date
    Jun 2009
    Posts
    411
    Vote Rating
    2
    parky128 is on a distinguished road

      0  

    Default


    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

  9. #9
    Sencha - Ext JS Dev Team Animal's Avatar
    Join Date
    Mar 2007
    Location
    Notts/Redwood City
    Posts
    30,546
    Vote Rating
    64
    Animal is a jewel in the rough Animal is a jewel in the rough Animal is a jewel in the rough

      0  

    Default


    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.

Similar Threads

  1. Ext.ux.layout.ArrowCard - Card Layout With Sidearrow buttons
    By NeonMonk in forum Ext 2.x: User Extensions and Plugins
    Replies: 1
    Last Post: 14 Feb 2009, 7:34 AM
  2. activate event
    By Silent79 in forum Ext 2.x: Help & Discussion
    Replies: 12
    Last Post: 26 Nov 2007, 3:54 PM
  3. Activate and create event handler Tab Panel at Layout Dialog
    By electric_bit in forum Ext 1.x: Help & Discussion
    Replies: 3
    Last Post: 18 Dec 2006, 8:50 PM

Thread Participants: 2