Ext.ux.layout.ClusterLayout - A row oriented table layout

[johnO]

After looking at http://extjs.com/forum/showthread.php?t=25723#10 it seemed sensible to implement a multi-line layout that presents a toolbar in the way that Microsoft has done their ribbon. This implementation achieves this by changing the TableLayout to process items based on a row constraint (rather than the TableLayout column constraint).

The result is this table layout which is called a "cluster" so that it is unique. The cells are added top to bottom - left to right.

An additional feature is added to ensure that there are enough rows to contain the rowspan: a blank cell is added to rows where needed.

Updated picture is attached.

Two additional features are planned:
1. A two-state collapse algorithm that monitors the right edge with respect to the screen.
2. An implementation of short-cut keys along the lines of Office 2007.

Attached in the zip is the layout with two simple samples which should be extracted under the Ext examples folder. Also attached is an initial view where this layout is applied to the new feature created by Animal in the thread above.
________

Menu using the cluster layout has been added with the following files:
1. CSS for 32x32 px icons with text below the icon - toolbar.button.32px.css
2. Simple example script - clusterMenu.html/clusterMenu.js

SwitchButton is not functioning in IE but is working fine in Firefox and Safari.

[ajaxvador]

Hi,

plz share your office toolbar

very nice

[TheItalianJob]

great work!!!
Please share your ribbon bar!;)

[galdaka]

Live demo please!

Greetings,

[wm003]

Good work! Your ribbon looks quite promising. I think there is not much to do to make it look more like original o2007 ribbon as tried in this post (http://extjs.com/forum/showthread.php?p=77377#post77377) with this screenshot (http://extjs.com/forum/attachment.php?attachmentid=2293&d=1193215781)

So if you don't mind, it would be very nice if you share you ribboncode aswell (and maybe finish it to a more o2007 looking one :D) Anyway it looks very very good by now!

[johnO]

I'll post a version of the ribbon soon. I am trying to get the styling to work on large icons, but have not managed to get the css inheritance to work. The ribbon shown is just a toolbar with layout: 'cluster' in a tab pane which is in a viewport with layout: 'border'. I'll post a simple example soon - not quite ready yet!

[ajaxvador]

=D>realy good job

[wm003]

I am trying to get the styling to work on large icons, but have not managed to get the css inheritance to work.

I ran into similiar problems. You cannot use the original Button-background gfx as they are in all states created for a fixed button height. You can still set a higher "height"-value in the css but without creating another "bigbutton"-gfx it looks just ugly.

..can't wait to see the final result =P~

[johnO]

A menu implementation has been added to the first post.

[gimbles]

awesome

[wm003]

SwitchButton is not functioning in IE but is working fine in Firefox and Safari.

Did you adopt it from the Simple Task2 Example from the 2.0.2 Distribution? It works in there, maybe Jack can tell, why its not working for you in IE....I'm gonna test it myself in a few minutes

[johnO]

Did you adopt it from the Simple Task2 Example from the 2.0.2 Distribution

Yes, SwitchButton is from the 2.0.2 location: \ext-2.0.2\air\samples\tasks\js\SwitchButton.js

[bernex]

MY BUGFIX! for IE 6-7
for Ext.SwitchButton

onRender : function(ct, position){

var el = document.createElement('table');
el.cellSpacing = 0;
el.className = 'x-rbtn';
el.id = this.id;

var row2 = document.createElement('tbody');
el.appendChild(row2);
var row = document.createElement('tr');
row2.appendChild(row);

[Animal]

Very impressive work.

Before you go too far, you could purchase Premium Membership and see what the 3.0 branch has done with Toolbars.

It implements a layout with grouping with perhaps a similar concept.

http://i131.photobucket.com/albums/p286/TimeTrialAnimal/bigtoolbar.jpg

[Animal]

As you can see, I don't think Jack approves of large toolbars!:)) I don't really know what he's got against them!

[dawesi]

@Animal... might be worth looking at how the 3.0 version works... this one works in 2.x tho which is super cool... I like this one better, but can see how the 3.0 controls will help with future development.

@JohnO... I like your look and feel better than M$'s (ie the extjs tabs in the pic)... and now people everywhere can have usable menus for a change!! Well done.