PDA

View Full Version : Suggestion: Greedy toolbar spacer



Belgabor
21 Feb 2007, 5:34 PM
Hi,

I have a (hopefully) small suggestion for Ext.Toolbar. Would it be possible to create a greedy spacer item? The effect I'm going for is having a few menus at the left end of the bar and a text box (quick search feature) on the right end. I've tried to achive the effect with addDom, but as I cannot access the wrapping table cell, width: 100% doesn't work :p.
Of course any advice on how to achive the desired effect without any change to ext is also appreciated.

Belgabor
22 Feb 2007, 8:52 AM
I've now solved this with the following code:


tb.addDom({
tag: "div",
cls: "x-tb-greedysep"
});
var seps = Ext.query("//*[@class='x-tb-greedysep']");
try {
for(el in seps)
seps[el].parentNode.style.width = "100%";
} catch (e) {}


This let to some questions:

Does anyone know why the parent XPath axis doesn't work? "//*[@class='x-tb-greedysep']/.." and "//*[@class='x-tb-greedysep']/parent::*" both gave me parsing errors.
Wouldn't it be better if Ext.query returned a CompositeElement?

ximo
20 Apr 2007, 5:17 PM
Thanks for this! Works great in Opera 9.20 and FF 2 on Mac OS X, but not in Safari 2 :-/

Would be really sweet to have something like this + right/left alignment of elements in Ext.Toolbar!

jack.slocum
22 Apr 2007, 4:05 AM
I've now solved this with the following code:

Does anyone know why the parent XPath axis doesn't work? "//*[@class='x-tb-greedysep']/.." and "//*[@class='x-tb-greedysep']/parent::*" both gave me parsing errors.
Wouldn't it be better if Ext.query returned a CompositeElement?


1. That level of XPath isn't supported. In fact no keywords/axis are.
2. Ext.select() returns a composite

ximo
25 Apr 2007, 7:26 AM
You don't have to inject a custom <div> into the toolbar, just use the Toolbar.Spacer (which only adds a teeeny weeny spacer as of now). I found it in the docs, but all it does is add a few pixels of spacing. Would be nice with a config option to make it behave like a greedy old spacer :P

So:


var tb = new Ext.Toolbar();
tb.add(
new Ext.Toolbar.Button({
text: 'Left aligned button'
}),
new Ext.Toolbar.Spacer(),
new Ext.Toolbar.Button({
text: 'Right aligned button'
})
);

var seps = Ext.query("//*[@class='ytb-spacer']");
try {
for(el in seps)
seps[el].parentNode.style.width = "100%";
} catch (e) {}

jsakalos
28 Apr 2007, 5:48 AM
I use this statement for greedy spacer:



Ext.get(Ext.get(toolbar.addSpacer().getEl()).dom.parentNode).setStyle('width', '100%');

mdelanno
22 May 2007, 11:47 AM
tb.addSpacer().getEl().parentNode.style.width = '100%';

sjivan
21 Jul 2007, 11:25 AM
Doesn't Toolbar#addFill() give you this capability?

http://extjs.com/deploy/ext/docs/output/Ext.Toolbar.html#addFill

Sanjiv

JorisA
21 Jul 2007, 2:06 PM
Since 1.1 it does indead :)

jack.slocum
23 Jul 2007, 1:30 AM
Also, adding '->' to the toolbar does as well.