Ext.form.Button

[mjlecomte]

In any case, you may want to consider the code change I suggested to Ext.form.BasicForm in post #34 for a future release.

@mschwartz
Do you realize mystix is a volunteer? It's not like he has control over what goes into future releases. There's a feature request forum. Not sure that your post will garner much attention buried inside this thread.

[ignatius]

Ach! The code to test for fieldLabel is in the 3.0 branch and not the 2.2 branch, so it won't work yet! That's a bit of a mismatch in modification procedure by Jack (or whoever authored that fix). The change should have gone into both branches.

Oh well. I'll update the doc comments in the 3.0 branch.

Not sure if this is the place to flag this... but it's still not in the 2.2.1 release.
BTW, the isFormField property works fine in 2.2.1. Either it should be documented as a 2.2.x feature or fieldLabel needs to be fixed for 2.2.x

[ignatius]

whoops. my mistake.

you can avoid having to write the validate function on every Ext.Button config by overriding its prototype:

Ext.override(Ext.Button, {
    validate: function() {
        return true; // or some custom validation routine
    }
});

after which you don't need your check anymore.

Note: Also need to override clearInvalid and getName with Ext.emptyFn for getForm().load to work....

Ext.override(Ext.Button, {
    validate: function() {
        return true; // or some custom validation routine
    }
    ,clearInvalid:Ext,.emptyFn
    ,getName:Ext.emptyFn
});

[aleczapka]

ButtonField = Ext.extend(Ext.form.Field,  {
	defaultAutoCreate  : { 
		tag: 'div' 
	},
	onRender: function (ct, position) {
            if(!this.el){
                var cfg = this.getAutoCreate();
                if(!cfg.name){
                    cfg.name = this.name || this.id;
                }
                if(this.inputType){
                    cfg.type = this.inputType;   
		}
                this.el = ct.createChild(cfg, position);
            }

		this.button =  	new Ext.Button({
			renderTo : this.el,
			text     : this.text,
			iconCls  : this.iconCls || null,
			handler  : this.handler || Ext.emptyFn,
			scope    : this.scope   || this
		})
	},
	getValue : Ext.emptyFn,
	setValue : Ext.emptyFn
});

This worked like a charm, example:

	,items: [
		new ButtonField({
			text: 'mybutton'
		})
	,{...}]

Thank you jgarcia

[andreros]

Hello all!

I downloaded this component (thanks Radu094 for this good ideia) but after using it a little bit, I found a bug. When we disable the whole form, the button still fires the "onClick" event, even though it is disabled. For this issue I found the following solution:

Ext.ux.FormButton = Ext.extend(Ext.form.Field, {

    //private
    initComponent: function() {
        Ext.ux.FormButton.superclass.initComponent.call(this);
    },
    
    defaultAutoCreate: { 
        tag: 'div' 
    },

    onRender: function (ct, position) {
        
        if(!this.el){
            var cfg = this.getAutoCreate();
            if (!cfg.name) { cfg.name = this.name || this.id; }
            if (this.inputType) { cfg.type = this.inputType; }
            this.el = ct.createChild(cfg, position);
            //Undefined dom value bug fix
            this.el.dom.value = '';
        }

        this.button = new Ext.Button({
            renderTo : this.el,
            text     : this.text,
            iconCls  : this.iconCls || null,
            tooltip  : this.tooltip,
            minWidth : this.minWidth,
            maxWidth : this.maxWidth,
            handler  : this.handler || Ext.emptyFn,
            action     : this.handler || Ext.emptyFn,
            scope    : this.scope
        });
        
    },
    
    onDisable: function() {
        Ext.ux.FormButton.superclass.onDisable.call(this);
        this.button.disable();
        this.button.scope = this;
        this.button.handler = Ext.emptyFn;
    },
    
    onEnable: function() {
        Ext.ux.FormButton.superclass.onEnable.call(this);
        this.button.enable();
        this.button.scope = this;
        this.button.handler = this.button.action;
    },

    reset: Ext.emptyFn,
    
    getValue : Ext.emptyFn,
    
    setValue : Ext.emptyFn
    
}); 

Hope you find this useful.

Regards,
André.

[yinkan.li@oocl.com]

thanks a lot.

i think Extjs should include Ext.form.Button in the future.

this is a common requirement, isn't it?

Ext.Button is not an <input> tag in html so this should be a standard component ...

another issue is that we can not use it in Ext designer ...

but that doesn't matter ...

[brahmareddy]

how to remove the default LabelSeparator(