Looks like we can't reproduce the issue or there's a problem in the test case provided.
  1. #1
    Sencha User
    Join Date
    Sep 2009
    Location
    Denver
    Posts
    51
    Vote Rating
    2
    McQuack_82 will become famous soon enough

      0  

    Default SetReadOnly not removing readonly class on trigger base fields datefield, combo etc.

    SetReadOnly not removing readonly class on trigger base fields datefield, combo etc.


    The setReadonly function doesn't appear to remove the readonly class correctly, specifically on trigger fields. I enclosed screenshots of dom inspection of the the trigger elements and text fields for comparison. The mouse pointer also appear to be different from the other fields when hovering over, but I am guessing that is a result of the readonly class being on component when it should be removed.

    Possible temporary workaround is was unable to get it to callParent correctly with in override this maybe a issue of the framework calling the incorrect parent to apply and remove class correctly.

    Code:
    Ext.define('L3OM.override.Trigger', {    override: 'Ext.form.field.Trigger',
        setReadOnly: function (readOnly) {
            //Temporary fix till sencha fixes issues with readonly on trigger based fields
            var me = this,
                inputEl = me.inputEl;
            readOnly = !!readOnly;
            me[readOnly ? 'addCls' : 'removeCls'](me.readOnlyCls);
            me.readOnly = readOnly;
            if (inputEl) {
                inputEl.dom.readOnly = readOnly;
            } else if (me.rendering) {
                me.setReadOnlyOnBoxReady = true;
            }
            me.fireEvent('writeablechange', me, readOnly);
        }
    });
    Sample code creates a basic form with text fields and trigger based fields , a date field and combo.

    Sample code to recreate

    Code:
    Ext.onReady(function () {
    
                var formTest = Ext.create('Ext.form.Panel', {
                    title: 'Simple Form',
                    bodyPadding: 5,
                    width: 350,
    
    
                    // The form will submit an AJAX request to this URL when submitted
                    url: 'save-form.php',
    
    
                    // Fields will be arranged vertically, stretched to full width
                    layout: 'anchor',
                    defaults: {
                        anchor: '100%'
                    },
                    
                    // The fields
                    defaultType: 'textfield',
                    items: [{
                        fieldLabel: 'First Name',
                        name: 'first',
                        value: 'John',
                        allowBlank: false,
                        readOnly: true
                    }, {
                        fieldLabel: 'Last Name',
                        name: 'last',
                        value: 'Doe',
                        allowBlank: false,
                        readOnly: true
                    }, {
                        name: 'sex',
                        fieldLabel: 'Sex',
                        xtype: 'combo',
                        value: 'Male',
                        store: ['Female', 'Male'],
                        readOnly: true
                    }, {
                        name: 'dob',
                        fieldLabel: 'DOB',
                        xtype: 'datefield',
                        value: '01/01/2012',
                        readOnly: true
                    }],
    
    
                    // Reset and Submit buttons
                    
                    buttons: [{
                        text: 'Edit',
                        handler: function () {
                            this.up('form').getForm().reset();
                            var me = this,
                                form = me.up('form').getForm(),
                                readOnly;
                            form.getFields().each(function (field, index, len) {
                                readOnly = (field.readOnly === true) ? false : true;
                                field.setReadOnly(readOnly);
                            });
                        }
                    }, {
                        text: 'Reset',
                        handler: function () {
                            this.up('form').getForm().reset();
                        }
                    }, {
                        text: 'Submit',
                        formBind: true, //only enabled once the form is valid
                        disabled: true,
                        handler: function () {}
                    }],
                    renderTo: Ext.getBody()
                });
            });
    Screenshots of DOM inspection before and after setReadOnly applied to form.

    beforeSetReadonly.PNGafterSetReadOnly.PNG

  2. #2
    Sencha - Ext JS Dev Team evant's Avatar
    Join Date
    Apr 2007
    Location
    Sydney, Australia
    Posts
    17,019
    Vote Rating
    650
    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


    Thanks for the test case, this is already resolved for the next patch release.
    Evan Trimboli
    Sencha Developer
    Twitter - @evantrimboli
    Don't be afraid of the source code!

  3. #3
    Sencha User
    Join Date
    Sep 2009
    Location
    Denver
    Posts
    51
    Vote Rating
    2
    McQuack_82 will become famous soon enough

      0  

    Default Better override

    Better override


    Is there a better looking override that I can put in place till the next release. I would prefer to call the parent instead of in-lining the code from the setReadonly in form.field.text?

Thread Participants: 1

Tags for this Thread