PDA

View Full Version : [SOLVED] Please help! Form Button layout / alignment



iloveext
14 Oct 2007, 5:05 PM
Dear all,

In a form, is it possible to align a button left while for another button to align it right?

For example:
Instead of having two buttons together like this: [Button][Button]

It becomes like this:
[Button]______________________________[Button]

The Grid head panel has a filler object which fills in the space to create this layout, but there doesn't seem to be one for the form.

How would you do this? Thanks very much!

iloveext
15 Oct 2007, 9:54 PM
seems like no one knows the answer... anyone? :((

J.Demartino
15 Oct 2007, 10:17 PM
I've not done it myself, but can you set the button's style directly after the form is rendered?

for ex,

MyButton.el.setLeft( '15px');

iloveext
15 Oct 2007, 11:03 PM
I've not done it myself, but can you set the button's style directly after the form is rendered?

for ex,

MyButton.el.setLeft( '15px');


Thanks for your reply, I tried your suggestion but I can't seem to get the El for the button. I tried both

var buttonEl = MyButton.el;
and
var buttonEl = MyButton.getEl();

and for both times buttonEl is undefined when I check in Firebug. This seems pretty strange as the getEl function seems like just a standard method for the button.

tryanDLS
16 Oct 2007, 10:28 AM
Are you sure the button has been rendered when you try to get the el?

iloveext
16 Oct 2007, 6:27 PM
The solution that I did was modifying the CSS layout and setting the style for the table that contains the button.

Firstly define my own css style class:


.x-form .x-form-btns-ct .x-form-btns-fillall table{width:100%;clear:none;}

and when you create the form, in the config section put in



buttonAlign: 'fillall'


so that it reads in the new CSS class that you defined above.

This expands the whole table into 100%. Then get the Element with Ext and float the button to the left.


var clearBtnTableEl = Ext.get('clearcartBtn');
clearBtnTableEl.setStyle('cssFloat', 'left');