PDA

View Full Version : Space Between buttons on tbar



joefox
18 Jun 2009, 7:07 AM
Is there a way to add a 5px or 10px space between tbar buttons i hadd?
Right now they are all super close to each other.

Condor
18 Jun 2009, 7:13 AM
Sure, simply add an {xtype: 'tbspacer'} which you can also write as ' ' (shortcut, just like '-' and '->').

dlbjr
18 Jun 2009, 7:30 AM
function setSpace(amount) {
var result = '';
for (i = 0; i <= amount; i++) {
result =+ '&nbsp;';
}
return result;
}

//Use the following in a tbar
setSpace(3)

joefox
18 Jun 2009, 7:31 AM
Sure, simply add an {xtype: 'tbspacer'} which you can also write as ' ' (shortcut, just like '-' and '->').

well right now i have an image in front of my buttons so im already using the xtype icons...

i cant have 2 icon images for my buttons can i?

joefox
18 Jun 2009, 7:34 AM
where do i put that in my tbar?



tbar:[{
text: 'Remove All',
iconCls: 'remove_image',
handler: testhandleer
},

dlbjr
18 Jun 2009, 8:52 AM
tbar:[{
text: 'Remove All',
iconCls: 'remove_image',
handler: testhandleer
},
setSpace(3),
{
text: 'Another Item',
iconCls: 'remove_image',
handler: testhandleer2
}



Here is how I would lay out the objects:




var action1 = new Ext.Action({
text: 'Remove All 1',
iconCls: 'remove_image',
handler:testhandleer1
});

var action2 = new Ext.Action({
text: 'Remove All 2',
iconCls: 'remove_image',
handler:testhandleer2
});

tbar:[action1, setSpace(3), action2]

mjlecomte
18 Jun 2009, 7:44 PM
Sure, simply add an {xtype: 'tbspacer'} which you can also write as ' ' (shortcut, just like '-' and '->').

Also note that the width is configurable, see the top of
http://extjs.com/deploy/ext-3.0-rc2/docs/?class=Ext.Toolbar.Spacer

dlbjr
19 Jun 2009, 4:45 AM
Observe - The width is only in Version 3 to my knowledge

mjlecomte
19 Jun 2009, 6:06 AM
Observe - The width is only in Version 3 to my knowledge

Yes, I think so. I figured I was safe with a post in the 3.x forum, but yes, you're right IIRC.