Hybrid View

  1. #1
    Sencha User primolan's Avatar
    Join Date
    Sep 2009
    Location
    São Paulo - Brazil
    Posts
    21
    Vote Rating
    0
    primolan is on a distinguished road

      0  

    Lightbulb [FIXED] Help with Button aligned to Field

    [FIXED] Help with Button aligned to Field


    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:

    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
    });
    Last edited by primolan; 13 Apr 2010 at 10:32 AM. Reason: fixed

  2. #2
    Sencha User primolan's Avatar
    Join Date
    Sep 2009
    Location
    São Paulo - Brazil
    Posts
    21
    Vote Rating
    0
    primolan is on a distinguished road

      0  

    Wink Fixed!

    Fixed!


    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!

    Code:
    // 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!');
            }
        }
    });

  3. #3
    Sencha User primolan's Avatar
    Join Date
    Sep 2009
    Location
    São Paulo - Brazil
    Posts
    21
    Vote Rating
    0
    primolan is on a distinguished road

      0  

    Default


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

    Code:
    // 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!');
            }
        }
    });

  4. #4
    Sencha User primolan's Avatar
    Join Date
    Sep 2009
    Location
    São Paulo - Brazil
    Posts
    21
    Vote Rating
    0
    primolan is on a distinguished road

      0  

    Default


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

    Just use property buttons on your field configuration.

    Eg:

    Code:
    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!

    Code:
    // 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);
        }
    });

  5. #5
    Ext User burn's Avatar
    Join Date
    Mar 2007
    Location
    Italy
    Posts
    69
    Vote Rating
    0
    burn is on a distinguished road

      0  

    Default


    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:
    PHP Code:
    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

  6. #6
    Sencha User primolan's Avatar
    Join Date
    Sep 2009
    Location
    São Paulo - Brazil
    Posts
    21
    Vote Rating
    0
    primolan is on a distinguished road

      0  

    Default Rendering hidden elements

    Rendering hidden elements


    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!

  7. #7
    Sencha User primolan's Avatar
    Join Date
    Sep 2009
    Location
    São Paulo - Brazil
    Posts
    21
    Vote Rating
    0
    primolan is on a distinguished road

      0  

    Default Refixed again!!! New parameter in handler function!

    Refixed again!!! New parameter in handler function!


    Hello!

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

    I hope you all enjoy!

    fieldButtons.js
    Code:
    /**
     * 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);
        }
    });

  8. #8
    Sencha User
    Join Date
    May 2008
    Location
    Anrath - Germany
    Posts
    158
    Vote Rating
    0
    Urkman is on a distinguished road

      0  

    Default


    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

Thread Participants: 3

Tags for this Thread