PDA

View Full Version : Template styling



parky128
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?

parky128
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}',
'</li>',
'</tpl>',
'</ul>')


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!