PDA

View Full Version : Custom CSS Properties



fennecFox
30 Apr 2014, 9:40 AM
Hi

I have a custom component that uses the following CSS:




.customStyle{

border: 2px solid black;
border-radius: 5px;
width: 55px;
height: 22px;
custom-property: 30 */ custom */
}




You can see that 'custom-property' is a custom CSS style property that I would like to access in my custom component code. I try to use
this.el.getStyle('custom-property') but it returns 'undefined', however it returns the other CSS property values successfully like 'border' and 'width' for example.

Am I doing something wrong or are custom style properties not even supported?

jsakalos
30 Apr 2014, 10:03 AM
How does your component use the class? Post the component configuration please.

skirtle
30 Apr 2014, 10:04 AM
My understanding is that browsers discard any CSS properties they don't understand, so there's no way for ExtJS to access them. Do you have any reason to believe otherwise?

fennecFox
30 Apr 2014, 10:08 AM
How does your component use the class? Post the component configuration please.




Ext.define('my.custom.component', {
extend: 'Ext.container.Container',
alias: 'widget.custom',



config: {
cls: 'customStyle'
},

fennecFox
30 Apr 2014, 10:11 AM
My understanding is that browsers discard any CSS properties they don't understand, so there's no way for ExtJS to access them. Do you have any reason to believe otherwise?

This is what I feared. So there's no way to allow custom CSS style properties in ExtJS then? So components can't have custom styles? Coming from a Flex background this was pretty standard stuff.

jsakalos
30 Apr 2014, 10:11 AM
Hmm, shouldn't it read
cls:'customStyle'?

fennecFox
30 Apr 2014, 10:17 AM
Hmm, shouldn't it read
cls:'customStyle'?

Sorry, yes that is what I meant. I simply substituted real names with placeholder ones. The other styles are applied fine, I just can't get hold of my custom css property

jsakalos
30 Apr 2014, 10:25 AM
Well, as skirtle says, browsers discards css properties they don't understand. You could probably use custom element properties (they stay untouched). Or your problem has a solution that needs neither element nor css custom property.

skirtle
30 Apr 2014, 10:38 AM
The properties content and background-position are sometimes used to encode extra information. They are standard CSS properties but in many cases they don't have any real effect, so you can use them for this purpose.

However, it gets nasty if you need to encode a lot of information because you can't cascade them separately.


So there's no way to allow custom CSS style properties in ExtJS then? So components can't have custom styles? Coming from a Flex background this was pretty standard stuff.

I agree, it sucks, but there's nothing ExtJS can do about it, apart from maybe giving up on CSS as the primary abstraction for styling (not likely to happen). ExtJS itself uses the properties I mentioned above for passing around framing information for old IEs. Off the top of my head I believe 4.0 & 4.1 used background-position and 4.2 uses content.

fennecFox
1 May 2014, 2:11 AM
Thanks Skirtle for the information. The CSS used in Flex doesn't completely follow the CSS specification, allowing you to do things that aren't normally supported, hence the confusion my end.

It's good to know about the properties that could potentially be used to store information, but it seems a bit 'hacky' to use them, so I'll carry on with using a property in the code instead.

skirtle
1 May 2014, 2:54 AM
For the sake of completeness, I thought I should mention that some libraries approach this problem by loading the CSS themselves (via AJAX), parsing it and then reading out whatever information they see fit. Obviously this is not a light-weight solution.