1. #1
    Sencha User
    Join Date
    Dec 2013
    Posts
    6
    Vote Rating
    1
    CSV is on a distinguished road

      0  

    Default Extjs add label cls?

    Extjs add label cls?


    Hi,
    Is there a way to alter a form field's label cls (other than replacing the field component altogether)?
    Our form has a few fields that will be required dynamically based on some checkboxes that the user selects.

    Code:
    Ext.define('MyForm', {
        extend: 'Ext.form.Panel',
        layout: 'vbox',
        defaults: {
            xtype: 'textfield',
            fieldCls: 'fieldClass',
            labelCls: 'labelClass',
            width: 200
        },
        items: [{
            fieldLabel: 'Sample field 1',
            itemId: 'field1',
            name: 'sample1'
        },{
            fieldLabel: 'Sample field 2',
            itemId: 'field2',
            name: 'sample2'
        },{
            fieldLabel: 'Sample required field',
            labelCls: 'labelClass requiredClass',
            itemId: 'field3',
            name: 'sample3'
        },{
            xtype: 'checkbox',
            itemId: 'check1',
            boxLabel: 'Option that makes field 1 required'
        },{
            xtype: 'checkbox',
            itemId: 'check2',
            boxLabel: 'Option that makes field 2 required'
        }]
    });
    To show that the fields are now required, there will be a red asterisk on the label. I have the css and I can display it if I define the field with this class, but can't do it dynamically. There's only addCls (in which nothing happens), and there is no addLabelCls (or addFieldCls).
    Any suggestions?
    Thanks in advance.

  2. #2
    Touch Premium Member suzuki1100nz's Avatar
    Join Date
    Apr 2011
    Location
    New Zealand
    Posts
    447
    Vote Rating
    62
    suzuki1100nz is a jewel in the rough suzuki1100nz is a jewel in the rough suzuki1100nz is a jewel in the rough suzuki1100nz is a jewel in the rough

      1  

    Default


    Hi,

    I dont think you can do this without an override.
    I would override the Ext.form.Labelable mixin and code your own setLabelCls

    I would also add a feature request for this function to be added to the mixin.
    Also you could ask for a new config on field.Base called 'mandatoryCls' and mandatory (or compulsory)
    that internally does the cls setting for you when the config is set at runtime.

  3. #3
    Sencha User
    Join Date
    Dec 2013
    Posts
    6
    Vote Rating
    1
    CSV is on a distinguished road

      0  

    Default


    After checking again, I saw that there is a requiredCls config for form fields. But the issue was that I couldn't change it on demand (from the checkboxes). Thanks for the hint, though.

    I ended up creating a new form that has separate 'label' and 'textfield' components, so that addCls() can be used directly. It's messy, but it's also the easiest workaround at hand; I'll try the Labelable override option when there's time.

    Code:
    Ext.define('MyForm', {
        extend            : 'Ext.form.Panel',
        layout            : 'vbox',
        alias              : 'widget.myform',
        
        initComponent    : function() {
            var me = this;
            var labelWidth = 120;
            var columnWidth = 290 - labelWidth - 5;
            var requiredCls = 'required';
            var labelConfig = {
                xtype    : 'label',
                width    : labelWidth,
                cls        : 'labelClass',
                padding    : 0,
                style    : 'height: 23px; margin: -5px 5px 0px 0px; line-height: 23px; vertical-align: center;'
            };
            
            Ext.apply(me, {
                defaults        : {
                    xtype        : 'textfield',
                    labelWidth    : labelWidth,
                    labelCls    : 'fieldClass',
                    fieldCls    : 'labelClass',
                    width        : 300,
                    hideLabel    : true
                },
                items            : [
                    Ext.apply({
                        itemId     : 'field1Label',
                        html        : 'Sample field 1'
                    }, labelConfig), {
                        name    : 'field1',
                        itemId    : 'field1Text'
                    },
                    Ext.apply({
                        itemId     : 'field2Label',
                        html        : 'Sample field 2'
                    }, labelConfig),{
                        name        : 'field2',
                        itemId        : 'field2Text'
                    },
                    Ext.apply({
                        itemId     : 'field3Label',
                        cls            : 'labelClass requiredClass',
                        html        : 'Sample required field'
                    }, labelConfig),{
                        name    : 'field3',
                        itemId    : 'field3Text'
                    },{
                        xtype: 'checkbox',
                        itemId: 'check1',
                        boxLabel: 'Option that makes field 1 required'
                    },{
                        xtype: 'checkbox',
                        itemId: 'check2',
                        boxLabel: 'Option that makes field 2 required'
                    }
                ]
            });
            
            me.callParent(arguments);
        }
    });
    
    Ext.define('MyController', {
        extend: 'Ext.app.Controller',
        views: ['MyForm'],
        
        ...
        
        init: function() {
            this.control({
                'myform #check1': {change: this.setRequiredField}
                'myform #check2': {change: this.setRequiredField}
            });
        },
        
        ...
        
        setRequiredField: function(checkbox) {
            if (checkbox.getItemId() == 'check1') {
                checkbox.up().down('field1').addCls('requiredClass');
            } else {
                checkbox.up().down('field2').addCls('requiredClass');
            }
        }
    });

    (The form would really be much shorter with the addCls functions suggested here, though...)

Thread Participants: 1

Tags for this Thread