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
    156
    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

Turkiyenin en sevilen filmlerinin yer aldigi xnxx internet sitemiz olan ve porn sex tarzi bir site olan mobil porno izle sitemiz gercekten dillere destan bir durumda herkesin sevdigi bir site olarak tarihe gececege benziyor. Sitenin en belirgin ozelliklerinden birisi de Turkiyede gercekten kaliteli ve muntazam, duzenli porno izle siteleri olmamasidir. Bu yuzden iste. Ayrica en net goruntu kalitesine sahip adresinde yayinlanmaktadir. Mesela diğer sitelerimizden bahsedecek olursak, en iyi hd porno video arşivine sahip bir siteyiz. "The Best anal porn videos and slut anus, big asses movies set..." hd porno faketaxi