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

**tvanzoelen** · 16 Jan 2012 5:09 AM

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

**mitchellsimoens** · 16 Jan 2012 9:02 AM

If you are doing it on render, why not use the readOnly config?

**tvanzoelen** · 16 Jan 2012 9:26 AM

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.

**tvanzoelen** · 16 Jan 2012 9:44 AM

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();
        }
    },

**evant** · 16 Jan 2012 2:45 PM

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.

**tvanzoelen** · 16 Jan 2012 2:52 PM

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.

**evant** · 16 Jan 2012 3:35 PM

I don't think you need to, we had a similar issue posted and I'm almost certain it's the same one.

**tvanzoelen** · 17 Jan 2012 12:16 AM

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

**tvanzoelen** · 17 Jan 2012 6:28 AM

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.

**Jangla** · 11 Feb 2013 3:09 PM

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.

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

Thread Tools

Search Thread

Display

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

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