PDA

View Full Version : tdgi.ux.tdgi_border - Extension to allow collapsed layout titles



jay@moduscreate.com
15 Mar 2008, 8:20 PM
In response to this thread (http://extjs.com/forum/showthread.php?t=25381), I initially created a simple override (http://extjs.com/forum/showthread.php?p=119887#post119887) (click here (http://tdg-i.com/img/screencasts/2008-02-05_1602.swf) to see it action) to the Ext Border Layout (http://extjs.com/forum/../deploy/dev/docs/?class=Ext.layout.BorderLayout). 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 (http://tdg-i.com/30/how-to-get-titles-in-collapsed-panels-for-border-layout))

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 (http://tdg-i.com/js/examples/ext/tdgiux/tdgi_border/) to view a working example of this extension.

Click here (http://tdg-i.com/js/examples/ext/tdgiux/tdgi_border/tdgi.borderLayout.zip) to download the zip file of the full source and example. Click here (http://tdg-i.com/js/examples/ext/tdgiux/tdgi_border/tdgi.borderLayout.zip) 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)
http://tdg-i.com/img/screencasts/2008-03-15_2317.png

(FF2.x/Safari on OS X)
http://tdg-i.com/img/screencasts/2008-03-15_2340.png

jerrybrown5
15 Mar 2008, 11:38 PM
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
18 Apr 2008, 8:47 AM
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
18 Apr 2008, 9:20 AM
Truth be told, i'm looking at canvas tags, but IE seems to be the biggest hurdle.

wm003
19 Apr 2008, 12:30 AM
=D>Awesome stuff!=P~

Thanks for sharing!

InuyashaXTC
1 May 2008, 11:23 PM
Truth be told, i'm looking at canvas tags, but IE seems to be the biggest hurdle.

Have you tried looking at ExplorerCanvas (http://excanvas.sourceforge.net/)?

MeDavid
2 May 2008, 12:20 AM
Nice extension! How about making it with the panel icons, just like eclipse does?

jay@moduscreate.com
2 May 2008, 4:34 AM
Have you tried looking at ExplorerCanvas (http://excanvas.sourceforge.net/)?

thanks dude. i'm going to look into this ;)

antimatter15
2 May 2008, 5:56 AM
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
2 May 2008, 6:02 AM
From my understanding, SVG requires an adobe client for IE6, which is still a huge chunk of the corporate industry standard. ~o)

seade
4 May 2008, 8:43 PM
My app uses a border layout.

When I started with ExtJS 1.x I simply added a CSS class .x-layout-collapsed-west to provide an image for the collapsed west region title - this continues to work well with ExtJS 2.x.

My North region displays no title by default, but it is collapsible and so when it is collapsed I do actually want to display a title. With ExtJS 1.x I used to specify a collapsedTitle as something like this:

collapsedTitle: <div style='float:left;'>Page title</div><div style='float:right;padding-right:15px;'>User name <a href='logoutLink'>Logout</a></div>",And this worked just fine. When ExtJS 2.0 was released the collapsedTitle configuration option was no longer supported so I have not been presenting anything.

Your extension is great - I can once again display something when my North region is collapsed.

I do however have one small problem. In the collapsedTitle attribute I have above you will see that there are two div elements, one of which is float:left and the other is float:right. With Ext 1.x the expansion widget would render to the right of both of these div elements and the title bar was consistent with regular, non-collapsed, title bars. With your extension however the expansion widget is rendering to the left of my "float"right" div and it looks kind of weird.

If I configure the title to be the same as collapsedTitle this does not happen, so I am imagining that there will be some small tweak that can be done to make this work the same.

Other than this small problem it is great to again be able to render a title when my North region is collapsed.

Thanks,

Scott

antimatter15
5 May 2008, 2:04 AM
SVG is supported natively by Firefox, Opera, and Safari. VML is a similar standard supported natively in IE. Or, you could just use *flash*

jay@moduscreate.com
5 May 2008, 3:02 AM
antimatter15,

that requires a client!!!


seade,

I need to add 'setTitle' methods

seade
20 May 2008, 6:36 PM
seade,

I need to add 'setTitle' methods
Is that just a cut and paste from somewhere else? I would like to get this working nicely in the near future if possible.

Cheers,

Scott

fangzhouxing
21 May 2008, 1:27 AM
Thanks for sharing!

Usage example:


Ext.apply(this, {
layout : 'tdgi_border', <---- just here!
items : [{
region : 'north',
title : '对话框功能演示',
ctCls : "j-toolbar-dark",
html : 'here is north',
height : 150,
tbar : this.getTbar(),
split : true
}, {
region : 'west',
title : '左侧面板',
collapsible : true,
ctCls : "j-toolbar-dark",
html : 'here is west',
width : 100,
collapsedTitle : true, <----- and here!
split : true

extjs3user
14 Jul 2009, 3:38 AM
Is it possible to have tooltip for expand/collapse button of panel?

Please help.

mschwartz
14 Jul 2009, 4:50 AM
antimatter15,

that requires a client!!!


http://www.adobe.com/products/player_census/flashplayer/version_penetration.html

Less than 1% of browsers don't have flash installed...

~o)

jay@moduscreate.com
14 Jul 2009, 4:55 AM
http://www.adobe.com/products/player_census/flashplayer/version_penetration.html

Less than 1% of browsers don't have flash installed...

~o)

I was referring to the SVG client, silly. :>

mschwartz
14 Jul 2009, 5:22 AM
I was referring to the SVG client, silly. :>

He mentioned flash.

BTW, the IE Canvas thing is superior to the Canvas built into other browsers.

jay@moduscreate.com
14 Jul 2009, 5:31 AM
Anywho - are you talking about VML?

IE8 does not include canvas:
http://blogs.msdn.com/ie/archive/2008/11/19/ie8-what-s-after-beta-2.aspx

mschwartz
14 Jul 2009, 5:37 AM
Anywho - are you talking about VML?

IE8 does not include canvas:
http://blogs.msdn.com/ie/archive/2008/11/19/ie8-what-s-after-beta-2.aspx

There's a 3rd party plugin for IE, last time I checked.

http://excanvas.sourceforge.net/

Modern browsers like Firefox, Safari, Chrome and Opera support the HTML5 canvas tag to allow 2D command-based drawing. ExplorerCanvas brings the same functionality to Internet Explorer. To use, web developers only need to include a single script tag in their existing web pages.

cgountanis
21 Sep 2009, 6:29 AM
This is great and so required. Has it put in the main product yet?

jay@moduscreate.com
22 Sep 2009, 7:25 AM
Not it has not. I need to rework this for Ext 3 and refactor it as a plugin.

cgountanis
22 Sep 2009, 7:31 AM
Thanks for the input I have found a work around using less collapse panels to get the same thing done until then. Thanks!

dtex-lab
21 Apr 2010, 6:16 AM
Not it has not. I need to rework this for Ext 3 and refactor it as a plugin.

Hi ..
there is a new version of your great extension strictly related to ExtJS 3.2.x?
I'm using it with 3.2 and it is working.. but maybe it is not "optimized" for 3.2

I see you override the onLayout function.. and so maybe the extjs team optimized it with 3.2..

Maybe I can try to porting your change to 3.2.. but if someone just done it..... I don't want to reinvent the wheel....