[FIXED] Help with Button aligned to Field

[primolan]

Hello!

I saw a lot of people asking about a field with a button by its side. I actually followed the idea from fileuploadfield and I did some code here.

It works fine with TextField but it fails at onResize method with Trigger fields. I really don't know why! Please, help me! Thanks in advance!

Here is the code:

Ext.form.Field.prototype.onRender =  Ext.form.Field.prototype.onRender.createSequence(function(thisContainer,  thisPosition){
    if (this.buttonConfig) {
        this.wrap = this.el.wrap({
            style: 'clear: both;'
        });
        this.el.applyStyles('float: left;');
        this.button = new Ext.Button(Ext.apply(this.buttonConfig, {
            renderTo: this.wrap,
            style: 'float: right;'
        }));
    }
});

Ext.form.Field.prototype.onResize =  Ext.form.Field.prototype.onResize.createSequence(function(adjWidth,  adjHeight, rawWidth, rawHeight){
    if (this.buttonConfig) {
        this.wrap.setSize(adjWidth, adjHeight);
        var elWidth = this.wrap.getWidth() -  this.button.getEl().getWidth() - (this.defaultTriggerWidth ?  this.defaultTriggerWidth : 0) - this.buttonConfig.buttonOffset;
        this.el.setSize(elWidth, adjHeight);
    }
});

//var field = new Ext.form.TextField({
var field = new Ext.form.ComboBox({
    renderTo: Ext.getBody(),
    buttonConfig: {
        buttonOffset: 3,
        iconCls: 'icon-add',
        handler: function(thisButton) {
            alert('button handler');
        }
    },
    store: ['Rodrigo', 'Primolan'],
    width: 300
});

[primolan]

I spent a whole day! But now its working!

I missed onResize method on TriggerField (plus trigger width count). Now its working!

I hope you all enjoy!

// onRender method
Ext.form.Field.prototype.onRender =  Ext.form.Field.prototype.onRender.createSequence(function(thisContainer,  thisPosition){
    if (this.buttonConfig) {
        this.wrapper = this.el.wrap({
            style: 'clear: both;'
        });
        this.el.applyStyles('float: left;');
        this.button = new Ext.Button(Ext.apply(this.buttonConfig, {
            renderTo: this.wrapper,
            style: 'float: right;'
        }));
    }
});

// onResize method
Ext.form.Field.prototype.onResize = Ext.form.TriggerField.prototype.onResize = Ext.form.Field.prototype.onResize.createSequence(function(adjWidth, adjHeight, rawWidth, rawHeight){
    if (this.buttonConfig) {
        this.wrapper.setSize(adjWidth, adjHeight);
        if (!this.wrap) { // textfield
            var elWidth = this.wrapper.getWidth() -  (this.button.getEl().getWidth() + this.buttonConfig.buttonOffset);
            
        } else { // triggerfield
            var elWidth = this.wrapper.getWidth() - (this.button.el.getWidth() + this.trigger.getWidth() + this.buttonConfig.buttonOffset);
        }
        this.el.setSize(elWidth, adjHeight);
    }
});

//var field = new Ext.form.TextField({
var field = new Ext.form.DateField({
    renderTo: Ext.getBody(),
    width: 200,
    store: ['Rodrigo', 'Primolan'],
    buttonConfig: {
        buttonOffset: 3,
        iconCls: 'icon-add',
        handler: function(thisButton) {
            alert('field plus button working!');
        }
    }
});

[primolan]

Fixed guys! Now its working fine! I missed onResize method on Trigger Field (and trigger width sum). Hope you enjoy it!

// onRender method
Ext.form.Field.prototype.onRender =  Ext.form.Field.prototype.onRender.createSequence(function(thisContainer,  thisPosition){
    if (this.buttonConfig) {
        this.wrapper = this.el.wrap({
            style: 'clear: both;'
        });
        this.el.applyStyles('float: left;');
        this.button = new Ext.Button(Ext.apply(this.buttonConfig, {
            renderTo: this.wrapper,
            style: 'float: right;'
        }));
    }
});

// onResize method
Ext.form.Field.prototype.onResize = Ext.form.TriggerField.prototype.onResize = Ext.form.Field.prototype.onResize.createSequence(function(adjWidth, adjHeight, rawWidth, rawHeight){
    if (this.buttonConfig) {
        this.wrapper.setSize(adjWidth, adjHeight);
        if (!this.wrap) { // textfield
            var elWidth = this.wrapper.getWidth() -  (this.button.getEl().getWidth() + this.buttonConfig.buttonOffset);
            
        } else { // triggerfield
            var elWidth = this.wrapper.getWidth() - (this.button.el.getWidth() + this.trigger.getWidth() + this.buttonConfig.buttonOffset);
        }
        this.el.setSize(elWidth, adjHeight);
    }
});

//var field = new Ext.form.TextField({
var field = new Ext.form.DateField({
    renderTo: Ext.getBody(),
    width: 200,
    store: ['Rodrigo', 'Primolan'],
    buttonConfig: {
        buttonOffset: 3,
        iconCls: 'icon-add',
        handler: function(thisButton) {
            alert('field plus button working!');
        }
    }
});

[primolan]

Fixed methods. Now it works with ux.FileUploadField and allows multiple buttons.

Just use property buttons on your field configuration.

Eg:

return new Ext.form.TriggerField({
    buttons: [{
        iconCls: 'icon-add',
        id: 'button'
    },{
        iconCls: 'icon-delete'
    },{
        iconCls: 'icon-zoom',
        handler: function(b, e) {
            var b = Ext.getCmp('button');
            b.setDisabled(!b.disabled);
        },
        scope: this
    }],
    fieldLabel: 'User',
    hiddenName: 'user',
    name: 'user',
    renderTo: Ext.getBody(),
    width: 300
});

Just write this code into a file (I called buttonsField.js) and include it, very simple. I hope you all enjoy!

// Field onRender method
Ext.form.Field.prototype.onRender =  Ext.form.Field.prototype.onRender.createSequence(function(thisContainer,  thisPosition){
    if (this.buttons) {
        this.wrapper = this.el.wrap({
            style: 'clear: both;'
        });
        this.el.applyStyles('float: left;');
        var button = {};
        this.buttonsWidth = 0;
        this.buttons.reverse();
        for(var b = 0, length = this.buttons.length; b < length; b++) {
            button[b] = new Ext.Button(Ext.apply(this.buttons[b], {
                renderTo: this.wrapper,
                style: 'float: right; padding: 0px 0px 0px 2px'
            }));
            this.buttonsWidth += button[b].el.getWidth();
        }
        this.wrapper.setWidth(this.el.getWidth());
        this.el.setWidth(this.el.getWidth() - this.buttonsWidth);
    }
});

// Field onResize method
Ext.form.Field.prototype.onResize = Ext.form.Field.prototype.onResize.createSequence(function(adjWidth, adjHeight, rawWidth, rawHeight){
    if (this.buttons) {
        this.wrapper.setSize(adjWidth, adjHeight);
        this.el.setSize((this.el.getWidth() - this.buttonsWidth), adjHeight);
    }
});

// TriggerField onResize method
Ext.form.TriggerField.prototype.onResize = Ext.form.TriggerField.prototype.onResize.createSequence(function(adjWidth, adjHeight, rawWidth, rawHeight){
    if (this.buttons) {
        this.wrapper.setSize(adjWidth, adjHeight);
        this.el.setSize((this.el.getWidth() - this.buttonsWidth), adjHeight);
    }
});

// ux.FileUploadField onResize method
Ext.ux.form.FileUploadField.prototype.onResize = Ext.ux.form.FileUploadField.prototype.onResize.createSequence(function(adjWidth, adjHeight, rawWidth, rawHeight){
    if (this.buttons) {
        this.wrapper.setSize(adjWidth, adjHeight);
        var wrapWidth = adjWidth - this.buttonsWidth;
        this.wrap.applyStyles('float: left;');
        this.wrap.setSize(wrapWidth, adjHeight);
        var width = (this.wrap.getWidth() - this.button.el.getWidth());
        var elWidth = this.wrapper.getWidth() - (this.buttonsWidth + this.button.el.getWidth() + 2);
        this.el.setSize(elWidth, adjHeight);
    }
});

[burn]

Very nice stuff, I integrated it in my system and it almost works (I render forms in windows and they can contain a mix of tabpanels/fieldsets/columns):

1) Had to remove the clear:both; style from:

this.wrapper = this.el.wrap({
    style: 'clear: both;'
}); 

otherwise the label, the field and the buttons would end up in different lines.

2) For some reason when a field is inside a tabpanel it doesn't get resized, making the buttons end up below the input field while correctly floating to the right (see attached screenshot).

P.S. never-mind the two floating buttons without a field, they're rendered beside a hidden field.

ss.PNG

[primolan]

Hi Burn!

I also use that inside tabpanels as well. On window beforeshow event, I call doLayout on each Panel (forcing render on hidden elements). I suppose that should works with you. At least, you could try

Cya!

[primolan]

Hello!

Fixed again! Now the handler function receveis a third parameter: field. [ function(button, field, event) ].

I hope you all enjoy!

fieldButtons.js

/**
 * Gives possibility to any field to have any buttons beside.
 *
 * @cfg buttons : object/array Ext.Button
 * @cfg button.handler now reveives a third parameter, the field. Eg.: handler: function(button, field, event)
 *
 * new Ext.form.TextField({
 *         buttons: {
 *             handler: function(b, f, e) {
 *                 alert(b); alert(f); alert(e);
 *             }
  *         text: 'here!'
 *         },
 *         fieldLabel: 'Nome',
 *         name: 'name'
 * });
 * 
 * author: Rodrigo Novelo Primolan (primolan@interair.com.br)
 */
 
Ext.prototype = {
    isObject: function(v) {
        return (typeof(v) == 'object' && v.length == undefined);
    },
    isArray: function(v) {
        return (typeof(v) == 'object' && v.length != undefined);
    }
};
 
// Field onRender method
Ext.form.Field.prototype.onRender =  Ext.form.Field.prototype.onRender.createSequence(function(thisContainer,  thisPosition){
    if (this.buttons) {
        this.wrapper = this.el.wrap({
            style: 'clear: both;'
        });
        this.el.applyStyles('float: left;');
        var button = {};
        this.buttonsWidth = 0;
        if (Ext.isObject(this.buttons)) {
            this.buttons = [this.buttons];
        } else {
            this.buttons.reverse();
        }
        for(var b = 0, length = this.buttons.length; b < length; b++) {
            button[b] = new Ext.Button(Ext.apply(this.buttons[b], {
                field: this,
                renderTo: this.wrapper,
                style: 'float: right; padding: 0px 0px 0px 2px',
                onClick: function(e) {
                    if (e) {
                        e.preventDefault();
                    }
                    if (e.button !== 0){
                        return;
                    }
                    if (!this.disabled) {
                        if (this.enableToggle && (this.allowDepress !== false || !this.pressed)) {
                            this.toggle();
                        }
                        if (this.menu && !this.hasVisibleMenu() && !this.ignoreNextClick) {
                            this.showMenu();
                        }
                        this.fireEvent('click', this, this.field, e);
                        if (this.handler) {
                            this.handler.call(this.scope || this, this, this.field, e);
                        }
                    }
                }
            }));
            this.buttonsWidth += button[b].el.getWidth();
        }
        this.wrapper.setWidth(this.el.getWidth());
        this.el.setWidth(this.el.getWidth() - this.buttonsWidth);
    }
});

// Field onResize method
Ext.form.Field.prototype.onResize = Ext.form.Field.prototype.onResize.createSequence(function(adjWidth, adjHeight, rawWidth, rawHeight){
    if (this.buttons) {
        this.wrapper.setSize(adjWidth, adjHeight);
        this.el.setSize((this.el.getWidth() - this.buttonsWidth), adjHeight);
    }
});

// TriggerField onResize method
Ext.form.TriggerField.prototype.onResize = Ext.form.TriggerField.prototype.onResize.createSequence(function(adjWidth, adjHeight, rawWidth, rawHeight){
    if (this.buttons) {
        this.wrapper.setSize(adjWidth, adjHeight);
        this.el.setSize((this.el.getWidth() - this.buttonsWidth), adjHeight);
    }
});

// ux.FileUploadField onResize method
Ext.ux.form.FileUploadField.prototype.onResize = Ext.ux.form.FileUploadField.prototype.onResize.createSequence(function(adjWidth, adjHeight, rawWidth, rawHeight){
    if (this.buttons) {
        this.wrapper.setSize(adjWidth, adjHeight);
        var wrapWidth = adjWidth - this.buttonsWidth;
        this.wrap.applyStyles('float: left;');
        this.wrap.setSize(wrapWidth, adjHeight);
        var width = (this.wrap.getWidth() - this.button.el.getWidth());
        var elWidth = this.wrapper.getWidth() - (this.buttonsWidth + this.button.el.getWidth() + 2);
        this.el.setSize(elWidth, adjHeight);
    }
});

[Urkman]

Hello primolan,

this is a great extension. I would vote for it to go to the core...

But we have a small problem here:
If the field we need buttons for is on a not visible tabpanel it is not shown correct...

Perhaps you already have a fix for this.

Thanks and greetings,
Urkman