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

March 15th, 2008 Jay Garcia Posted 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:

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

  1. 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<br>a<br>s<br>t<br><br>”,
    // Set this if you need to.
    style : “margin-left:6px;color: #003366;font-weight:bold;line-height:9px;”
    }
    }

  2. Thanks Kadirisani.

    I will look to add this to the code base :)

Leave a Reply

You must be logged in to post a comment.