View Full Version : Form fieldlabel : button (or component) instead of text as field label

14 Sep 2009, 6:23 AM
Hi all

I been trying to find a solution to do the following but no luck yet.

I have a simple(ish) form however the first two fields instead of the fieldLabel being text I need a button. I tried playing round with different layouts to get the desired effect but so far no joy, the ideal layout would be formLayout however the fieldLabel only accepts a string.

I looked into the source code to see if i could cope up with a smart override that would accept a component and use that in place however the code is a bit obscure and have not yet has any success.

A quick and dirty solution (have not tested) is to specify the following as the fieldLabel (just an idea have not tested it yet):

fieldLabel: '<a href="javascript:App.doButtonClick();">linkButton</a>'

However I prefer to use a button component rather that something like that.


Can anyone give any ideas or help? it would be most appreciated.

The main is to have a layout that the first column is right justified and as wide as its widest component ans the second column to expand as wide as possible (stretch).


14 Sep 2009, 8:23 AM
Using Containers with other Layouts (column?), you can do this.

14 Sep 2009, 8:31 AM
Quick and dirty:

var otherContainer = {
xtype : 'container',
layout : 'hbox',
style : 'margin-bottom: 5px;',
items : [
xtype : 'container',
width : 85,
items : {
xtype : "button",
text : "Click to focus",
width : 70,
handler : function() {
xtype : 'textfield',
flex : 1,
id : 'textField2'

var form = {
xtype : 'form',
defaultType : 'textfield',
defaults : { anchor : '-5' },
labelWidth : 80,
items : [
fieldLabel : 'Text field 1'
fieldLabel : 'TextField 3'


new Ext.Window({
layout : 'fit',
items : form,
width : 400,
height : 300

14 Sep 2009, 10:10 PM
Thanks for your reply [email protected]

This solutions is clear and I tried something similar the only issue is that the button text is dynamic and I can not hard code the width of the first column for this reason.

Perhaps the wording in my original post was not clear enough, In sorry. I have a good mind to use this solution and just have it as a limitation that the first column can only be so wide otherwise content will be overlapped.

Is there any way to determine a components width before it is rendered? I seriously doubt it.

Thank you again for your suggestion.



14 Sep 2009, 11:20 PM
Hi jgarcia,

I am new to GWT.We are using EXT GWT in our project to create a small customer care web.I am facing lots of problem.Problem mentioned are:

1. We have one tab widget.In one Tab item ,we have used 3 vertical Panel.

2.First to display label,Second panel i have created a Form where several fields and 2 button is ther.One is SUBMIT and one is RESET.On press of SUBMIT we have to display one table in 3 Vertical Panel and on reset it get removed.

As of now we are able to create a dummy table,but not able to remove on RESET click event and not able to generate it on clik of SUBMIT button.

plzz help me in this regard.I have tried all the GWT gallery samples and could able to do till now.Can you plzz guide me in this regard