How to get titles in collapsed panels for ‘border’ layout.

Posted on 15. Mar, 2008 by Jay Garcia in EXT Examples, EXTJS, Ext Extensions

In response to this thread at the Ext forums, I initially created a simple override (Click here to see it action) to the Ext Border Layout. The solution was a quick one hour deal with no magic or gloss. There was some posts soon there after that requested more functionality for this override. These requests include:

images for the east/west regions (for CBC)
ability to re-use the original title
the freedom to insert what ever element object or HTML fragment the end developer desired
change from override to extension.

So, I’ve rolled up all of these requests into one Ext.ux.TDGi.BorderLayout class. This solution provides all of the freedom flexibility that was requested.

Click here to view a working example of this extension. Click here to download the zip file of the full source and example.
Simple Example:

Screenshots:(Internet Explorer 6 and 7)
Example of tdgi_border layout in IE6 and IE7. IE8 has not been tested!

(FF2.x on OS X)

Example of tdgi_border layout in firefox for OSX.
Actual Example Source:

Override Source:

Like what you've seen or read? Use the below links to share and enjoy.

7 Responses to “How to get titles in collapsed panels for ‘border’ layout.”

kadirisani

23. Oct, 2008

Thanks Garcia,
it worked really well. However, to show the vertical text for the east and west panels, i used the following code to avoid the images:
collapsedTitle: {
//Just like an Ext.DomHelper config object
element : {
// Required0
tag : ‘div’,
// Required
html : “E a s t ”,
// Set this if you need to.
style : “margin-left:6px;color: #003366;font-weight:bold;line-height:9px;”
}
}
Jay Garcia

13. Nov, 2008

Thanks Kadirisani.

I will look to add this to the code base
saravanacm

10. Jul, 2009

Hi,

I have tried your code in my application. The collapsed title is working fine. But the “titleCollapse” property of the panel is not working. The collapsed panel is expanding and two titles are disaplyed when I click the mouse on the title bar of the collapsible panel (I have set “titleCollapse: false” for the panel). I wish to expand the panel only by clciking on the icon. Is there any workaround for this?
Jay Garcia

20. Jul, 2009

Are you trying this with Ext JS 3.0?
igorvin

22. Sep, 2009

Hi, Jay. Do you have updated version of your “borderLayout” library for Ext 3.x? I am not sure whether your original implementation is fully compatible with Ext 3.x…

Another problem i would like to point out looking for your help… If title has a long string (wraps over to two lines, for example), when the panel gets collapsed the “restore” button disappears from the title bar. This problem exists in FireFox, but works fine for IE. Basically, the button is rendered under the title bar (since there are two+ lines of text) and it’s not visible. Is it possible to fix this problem?
Jay Garcia

26. Jul, 2010

uiouiouio
Jay Garcia

26. Jul, 2010

oooooo