PDA

View Full Version : Ext.ux.layout.ClusterLayout - A row oriented table layout



johnO
24 Mar 2008, 10:07 PM
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
25 Mar 2008, 1:43 AM
Hi,

plz share your office toolbar

very nice

TheItalianJob
25 Mar 2008, 1:54 AM
great work!!!
Please share your ribbon bar!;)

galdaka
25 Mar 2008, 11:54 PM
Live demo please!

Greetings,

wm003
26 Mar 2008, 1:40 AM
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
27 Mar 2008, 3:26 AM
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
27 Mar 2008, 4:00 AM
=D>realy good job

wm003
27 Mar 2008, 4:53 AM
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
2 Apr 2008, 4:35 AM
A menu implementation has been added to the first post.

gimbles
2 Apr 2008, 5:42 PM
awesome

wm003
2 Apr 2008, 9:05 PM
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
4 Apr 2008, 4:44 PM
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
30 Sep 2008, 1:48 PM
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
30 Sep 2008, 11:57 PM
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
30 Sep 2008, 11:58 PM
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
13 Jan 2009, 5:18 PM
@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.