PDA

View Full Version : how to use layout or other metaphors to horizontally arrange buttons.



geewhizbang
10 Aug 2009, 11:13 PM
I have tried to look at the example where layouts were used to align items, but they use a button to apply them indirectly so it isn't clear at all how you implement this without the button.

I have a textbox with label and buttons. The textbox should be on the left and the buttons right justified, or just all three to the left.
The current arrangement just stacks them. Everything I've tried with layout prevents them from rendering at all, so I am showing the raw items.



var ButtonLayout = new Ext.Container
(
{

items:
[
{
html: '<div class="SD_lblA">Post Title</div><div><input type="text" id="tbPostTitle" style="width: 600px"></div>',
width: 620
},{
text: 'Save Post',
xtype: 'button',
handler: SavePost
},{
text: 'Cancel',
xtype: 'button',
handler: CancelPost
}
]
}
);

evant
10 Aug 2009, 11:22 PM
Look at the hbox layout example.

geewhizbang
11 Aug 2009, 6:37 AM
I did, but as I said, it applies the layout using a script that runs when you click the buttons.

I would rather do this directly.

There isn't anything anywhere on the vast document page that lists the layout types in one place and shows you an actual example of using each. It would take someone about an hour or two to do this, and then you wouldn't have to put up with questions like this.

Merely listing properties and methods of the code only goes so far.

Condor
11 Aug 2009, 6:53 AM
Something like:

var ButtonLayout = new Ext.Container({
layout: 'column',
items: [{
xtype: 'box',
autoEl: {tag: 'div', children: [
{tag: 'div', cls: 'SD_lblA', cn: 'Post Title'},
{tag: 'input', type: 'text', id: 'tbPostTitle', style:'width: 600px'}
]},
width: 620
},{
text: 'Save Post',
xtype: 'button',
handler: SavePost,
width: 75
},{
text: 'Cancel',
xtype: 'button',
handler: CancelPost,
width: 75
}]
});

Animal
11 Aug 2009, 7:11 AM
I did, but as I said, it applies the layout using a script that runs when you click the buttons.

No it doesn't.