1. #1
    Ext User
    Join Date
    Apr 2009
    Posts
    17
    Vote Rating
    0
    dlgoodchild is on a distinguished road

      0  

    Default Split Panels with Percentage?

    Split Panels with Percentage?


    Hi Guys,

    I have a border layout, and within that I have 2 panels, the south panel has split:true

    I would like to make the height of one of these panels 50% of the height of the parent container. The config object properties width and height only seem to accept numerical values in pixels.

    I also tried adding some code to the Ext.onReady method, that obtained the height of the parent container, and then set the height of the south panel to half of this value. This then resulted in some weirdness. The contents of the north panel did not adjust when the splitter was moved...

    Has anyone tried to do something similar? I basically want 2 panels with a splitter both representing 50% of the available space.

    Any help would be appreciated.

    Dave.

  2. #2
    Sencha - Ext JS Dev Team Animal's Avatar
    Join Date
    Mar 2007
    Location
    Notts/Redwood City
    Posts
    30,502
    Vote Rating
    48
    Animal has a spectacular aura about Animal has a spectacular aura about

      0  

    Default


    Did you do a forum search?

    This has been requested, and Condor has even posted suggested code.

  3. #3
    Ext User
    Join Date
    Apr 2009
    Posts
    17
    Vote Rating
    0
    dlgoodchild is on a distinguished road

      0  

    Default My Mistake.

    My Mistake.


    Appologies about that. I tend to google with a prefix of 'extjs', which I see now is not anywhere near enough. For those that come here first, I searched and have found my answers here:

    http://extjs.com/forum/showthread.ph...rcentage+split

    I do have a question however, that relates and has not been clear to me.

    Supposing I want code to execute to do some post render stuff, where would this go exactly? From the documentation it's not been clear which events are fired after doLayout and such like methods. I'm concerned about causing an infinite loop through calling doLayout in an event for say a viewport or panel. For instance, is the render event triggered just once? In general, I'm finding it difficult to determine where to place code and on what events. Is there a useful rule of thumb?

    Thanks, and appologies about not searching accurately enough.

    Dave.

  4. #4
    Ext User
    Join Date
    Apr 2009
    Posts
    17
    Vote Rating
    0
    dlgoodchild is on a distinguished road

      0  

    Default Upgraded.

    Upgraded.


    Quick question (I've bumped myself up to 3.0 there). If you programmatically change the height of a panel (which happens to be split), what must you call to have the split bar updated and the other affected panel to be updated? At the moment if I call setHeight on one of the panels, the split bar becomes fixed (i.e. I cannot resize it, the draggable images/layer shows, but has no effect on mouse up)

    Alot of questions I'm asking just now, nor do I like to lean too heavily on other people in my development, however I'm just trying to get a feel for best practices and I don't believe there's a better way than asking those that know it well.

    Regards,

    Dave.

  5. #5
    Sencha - Ext JS Dev Team Animal's Avatar
    Join Date
    Mar 2007
    Location
    Notts/Redwood City
    Posts
    30,502
    Vote Rating
    48
    Animal has a spectacular aura about Animal has a spectacular aura about

      0  

    Default


    No, that does not happen.

    When you change the height of a Component which is a region, and it all works fine.

    As for "it's not been clear which events are fired after doLayout"..

    The afterlayout event.

  6. #6
    Ext User
    Join Date
    Apr 2009
    Posts
    17
    Vote Rating
    0
    dlgoodchild is on a distinguished road

      0  

    Default


    Unfortunately it is doing what I'm saying.

    Code:
    afterLayoutHandler = function() {
            var nMainHeight = Ext.getCmp( 'extPnlCenter' ).getEl().getHeight();
            var oCenter = Ext.getCmp( 'extPnlMidCenter' ).getEl();
            var oSouth = Ext.getCmp( 'extPnlMidSouth' ).getEl();
            
            
            oSouth.setHeight( nMainHeight / 2 );
        }
    This method is defiantely only called when I resize any of the viewport (whichI understand will always reset my heights). However when I ensure this is only called once at the start, then after this point I cannot resize the splitter between extPnlMidCenter and extPnlMidSouth. The layer showing the drag is visible and then the splitter doesn't move.

    It is created as so:

    Code:
    {
        xtype: 'panel',
        title: false,
        height: 200,
        id: 'extPnlCenter',
        region: 'center',
        layout: 'border',
        border: false,
        items: [{
            xtype: 'panel',
            title: false,
            height: 200,
            id: 'extPnlMidSouth',
            region: 'south',
            split: true
        },{
            xtype: 'panel',
            title: false,
            id: 'extPnlMidCenter',
            region: 'center'
        }
    }
    The moment the setHeight it called the splitter associated with the panel that 'is a' region does not work.

    D.

  7. #7
    Sencha - Ext JS Dev Team Animal's Avatar
    Join Date
    Mar 2007
    Location
    Notts/Redwood City
    Posts
    30,502
    Vote Rating
    48
    Animal has a spectacular aura about Animal has a spectacular aura about

      0  

    Default


    Well it will knacker if you just meddle with the HTML ELEMENT instead of politely informing the COMPONENT that you want its size to change.

    How can any kind of scheme handle someone poking about with the HTML document?

  8. #8
    Ext User
    Join Date
    Apr 2009
    Posts
    17
    Vote Rating
    0
    dlgoodchild is on a distinguished road

      0  

    Default


    OK, I understand what you're saying, but there was no getHeight on the panel component. Ahh so I've looked and found getInnerHeight...

    Ahh bugger! OK, well thank-you, it works now!

    Code:
    afterLayoutHandler = function() {
            var nMainHeight = Ext.getCmp( 'extPnlCenter' ).getInnerHeight();
            var oSouth = Ext.getCmp( 'extPnlMidSouth' );
            
            oSouth.setHeight( nMainHeight / 2 );
    }
    I should have realised to be fair, I thought because I was getting back an Ext object (In this case Element) that the parent container would have been able to handle changes performed on this level.

    Cheers Animal.

  9. #9
    Sencha - Ext JS Dev Team Animal's Avatar
    Join Date
    Mar 2007
    Location
    Notts/Redwood City
    Posts
    30,502
    Vote Rating
    48
    Animal has a spectacular aura about Animal has a spectacular aura about

      0  

    Default


    Elements are just Elements. They encapsulate an HTML element. Anyone can bugger about with any Elements they like.

    But if those elements are being managed by any Ext Component, and you change the state that the Ext Component thinks it is managing then you've broken it.

  10. #10
    Sencha User
    Join Date
    Dec 2011
    Posts
    15
    Vote Rating
    0
    Windwalker is on a distinguished road

      0  

    Default


    Quote Originally Posted by dlgoodchild View Post
    Appologies about that. I tend to google with a prefix of 'extjs', which I see now is not anywhere near enough. For those that come here first, I searched and have found my answers here:

    http://extjs.com/forum/showthread.ph...rcentage+split
    Unfortunately this links seems to be outdated.
    It's a pity, I can't find a similar thread...

    Could you please sum up the solution?
    Thanks!

Thread Participants: 2

Tags for this Thread