PDA

View Full Version : Right-aligned items in the toolbar



soad
28 Mar 2007, 10:27 PM
Greetings all,

today I have encountered a problem of aligning some items in the toolbar to the right. I didn't find a way to do this in current implementation of Ext. But I was able to solve this issue by subclussing Ext.Toolbar.

Here is the code.



Ext.namespace('MyNS');
MyNS.Toolbar = function (container, buttons, config)
{
Ext.apply(this, config);
this.el = Ext.get(container);
if(this.cls)
{
this.el.addClass(this.cls);
}

var html = '<div class="x-toolbar x-small-editor clearfix">';
html += '<table style="width: 100%" cellspacing="0"><tr>';
html += '<td style="width: 99%;"><table cellspacing="0"><tr class="left"></tr></table></td>';
html += '<td><table cellspacing="0"><tr class="right"></tr></table></td>';
html += '</tr></table>';
html += '</div>';

this.el.update(html);
this.trLeft = this.el.child('tr.left', true);
this.trRight = this.el.child('tr.right', true);
this.leftAligned = true;

var autoId = 0;
this.items = new Ext.util.MixedCollection(false, function(o){
return o.id || ("item" + (++autoId));
});
if(buttons)
{
this.add.apply(this, buttons);
}
}

MyNS.extend(xooChat.Toolbar, Ext.Toolbar, {
nextBlock: function ()
{
var td = document.createElement('td');
var tr = this.leftAligned ? this.trLeft : this.trRight;
tr.appendChild(td);
return td;
}

, switchLeft: function ()
{
this.leftAligned = true;
}

, switchRight: function ()
{
this.leftAligned = false;
}
});

Animal
28 Mar 2007, 11:31 PM
I posted a suggested enhancement to Toolbar which allowed a "align" config option on the toolbar to provide default alignment, and an "align" option on added buttons:

http://www.yui-ext.com/forum/viewtopic.php?t=4026#17900

The js file there is a replacement for exa,ples/menu/menus.js

The new Toolbar class is just 3 lines longer than the old one.

soad
28 Mar 2007, 11:53 PM
Your approach seems to be a little bit better, but in order to leave ext-all.js unchanged I will have to override all the methods calling nextBlock().

P.S.

I think this is very useful modification and Jack should include it in the next revision.

soad
1 Apr 2007, 9:02 PM
Have just downloaded the new Beta.

The only difference in Toolbar code is addSpacer() method.

Still no way to right align the items :((

jack.slocum
1 Apr 2007, 9:32 PM
It is indeed on the list and will be in a coming rev. :)

soad
2 Apr 2007, 5:25 AM
Sounds great!