tdgi.ux.tdgi_border - Extension to allow collapsed layout titles

[jay@moduscreate.com]

In response to this thread, 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 not magic or gloss. There was some posts soon there after that requested more functionality for this override. (TDGi Blog Entry)

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. Click here to download the zip file of the full source and example.

Simple Example:

{
    region:'west',
    title:'West',
    /* tdgi_border layout collapsed title config option start */
    collapsedTitle: {
        //Just like an Ext.DomHelper config object
        element : {
            // Required0
            tag  : 'img',
            // Required
            src  : 'wSideLabel.jpg',
            // Set this if you need to.
            style  : 'border: 1px solid #FF0000;'
        }
    },
    /* tdgi_border layout collapsed title config option end */    
    split:true,
    width: 200,
    minSize: 175,
    maxSize: 400,
    collapsible: true,
    margins:'0 0 0 5',
    html : 'some Junk here'
} 

Screenshots:

(Internet Explorer 6 and 7)


(FF2.x/Safari on OS X)

[jerrybrown5]

Collapsed compass regions are not that helpful if the end user does not instinctively know what they are. This attention to detail goes a long way. Kudos, and thanks for saving me some coding time.

Best regards,
Jerry Brown

[joku]

Very nice. I like those red boxes with arrows that you drew in the picture. Maybe you can make popups like that

[jay@moduscreate.com]

Truth be told, i'm looking at canvas tags, but IE seems to be the biggest hurdle.

[wm003]

Awesome stuff!

Thanks for sharing!

[InuyashaXTC]

Truth be told, i'm looking at canvas tags, but IE seems to be the biggest hurdle.

Have you tried looking at ExplorerCanvas?

[MeDavid]

Nice extension! How about making it with the panel icons, just like eclipse does?

[jay@moduscreate.com]

Have you tried looking at ExplorerCanvas?

thanks dude. i'm going to look into this

[antimatter15]

You can use SVG/VML for text, they both have full DOM, so it'll be an easier transition, and text-selection might be possible. (SVG is supported by most browsers including Opera, Safari, and Firefox, while VML is supported by IE)

[jay@moduscreate.com]

From my understanding, SVG requires an adobe client for IE6, which is still a huge chunk of the corporate industry standard.