Looks like we can't reproduce the issue or there's a problem in the test case provided.
  1. #1
    Ext JS Premium Member tvanzoelen's Avatar
    Join Date
    Apr 2008
    Location
    Groningen - Netherlands
    Posts
    1,118
    Vote Rating
    30
    tvanzoelen has a spectacular aura about tvanzoelen has a spectacular aura about tvanzoelen has a spectacular aura about

      0  

    Default [4.1.Beta] Function setReadOnly(true) on render sets Number InputField hidden

    [4.1.Beta] Function setReadOnly(true) on render sets Number InputField hidden


    REQUIRED INFORMATION


    Ext version tested:
    • Ext 4.1.Beta

    Browser versions tested against:
    • IE9
    • Firefox
    • Chrome

    DOCTYPE tested against:
    • <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

    Description:
    • If the function setReadOnly(true) is called on render of a NumberField the inputfield is not visible. This only occurs with NumberFields

    Steps to reproduce the problem:
    • See the sample

    The result that was expected:
    • [That the input field is visible

    The result that occurs instead:
    • Inputfield is not visible

    Test Case:

    Code:
       Ext.onReady(function() {
        Ext.createWidget('form', {
            renderTo: Ext.getBody(),
            title: 'Number fields with setReadonly on render to true',
            bodyPadding: 5,
            frame: true,
            width: 340,
            fieldDefaults: {
                labelAlign: 'left',
                labelWidth: 105,
                anchor: '100%'
            },
            items: [{
                xtype: 'numberfield',
                fieldLabel: 'Default',
                name: 'basic',
                value: 1,
                minValue: 1,
                maxValue: 125,
                hideTrigger: true,
                listeners: {
    
                    render: function(c) {
                        this.setReadOnly(true);
                    }
                }
    
    
    }]
    
            });
        });

    Debugging already done:
    • none

  2. #2
    Sencha - Senior Forum Manager mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    37,330
    Vote Rating
    847
    mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute

      0  

    Default


    If you are doing it on render, why not use the readOnly config?
    Mitchell Simoens @SenchaMitch
    Sencha Inc, Senior Forum Manager
    ________________
    Check out my GitHub, lots of nice things for Ext JS 4 and Sencha Touch 2
    https://github.com/mitchellsimoens

    Think my support is good? Get more personalized support via a support subscription. https://www.sencha.com/store/

    Need more help with your app? Hire Sencha Services services@sencha.com

    Want to learn Sencha Touch 2? Check out Sencha Touch in Action that is in print!

    When posting code, please use BBCode's CODE tags.

  3. #3
    Ext JS Premium Member tvanzoelen's Avatar
    Join Date
    Apr 2008
    Location
    Groningen - Netherlands
    Posts
    1,118
    Vote Rating
    30
    tvanzoelen has a spectacular aura about tvanzoelen has a spectacular aura about tvanzoelen has a spectacular aura about

      0  

    Default


    Tried that but then it breaks somewhere else ..... by doing layout. I can not reproduce that one, but this example also gave the error. I also have a bugfix for above it breaks in updateEditMode function of the TriggerField. What I want to know where else could this break? This is an annoying bug.

  4. #4
    Ext JS Premium Member tvanzoelen's Avatar
    Join Date
    Apr 2008
    Location
    Groningen - Netherlands
    Posts
    1,118
    Vote Rating
    30
    tvanzoelen has a spectacular aura about tvanzoelen has a spectacular aura about tvanzoelen has a spectacular aura about

      0  

    Default


    In Ext.form.field.Trigger, triggerWrap.setDisplayed(displayed); is causing the trouble.
    I have overridden this function so I solved the problem of the situation above. But I get the same situation again if I hide a button in the toolbar above the form, then it is updating the layout or whatever and again the input field is gone. So where else in the code could this wrapper element be set on hidden?

    Code:
    updateEditState: function() {
            var me = this,
                inputEl = me.inputEl,
                triggerWrap = me.triggerWrap,
                noeditCls = Ext.baseCSSPrefix + 'trigger-noedit',
                displayed,
                readOnly;
    
            if (me.rendered) {
                if (me.readOnly) {
                    inputEl.addCls(noeditCls);
                    readOnly = true;
                    displayed = false;
                } else {
                    if (me.editable) {
                        inputEl.removeCls(noeditCls);
                        readOnly = false;
                    } else {
                        inputEl.addCls(noeditCls);
                        readOnly = true;
                    }
                    displayed = !me.hideTrigger;
                }
    
                triggerWrap.setDisplayed(displayed); <-- this causes the error
                inputEl.dom.readOnly = readOnly;
                me.doComponentLayout();
            }
        },

  5. #5
    Sencha - Ext JS Dev Team evant's Avatar
    Join Date
    Apr 2007
    Location
    Sydney, Australia
    Posts
    16,998
    Vote Rating
    649
    evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute

      0  

    Default


    As @mitchell said, shouldn't really be configuring stuff like that during render, because it's going to trigger extra reflows during the render process.

    We had a separate ticket raised regarding a similar issue, I just run this code against the latest release:

    Code:
    Ext.onReady(function() {
        Ext.createWidget('form', {
            renderTo: Ext.getBody(),
            title: 'Number fields with setReadonly on render to true',
            bodyPadding: 5,
            frame: true,
            width: 340,
            fieldDefaults: {
                labelAlign: 'left',
                labelWidth: 105,
                anchor: '100%'
            },
            items: [{
                xtype: 'numberfield',
                fieldLabel: 'Default',
                name: 'basic',
                value: 1,
                minValue: 1,
                maxValue: 125,
                readOnly: true
            }]
        });
    });
    It ends up producing the attached screen grab.
    Attached Images
    Evan Trimboli
    Sencha Developer
    Twitter - @evantrimboli
    Don't be afraid of the source code!

  6. #6
    Ext JS Premium Member tvanzoelen's Avatar
    Join Date
    Apr 2008
    Location
    Groningen - Netherlands
    Posts
    1,118
    Vote Rating
    30
    tvanzoelen has a spectacular aura about tvanzoelen has a spectacular aura about tvanzoelen has a spectacular aura about

      0  

    Default


    Ok.. but I also tried that. And indeed it will produce that screen grab, but it isn't stable it will go corrupt while working in the screen. I will try to reproduce that and post it.

  7. #7
    Sencha - Ext JS Dev Team evant's Avatar
    Join Date
    Apr 2007
    Location
    Sydney, Australia
    Posts
    16,998
    Vote Rating
    649
    evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute

      0  

    Default


    I don't think you need to, we had a similar issue posted and I'm almost certain it's the same one.
    Evan Trimboli
    Sencha Developer
    Twitter - @evantrimboli
    Don't be afraid of the source code!

  8. #8
    Ext JS Premium Member tvanzoelen's Avatar
    Join Date
    Apr 2008
    Location
    Groningen - Netherlands
    Posts
    1,118
    Vote Rating
    30
    tvanzoelen has a spectacular aura about tvanzoelen has a spectacular aura about tvanzoelen has a spectacular aura about

      0  

    Default


    @evant. Is the fix for that issue available? Or can you give some more insight into that issue.

  9. #9
    Ext JS Premium Member tvanzoelen's Avatar
    Join Date
    Apr 2008
    Location
    Groningen - Netherlands
    Posts
    1,118
    Vote Rating
    30
    tvanzoelen has a spectacular aura about tvanzoelen has a spectacular aura about tvanzoelen has a spectacular aura about

      0  

    Default


    I have included a new test case. I can not get the textfield broken but, it happens in my app if I set readOnly in the config. That one I can not reproduce yet. But for the numberfield see the code below, just press the button.

    Code:
    Ext.onReady(function() {
    
    
        var numberfield = Ext.create('Ext.form.field.Number', {
    
            fieldLabel: 'NumberField',
            name: 'basicnumber',
            value: 1,
            minValue: 1,
            maxValue: 125,
            hideTrigger: true,
            readOnly: true
        });
    
        var textfield = Ext.create('Ext.form.field.Text', {
            fieldLabel: 'TextField',
            name: 'basictext',
            value: 'test',
            readOnly: true
        });
    
        var button = Ext.create('Ext.Button', {
            text: 'click me',
            listeners: {
    
                click: {
                    fn: function() {
                        numberfield.setReadOnly(false);
                        numberfield.setValue(234);
                        numberfield.setReadOnly(true);
                        textfield.setReadOnly(false);
                        textfield.setValue('this is a long text');
                        textfield.setReadOnly(true);
                        
                    }
                }
    
            }
    
        });
    
    
        Ext.createWidget('form', {
            renderTo: Ext.getBody(),
            title: 'Number fields with readonly on true',
            bodyPadding: 5,
            frame: true,
            layout: 'auto',
            width: 340,
            fieldDefaults: {
                labelAlign: 'left',
                labelWidth: 105,
                anchor: '100%'
            },
            items: [numberfield, textfield, button]
    
        });
    });
    If I set the value to 2

    Code:
                        numberfield.setReadOnly(false);
                        numberfield.setValue(2); <-- no problem
                        numberfield.setReadOnly(true);
    there is no problem.

    There is definitely something wrong with the layout-update after calls to setReadOnly. In my app I use this function a lot. The values of the record can set fields to readonly. I hope this is the same issue you encountered @evant.

  10. #10
    Ext JS Premium Member
    Join Date
    Feb 2009
    Posts
    446
    Vote Rating
    4
    Jangla is on a distinguished road

      0  

    Default


    Another interested party here. I have a trigger field that, when the trigger was clicked, would lock/unlock the field. As mentioned above, the action of setting readOnly on the field makes the trigger disappear.

    ExtJS 3 this was really easy to override updateEditState method and just comment out the lines that hid the trigger.

    Not so in ExtJS 4 - much harder to understand and override.