View Full Version : Template styling

29 Nov 2011, 7:32 AM
I am trying to get some styling working on a template config but no matter what I do, I cannot get a css class in a separate stylesheet I have included to be applied.

My config is as follows:

Ext.define('PinpointersTouch.view.UnitList', {
extend: 'Ext.List',
xtype: 'unitslist',
config: {
fullscreen: true,
itemTpl: '<img src="http://connect.pinpointers.com/Images/MapIcons/10113.gif"/> - {UnitName}<br/><span class="journeyDetail">{Location}</span>',
store: 'Units'

I can see my stylesheet is being downloaded by the browser, but when I inspect the elements on my list component I can see the span tags with the journeyDetail css class, but the css debug window in chrome is not showing this is being applied. Is there a certain include order I need to adhere too?

29 Nov 2011, 8:07 AM
I have figured this out, its down to my poor understanding of CSS selector usage. I am now getting to grips with this.

So consider the following XTemplate definition:

itemTpl: new Ext.XTemplate(
'<ul id="unitList">',
'<tpl for=".">',
'<li class="journeyDetail">',
'<img src="http://connect.pinpointers.com/Images/MapIcons/10113.gif"/> - {UnitName}<br/>{Location}',

With the following css selector in my additional stylesheet, any text gets displayed in italics:

#unitList li.journeyDetail{
font-style: italic;
font-size: 12px;
color: #666;

Seems so simple now!