How to align buttons beneath a dynamic form (populated from datasource)

[kieser]

At the moment I am using trial and error with the cell borders set so that I can try to match two forms' widths to each other! There simply has to be a better of doing this.

What I have is a dynamic form populated from a data source. I set the datasource dynamically, so the form contents can change.

The form displays no problem. There are two columns, the left one being used for labels which smartGWT automatically populates and the right hand column is used for the data object. So far so good.

However, I need two buttons ("new" and "update") beneath the form. I want them to line up nicely beneath the data objects in the dynamic form.

So what I have done is create a second dynamic form and add the buttons to them. And by trial and error I am working out what the correct column widths should be. However, as smartGWT has complete control over the dynamic form that is populated from the datasource, what works for me in development right now may not work moving forward as datasources may change and smartGWT may choose to give different widths to the fields in the future.

So I want to be able to tell smartGWT to use the same widths for my buttons. But how to do this?

Here is my code:

	private static class CompoundEditor extends HLayout {  
		    private DataSource datasource, lookup;  
		    private DynamicForm form;  
.
.
.
		        form= new DynamicForm();
		        form.setDataSource(datasource);
.
.
.
		        saveButton = new ButtonItem("Update");  
		        saveButton.addClickHandler(new ClickHandler() {  
.
.
.
		        });  

		        newButton = new ButtonItem("New");
		        newButton.addClickHandler(new ClickHandler() {  
.
.
.
		        });  
		        editorLayout.addMember(form);

		        DynamicForm buttons = new DynamicForm();
		        buttons.setNumCols(4);
		        buttons.setColWidths("85","50","50","*");
		        
		        newButton.setStartRow(true);
		        newButton.setEndRow(false);
		        newButton.setColSpan(2);
		        newButton.setAlign(Alignment.RIGHT);

		        saveButton.setStartRow(false);
		        saveButton.setEndRow(true);
		        saveButton.setAlign(Alignment.RIGHT);

		        buttons.setFields(newButton,saveButton);
		        editorLayout.addMember(buttons);  
		        editorLayout.setWidth(280);

You can see that I have had to declare FOUR columns for the form that displays the buttons. This is because smartGWT places data objects onto the dynamic form that are actually not as wide as the column that it's placing them into. And this means that I cannot simply get the column widths of the dynamic form and use that. I have to try and match the placement of the data objects which are contained WITHIN the dynamic form right hand column.

This is what I am hoping to detect programmitically so that if smartGWT moves those data objects or resizes them, my buttons will adjust accordingly.

[Isomorphic]

It's not clear what appearance you want or what makes it difficult. A screenshot would probably help.

[ljw1001]

I'm not exactly sure what the OP wants, but i thing it's similar to what I want. I've attached a screnshot. I have a two column form and want the two buttons to appear on the same row instead of one above the other.

Any help is much appreciated

[lazinskip]

ljw1001: You need to call setStartRow() and setEndRow() methods for ButtonItem variable with "false" argument

[ljw1001]

worked perfectly.

[ducloi89]

thanks !!!

[kyle.lix7]

Originally Posted by lazinskip

ljw1001: You need to call setStartRow() and setEndRow() methods for ButtonItem variable with "false" argument

Worked perfectly. Thanks!

[amcculley]

I have never used a ButtonItem in a form... I just use regular buttons in a layout. What is the advantage of using Buttons embedded in the form?

[delshole]

Originally Posted by amcculley

I have never used a ButtonItem in a form... I just use regular buttons in a layout. What is the advantage of using Buttons embedded in the form?

Your buttons get laid out along with your other form items, instead of in a layout-controlled area by themselves.