View Full Version : [OPEN] 'cls' attribute does not accept arrays

20 Aug 2012, 9:33 AM
In the official docs' description of the config property 'cls' (http://docs.sencha.com/touch/2-0/#!/api/Ext.Component-cfg-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.

20 Aug 2012, 10:28 AM
We'll get this fixed. For now use spaces.

20 Aug 2012, 10:43 AM
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.

13 Sep 2012, 6:42 AM
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.

Ext.define('Ext.ux.touch.fixes.SpinnerCls', { override:'Ext.field.Spinner',

applyCls:function(newCls, oldCls){
var cls = [];
if (Ext.isArray(newCls)){
cls = newCls;
}else {
Ext.Array.include(cls, Ext.baseCSSPrefix + 'spinner');
return cls;

updateComponent: function(newComponent) {

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. :)


18 Sep 2012, 7:16 AM
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.