View Full Version : What is the ideal way to assign css classes to extended components?

3 Dec 2011, 1:13 PM
Lets say I have 3 components A, B and C. C extends from B extends from A. I need to assign classes to A, B and C, and the component classes need to be preserved in that order - i.e. the final C component's css classes must look something like 'classA classB classC' in html.

I know I can use cls to say @ A: cls: 'classA', @B: 'classA classB' and @C: 'classA classB classC'.

Is there any other way of doing it, so I don't have to repeat the names for extended components?

Please advise.


5 Dec 2011, 6:46 AM
If you use the same property the subclasses will overwrite the others... sort of. The prototype of each class is still in tact so you can still access the prototype like in the constructor or initComponent and append them.

5 Dec 2011, 6:20 PM
I agree this is annoying. Not sure there's any way to design the API to avoid it though.

Let's say we have:

Ext.define('A', {
cls: 'classA'

Ext.define('B', {
extend: 'A',
cls: A.prototype.cls + ' classB'

This avoids the repetition but it's pretty ugly. It won't cope well if the classes are loaded out of order either, in that case you'd need to do something with a class-loader callback... eugh.

An alternative is to call addCls (possibly in the constructor or initComponent). That way the values from the superclass won't be affected. This technique does have some drawbacks though, it's still a bit heavyweight for something so simple and it also poses problems if a subclass doesn't want to inherit the cls.