Results 1 to 5 of 5

Thread: 'cls' attribute does not accept arrays

    You found a bug! We've classified it as DSGNR-2380 . We encourage you to continue the discussion and to find an acceptable workaround while we work on a permanent fix.
  1. #1
    Sencha User
    Join Date
    Feb 2012
    Posts
    117

    Default 'cls' attribute does not accept arrays

    In the official docs' description of the config property 'cls', it lists the attributes as String/String[].

    It is not possible to input an array in Architect, and therefore not possible to input custom classes on components like 'spinnerfield', which is pre-populated with x-spinner.

  2. #2
    Sencha User aconran's Avatar
    Join Date
    Mar 2007
    Posts
    9,488

    Default

    We'll get this fixed. For now use spaces.
    Aaron Conran
    @aconran

  3. #3
    Sencha User
    Join Date
    Feb 2012
    Posts
    117

    Default

    Quote Originally Posted by aconran View Post
    We'll get this fixed. For now use spaces.
    Thanks. I think the real bug I was experiencing is that the x-spinner control appends "-button" and "-button-down"/"-button-up" to the "cls" config. This means that the cls config I used - "x-spinner price" failed because it set the class on the down button to x-spinner price-button x-spinner price-button-down and likewise for the up button.

    Setting it to "price x-spinner" fixes the issue.

    Strangely enough, using "cls" with an array (['price', 'x-spinner'], edited manually in the js) sets the class to the unusual and broken value of price,x-spinner-button price,x-spinner-button-down.

    So it appears that allowing an array will break this component.

  4. #4
    Sencha Premium Member
    Join Date
    Oct 2011
    Location
    Duluth, MN
    Posts
    154

    Default

    Had the same problem, here's an override to fix the issue and make sure x-spinner stays in the cls list since spinner really needs to have that or it doesn't really work at all.

    Code:
    Ext.define('Ext.ux.touch.fixes.SpinnerCls', {    override:'Ext.field.Spinner',
    
    
        applyCls:function(newCls, oldCls){
            var cls = [];
            if (Ext.isArray(newCls)){
                cls = newCls;
            }else {
                cls.push(newCls);
            }
            Ext.Array.include(cls, Ext.baseCSSPrefix + 'spinner');
            return cls;
        },
        
        updateComponent: function(newComponent) {
                this.callParent(arguments);
    
    
                var innerElement = this.innerElement,
                    cls = this.getCls();
    
    
    
    
                if (newComponent) {
                    var newUpCls = [];
                    var newDownCls = [];
                    if (Ext.isArray(cls)){
    
    
                        Ext.Array.each(cls, function(clsName, index){
                            newUpCls.push(clsName + '-button');
                            newUpCls.push(clsName + '-button-up');
                            newDownCls.push(clsName + '-button');
                            newDownCls.push(clsName + '-button-down');
                        })
                    }else {
                        newUpCls.push(cls + '-button');
                        newUpCls.push(cls + '-button-up');
                        newDownCls.push(cls + '-button');
                        newDownCls.push(cls + '-button-down');
    
    
                    }
                    this.spinDownButton = Ext.Element.create({
                        cls : newDownCls.join(' '),
                        html: '-'
                    });
    
    
                    this.spinUpButton = Ext.Element.create({
                        cls : newUpCls.join(' '),
                        html: '+'
                    });
    
    
                    this.downRepeater = this.createRepeater(this.spinDownButton, this.onSpinDown);
                    this.upRepeater = this.createRepeater(this.spinUpButton,     this.onSpinUp);
                }
            }
    
    
    });
    I realllly love the override mechanism in Sencha.

    Thanks
    Bob

  5. #5
    Sencha User aconran's Avatar
    Join Date
    Mar 2007
    Posts
    9,488

    Default

    Looks like there are 2 separate bugs here. One that Sencha Architect does not allow for an array of cls configurations and two the problem outlined above with the Spinner.
    Aaron Conran
    @aconran

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •