Thank you for reporting this bug. We will make it our priority to review this report.
  1. #1
    Ext JS Premium Member simeon's Avatar
    Join Date
    Mar 2007
    Location
    Austin, Texas
    Posts
    227
    Vote Rating
    1
    simeon is on a distinguished road

      0  

    Default adding custom disabledCls to field config only changes label and not form input

    adding custom disabledCls to field config only changes label and not form input


    REQUIRED INFORMATION


    Ext version tested:
    • Ext 2.0.1 rev rc

    Description:
    • I am defining a custom css class for disabled fields in the field config.
      When the field.disable() is called.
      It only gets assigned to the label and not the text input

    Steps to reproduce the problem:
    • create a form and add "disabledCls:"foo-item-disabled" to the field config

      Load page.
      call the disable() method on the field

      Notice that the label turns black and the field does not.
      The dom for the label has foo-item-disabled. The dom for the input still has "x-item-disabled"



    Code:
        {
            xtype: 'textfield',
            disabledCls: 'foo-item-disabled',
            name : 'name',
            label: 'Name'
        }

  2. #2
    Sencha - Senior Forum Manager mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    35,731
    Vote Rating
    754
    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


    The disabledCls should be added to the div.x-field (outer most element of the field) not the label and input. In the CSS you should then target the label and input using the disabledCls 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 simeon's Avatar
    Join Date
    Mar 2007
    Location
    Austin, Texas
    Posts
    227
    Vote Rating
    1
    simeon is on a distinguished road

      0  

    Default


    Adding it to a fieldset that contains the fields has no effect on the fields contained.
    Adding it to a specific field only effects the label and not the input.

    I can iterate the fields and set the css class explicitly (which is what I am currently doing to work around this issue), but my expected behavior is that an override of the disabledCls in the field config should effect both the label and input.

    Code:
    {
                    xtype: 'fieldset',
                    disabledCls: 'af-item-disabled',
                    items: [
                        {
                            xtype: 'textfield',                        
                            name : 'name',
                            disabledCls: 'af-item-disabled',
                            label: 'Name'
                        },
                        {
                            xtype: 'emailfield',
                            name : 'emailAddress',
                            label: 'Email'
                        },
                        {
                            xtype: 'textareafield',
                            name : 'description',
                            label: 'Description'
                        }
                    ]
                }
    Neither config override has the expected effect on the field.

    For future consideration, the primary use case that I am trying to handle here, is the ability to make a readOnly form panel. Except I don't want to make the fields grey (hence my override of the disabledCls). I merely want the panel to be uneditable.

    When doing this with Ext. I use a staticTextField field class that uses a div instead of a input dom tag. I am considering adding that for touch, since it would allow for text wrapping on long strings.

    I want to be able to use the same formpanel for a readonly version and an editable version.

  4. #4
    Ext JS Premium Member simeon's Avatar
    Join Date
    Mar 2007
    Location
    Austin, Texas
    Posts
    227
    Vote Rating
    1
    simeon is on a distinguished road

      0  

    Default


    this is a css only workaround:
    add this to a container that holds your fields:

    Code:
     {
                    xtype: 'fieldset',
                    cls: 'af-item-disabled',                       
                    items: [
                        {
                            xtype: 'textfield', 
    
                            name : 'name',
                            label: 'Name'
                        },
                        {
                            xtype: 'emailfield',
                            name : 'emailAddress',
                            label: 'Email'
                        },
                        {
                            xtype: 'textareafield',
                            name : 'description',
                            label: 'Description'
                        }
                    ]
                }

    Then add this to your scss file to make all labels and fields black when disabled:


    Code:
    .af-item-disabled .x-item-disabled .x-form-label span, .af-item-disabled .x-item-disabled input, .af-item-disabled .x-item-disabled .x-input-el,.af-item-disabled .x-item-disabled .x-spinner-body,.af-item-disabled .x-item-disabled select,.af-item-disabled  .x-item-disabled textarea,.af-item-disabled .x-item-disabled .x-field-clear-container {
      color:#000;
      -webkit-text-fill-color: #000;
    }

Thread Participants: 1

film izle

hd film izle

film sitesi

takipci kazanma sitesi

takipci kazanma sitesi

güzel olan herşey

takipci alma sitesi

komik eğlenceli videolar