Ext.form.Button

[Radu094]

I often got myself into a situation where I needed to add a button into a form.

Next to all the checkboxes and text fields, it would have been so usefull to have a Ext.form.Button.

Yes, I know you can addButton() to a form, but those go down to the bottom and I needed some of the buttons to "stay in context" and be rendered inside the fieldset.

Anyway... long story short I've merged part of Ext.Button and Ext.form.Field into a new class.

form.add( 
                new Ext.form.Button(
                {fieldLabel:'Reset Password',
                 text:'Reset',
                 icon:'key.gif',
                 cls:'x-btn-text-icon',
                 handler:function(){alert('clicked');},
                 descriptionText:'click here to reset your password'
                 })); 

[carmen]

Hoorah. This is exactly what I needed too. You rock.

[JohnPeterson]

Thanks! This worked perfectly for me, awesome work

[m3zaman]

Thanks!

Helped me lot.

Zaman

[kjh]

thanks, very helpful!

[dddu88]

Hi, all,
One issue to me is that I donot want fieldLabel for the button, but I cannot find a way to get rid of the label, if I configure it to hidelabel: true, then the button will not be lined up with the TextField, if I comment out the fieldLabel, then there will be a ":" shown up as an empty label, anybody has a way to solve this problem? Thanks in advance.

My code is like this:

var formbtn = new Ext.form.Button( 
                {//fieldLabel:'Query database', 
                 hideLabel : true,
                 text:'Retrive', 
                 icon:'images/key.gif', 
                 cls:'x-btn-text-icon', 
                 handler:function(){alert('clicked');}
                 //descriptionText:'click here to reset your password' 
                 });  



    var formpanel = new Ext.FormPanel({
        labelAlign: 'top',
        frame:true,
        title: 'Multi Column, Nested Layouts and Anchoring',
        bodyStyle:'padding:5px 5px 0',
        width: 600,
        height:80,
        region:'north',
        items: [{
            layout:'column',
            items:[{
                columnWidth:.8,
                layout: 'form',
                items: [{
                    xtype:'textfield',
                    fieldLabel: 'Identification',
                    name: 'transID',
                    anchor:'80%'
                }]
                },{
                columnWidth:.2,
                layout: 'form',
                items: [formbtn]
                }]
        } ]
       // bbar:tb

    });

[say2paul]

I am also facing the same strange problem

[Lev_A]

Hi, all,
One issue to me is that I donot want fieldLabel for the button, but I cannot find a way to get rid of the label, if I configure it to hidelabel: true, then the button will not be lined up with the TextField, if I comment out the fieldLabel, then there will be a ":" shown up as an empty label, anybody has a way to solve this problem? Thanks in advance.

My code is like this:

var formbtn = new Ext.form.Button( 
                {//fieldLabel:'Query database', 
                 hideLabel : true,
                 labelSeparator : '',

                 text:'Retrive', 
                 icon:'images/key.gif', 
                 cls:'x-btn-text-icon', 
                 handler:function(){alert('clicked');}
                 //descriptionText:'click here to reset your password' 
                 });  
    });

From Docs:
labelSeparator : String
The standard separator to display after the text of each form label (defaults to the value of Ext.layout.FormLayout.l...
The standard separator to display after the text of each form label (defaults to the value of Ext.layout.FormLayout.labelSeparator, which is a colon ':' by default). To display no separator for this field's label specify empty string ''.

[dawesi]

can you please add a screenshot or demo to your post, thanks :-)

[dddu88]

Lev_A,

Thanks very much, your approach to set labelSeparator : '' really works, the button is lined up with the TextField very well, the only thing is the distance between the TextField and Button is a little far away, I used anchor:'80%' for the Field and 20% for the button, it seems like the button is put in the center of the column, is there a way to put the button to the most left of the column?

Thanks in advance.