PDA

View Full Version : How to align items inside an fbar in ext 3.0?



elishnevsky
20 Apr 2009, 10:43 AM
I remember one of the presenters at the conference showed a way to use the new fbar panel configuration option and split items inside of it. When I assign fbar option an array of items, they all are aligned to the right and I can't split them. '->' doesn't work. Does anyone remember or know how to do it?

Animal
20 Apr 2009, 10:47 AM
I think this is the buttonAlign config of Panel.

Animal
20 Apr 2009, 10:48 AM
Oh, I see, you want to split the alignment. You'll have to poke in there with Firebug to see what's there, and then postprocess it with DomQuery.

mjlecomte
20 Apr 2009, 10:53 AM
Can you post your code what you're trying to do?

koko2589
20 Apr 2009, 11:42 AM
}, '->',
'-',{

elishnevsky
20 Apr 2009, 1:33 PM
Can you post your code what you're trying to do?

Absolutely.


var win = new Ext.Window({
title: 'Sample Window',
width: 500,
height: 300,
fbar: [{
xtype: 'checkbox',
boxLabel: 'Check to do something useful'
}, {
text: 'Update'
}, {
text: 'Cancel'
}]
});

win.show();
I'm trying to split the checkbox and the buttons in the footer, so that the checkbox is aligned to the left and the buttons are to the right. I should be very straightforward, from what I remember seeing at the conference.

mjlecomte
20 Apr 2009, 5:54 PM
Edit: I wasn't at the conference, so this may be completely off base.

Yeesh. I wrote an override only to figure this out afterwards.



var p = new Ext.Window({
height:250,
width: 500,
buttonAlign: 'left', // anything but 'center' or 'right' and you can
// use "-", and "->" to control alignment
bbar: new Ext.Toolbar({
items: [{
text: 'bbar Left'
},'->',{
text: 'bbar Right'
}]
}),
fbar: [{
text: 'fbar Left'
},'->',{
text: 'fbar Right'
}]
});
p.show();

elishnevsky
20 Apr 2009, 6:20 PM
Ha-ha... that was so easy! I can't believe I didn't think about it. Thanks buddy :)
Consider this topic closed.

mschwartz
24 Apr 2009, 7:54 AM
It's be nice if you can use '->' twice in a config, too.

Something like:



tbar = new Ext.Toolbar({
items: [
{ text: 'button all the way left' },
'->',
{ text: 'button centered' },
'->',
{ text: 'button all the way right' }
]
})