Results 1 to 3 of 3

Thread: expanding a panel on mouse over

  1. #1
    Sencha User
    Join Date
    Feb 2012
    Posts
    85
    Answers
    6
    Vote Rating
    0
      0  

    Default Answered: expanding a panel on mouse over

    right now i have a panel defined as follows

    Code:
    var eastPanel = Ext.create('Ext.panel.Panel',
            {
                xtype: 'panel',
                
                id: 'east-region',
                
                layout: 'fit',
                region: 'east',
                
                width: '15%',
                maxWidth: 90,
                
                collapsible: true,
                collapsed: true,
                collapseMode: 'mini',
                
                split: true, //collapse in correct direction
                
                header : false // no title bar with collapse button
                
            });
    I was wondering if it was possible to make it expand when the mouse goes over the splitter or the mini expand button.
    In turn I would want to make it collapse when the mouse leaves the panel or clicks in another window or panel.

    However I can't seem to find any events in documentation that might help me do this.
    Any ideas?

  2. You would have to get the splitter, add a mouseover listener to it's element and expand the region

  3. #2
    Sencha - Sr Software Engineer mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    39,551
    Answers
    3931
    Vote Rating
    1271
      0  

    Default

    You would have to get the splitter, add a mouseover listener to it's element and expand the region
    Mitchell Simoens @LikelyMitch
    Sencha Inc, Senior Software Engineer
    ________________
    Learn BBCode and use it! Checkout the CODE tag!

    Check out my GitHub, lots of nice things for Ext JS and Sencha Touch
    https://github.com/mitchellsimoens

  4. #3
    Sencha User
    Join Date
    Feb 2012
    Posts
    85
    Answers
    6
    Vote Rating
    0
      0  

    Default

    Quote Originally Posted by mitchellsimoens View Post
    You would have to get the splitter, add a mouseover listener to it's element and expand the region
    you helped me on the way quite nicely some fiddling around got me with this

    Code:
    Ext.get('appBody').select('.x-splitter').addListener('mouseover',this.dockMouseOver);
                    Ext.get('appBody').select('#east-region-body').addListener('mouseleave', this.dockMouseOut);

    I'm just a little worried I'm not being specific enough on the splitter. So I think it might cause troubles if another splitter gets in the viewport. (which is about to happen to be honest)

    is there a better way to get a hold of the splitter?

    EDIT:
    yeah it just happened...

    both splitters have the event.

Tags for this Thread

Posting Permissions

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