Split Panels with Percentage?

[dlgoodchild]

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.

[Animal]

Did you do a forum search?

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

[dlgoodchild]

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.

[dlgoodchild]

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.

[Animal]

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.

[dlgoodchild]

Unfortunately it is doing what I'm saying.

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:

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

[Animal]

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?

[dlgoodchild]

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!

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.

[Animal]

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.

[Windwalker]

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!