Results 1 to 6 of 6

Thread: Bugs from 3.0.0 to 3.1.1: Event onRender of a plugin never fires.

  1. #1
    Sencha User
    Join Date
    Jan 2009
    Posts
    18
    Vote Rating
    16
      0  

    Default Bugs from 3.0.0 to 3.1.1: Event onRender of a plugin never fires.

    Hi
    I'm migrating from 3.0.0 to 3.1.1 but I found some bugs. I'll post a thread for each of them.

    The next plugin worked perfectly on 3.0.0 but now, the onRender event never fires:

    Code:
    /* Plugin para manejar etiquetas en los campos. */
    Ext.namespace('Ext.ux.plugins');
     
    Ext.ux.plugins.FormFieldsWithLabels = function(config) {
        Ext.apply(this, config);
    };
     
    // Plugin para manejar las etiquetas a mano y poder orientarlas.
    Ext.extend(Ext.ux.plugins.FormFieldsWithLabels, Ext.util.Observable, {
        init:function(aComp)
        {
            Ext.apply(aComp,
                {
                    onRender: aComp.onRender.createSequence(function(ct, position)
                                {
                                    /* Aqu agregamos las etiquetas a los campos. */
                                    debugger;
                                    if (!this.baxLabel)
                                    {
                                        if (!this.baxLabelAlignment)
                                        {
                                            this.baxLabelAlignment = "u";
                                        }
                                        this.baxLabelMargin = 5;
                                        var box = this.el.getBox();
                                        var lbl = new Ext.form.Label
                                                        ({
                                                             id         : 'lbl' + this.id
                                                            ,html       : this.fieldLabel
                                                            ,isLabel    : true
                                                        });
                                        this.ownerCt.add(lbl);
                                        this.baxLabel = lbl;
                                        lbl.baxOwnerComponent = this;
                                    }
                                })
                    ,baxSetLabel  : function(aLabel)
                    {
                    }
                    ,baxSetVisible : function(aVisible)
                    {
                    }
                    ,baxSetRequired : function(aRequired)
                    {
                    }
                    ,baxSetReadonly : function(aReadonly)
                    {
                    }
                    ,baxSetDisabled : function(aDisabled)
                    {
                    }
                    ,baxAlignLabel: function()
                    {
                    }
                });
        } // end of function init
    }); // end of extend

  2. #2
    Sencha Premium User evant's Avatar
    Join Date
    Apr 2007
    Location
    Sydney, Australia
    Posts
    19,234
    Vote Rating
    1015
      0  

    Default

    Ran this code against the 3.2 beta and the log() fires.

    Code:
    /* Plugin para manejar etiquetas en los campos. */
    Ext.namespace('Ext.ux.plugins');
    
    Ext.ux.plugins.FormFieldsWithLabels = function(config){
        Ext.apply(this, config);
    };
    
    // Plugin para manejar las etiquetas a mano y poder orientarlas.
    Ext.extend(Ext.ux.plugins.FormFieldsWithLabels, Ext.util.Observable, {
        init: function(aComp){
            Ext.apply(aComp, {
                onRender: aComp.onRender.createSequence(function(ct, position){
                    console.log('foo');
                    /* Aqu agregamos las etiquetas a los campos. */
                    debugger;
                    if (!this.baxLabel) {
                        if (!this.baxLabelAlignment) {
                            this.baxLabelAlignment = "u";
                        }
                        this.baxLabelMargin = 5;
                        var box = this.el.getBox();
                        var lbl = new Ext.form.Label({
                            id: 'lbl' + this.id,
                            html: this.fieldLabel,
                            isLabel: true
                        });
                        this.ownerCt.add(lbl);
                        this.baxLabel = lbl;
                        lbl.baxOwnerComponent = this;
                    }
                }),
                baxSetLabel: function(aLabel){
                },
                baxSetVisible: function(aVisible){
                },
                baxSetRequired: function(aRequired){
                },
                baxSetReadonly: function(aReadonly){
                },
                baxSetDisabled: function(aDisabled){
                },
                baxAlignLabel: function(){
                }
            });
        } // end of function init
    }); // end of extend
    Ext.onReady(function(){
        new Ext.Component({
            renderTo: document.body,
            plugins: new Ext.ux.plugins.FormFieldsWithLabels()
        });
    });
    Marking as closed.
    Twitter - @evantrimboli
    Former Sencha framework engineer, available for consulting.
    As of 2017-09-22 I am not employed by Sencha, all subsequent posts are my own and do not represent Sencha in any way.

  3. #3
    Sencha User
    Join Date
    Jan 2009
    Posts
    18
    Vote Rating
    16
      0  

    Default

    It works with Ext.Component but not with TextField, Checkbox, Combo and DateField and probably Number. I've already checked this with 3.2 RC1.


    Code:
    var edtUserID = new Ext.form.TextField({
        id              : "edtUserID"
        ,fieldLabel     : "UserID"
        ,allowBlank     : true
        ,blankText      : ""
        ,maskRe         : ""        //Regular expresion to filter keystrokes
        ,maxLength      : 35
        ,readOnly       : false
        ,selectOnFocus  : true
        ,value          : ""
        ,vtype          : ""
        ,x                  : 309
        ,y                  : 33
        ,width            : 156
        //,height           : 22
        ,plugins          : new Ext.ux.plugins.FormFieldsWithLabels()
    });
    
    
    var edtz_LastLogin = new Ext.form.DateField({
        id              : "edtz_LastLogin"
        ,fieldLabel     : "z_LastLogin"
        ,allowBlank     : true
        ,blankText      : ""
        ,maskRe         : ""        //Regular expresion to filter keystrokes
        ,maxLength      : 10
        ,readOnly       : false
        ,selectOnFocus  : true
        ,value          : "z_LastLogin"
        ,vtype          : ""
        ,validateOnBlur : false
        ,triggerCount   : 2
        ,trigger1Tip    : "Uno"
        ,trigger2Tip    : "Dos"
        ,trigger1Class  : "x-form-date-trigger"
        ,trigger2Class  : "x-form-clear-trigger"
        ,onTrigger1Click: function() { this.onTriggerClick(); }
        ,onTrigger2Click: function() { alert(2); }
    
        ,x                  : 309
        ,y                  : 77
        ,width            : 156
        //,height           : 23
        ,plugins          : new Ext.ux.plugins.FormFieldsWithLabels()
    
    });
    
    
    var edtHabilitado = new Ext.form.Checkbox({
        id              : "edtHabilitado"
        ,fieldLabel     : "Habilitado"
        ,readOnly       : false
        ,x                : 0
        ,y                : 0
        ,isCheckbox     : true
        ,x                  : 309
        ,y                  : 60
        ,width            : 156
        //,height           : 22
        ,plugins          : new Ext.ux.plugins.FormFieldsWithLabels()
    
    });
    
    var edtSecurityRole = new Ext.form.ComboBox //new Ext.ux.MultiTriggerComboBox
    ({
         id             : "edtSecurityRole"
        ,title          : 'Selecciona un '
        ,allowBlank     : true
        ,blankText      : ""
        ,readOnly       : false
        ,store          : dsSecurityRole
        ,displayField   :'_nominal'
        ,valueField     :'_pk'
        ,typeAhead      : true
        ,loadingText    : 'Buscandole...'
        ,minChars       : 1
        ,triggerAction  : 'all'
        ,width          : 570
        ,pageSize       : 5
        ,forceSelection : true
        ,hideTrigger    : false
        ,listWidth      : 400
        ,triggerCount   : 3
        ,trigger1Tip    : "Desplegar la lista de valores."
        ,trigger2Tip    : "Bsqueda avanzada o agregar registros."
        ,trigger3Tip    : "Borrar valor."
        //,trigger1Class  : "x-form-date-trigger"
        ,trigger2Class  : "x-form-search-trigger"
        ,trigger3Class  : "x-form-clear-trigger"
        ,onTrigger1Click: function() { this.onTriggerClick(); }
        ,onTrigger2Click: function() { alert('Disparar el dilogo con el catlogo rpido.'); }
        ,onTrigger3Click: function() { this.setValue(""); this.triggerBlur(); }
        
        
        
        ,x                  : 79
        ,y                  : 5
        ,width            : 156
        //,height           : 23
        ,plugins          : new Ext.ux.plugins.FormFieldsWithLabels()
    });

  4. #4
    Sencha User
    Join Date
    Jan 2009
    Posts
    18
    Vote Rating
    16
      0  

    Default

    I've found it:

    If the Control (TextField, Checkbox, etc) doesn't have "renderTo" property the onRender event never fires.

    What I'm doing is creating the control (without renderTo) and then adds to a fieldSet. And the same thing with the fieldSet (create it without renderTo and after adds to the form: theForm.add(fieldSet)) and at the end I call theForm.render('divControls'). It used to work fine.

    I do this because I generate the JS code from the Server at run-time.

    The question is: in the new versions the "add" method is still a valid method to add controls or not? If it is, this is a bug, if it is not I have to find another way to provide the renderTo a priori and it should be documented.

    Thanks

  5. #5
    Sencha Premium User evant's Avatar
    Join Date
    Apr 2007
    Location
    Sydney, Australia
    Posts
    19,234
    Vote Rating
    1015
      0  

    Default

    Definitely works:

    Code:
    /* Plugin para manejar etiquetas en los campos. */
    Ext.namespace('Ext.ux.plugins');
    
    Ext.ux.plugins.FormFieldsWithLabels = function(config){
        Ext.apply(this, config);
    };
    
    // Plugin para manejar las etiquetas a mano y poder orientarlas.
    Ext.extend(Ext.ux.plugins.FormFieldsWithLabels, Ext.util.Observable, {
        init: function(aComp){
            Ext.apply(aComp, {
                onRender: aComp.onRender.createSequence(function(ct, position){
                    console.log('foo');
                    if (!this.baxLabel) {
                        if (!this.baxLabelAlignment) {
                            this.baxLabelAlignment = "u";
                        }
                        this.baxLabelMargin = 5;
                        var box = this.el.getBox();
                        var lbl = new Ext.form.Label({
                            id: 'lbl' + this.id,
                            html: this.fieldLabel,
                            isLabel: true
                        });
                        this.ownerCt.add(lbl);
                        this.baxLabel = lbl;
                        lbl.baxOwnerComponent = this;
                    }
                }),
                baxSetLabel: function(aLabel){
                },
                baxSetVisible: function(aVisible){
                },
                baxSetRequired: function(aRequired){
                },
                baxSetReadonly: function(aReadonly){
                },
                baxSetDisabled: function(aDisabled){
                },
                baxAlignLabel: function(){
                }
            });
        } // end of function init
    }); // end of extend
    Ext.onReady(function(){
        var tf = new Ext.form.TextField({
            plugins: new Ext.ux.plugins.FormFieldsWithLabels()
        });
        
    
        var fs = new Ext.form.FieldSet({
            renderTo: document.body,
            width: 400,
            height: 400
        });
        fs.add(tf);
        fs.doLayout();
    });
    Going to move this to help, sounds like you have issues elsewhere in your code.
    Twitter - @evantrimboli
    Former Sencha framework engineer, available for consulting.
    As of 2017-09-22 I am not employed by Sencha, all subsequent posts are my own and do not represent Sencha in any way.

  6. #6
    Sencha User
    Join Date
    Jan 2009
    Posts
    18
    Vote Rating
    16
      0  

    Default

    Thanks for your help.

    I think that the problem is when the render is called.

    Look at the picture, this used to be a pretty form, but now all the labels are missing and the trigger buttons of combo and dateField are misplaced.

    I found that I called some methods ( like: baxSetLabel() ) before the baxLabel is created, it seems that on 3.0.0 the render was called before it is called now (maybe in the "add()"?) and when it was called the getBox() and the container was already there.

    Now, on 3.2 (and 3.1.1) the render is called later and some of my code asume that everything is already created like before.

    I understand that this change may be a way to increse performance or make the things better so I'll try to figure out how it works now so I can apply the changes to my code in order to make it work again. I just wonder if there have been similar problems with other plugins.

    See you
    Attached Images Attached Images

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •