PDA

View Full Version : how to apply CSS class to XTemplate



vnggui
18 Oct 2013, 4:26 PM
XTemplate can take inline CSS style, but not working with separate CSS class.
Is that possible to apply CSS class to XTemplate?



<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<meta charset="UTF-8"/>
<link rel="stylesheet" href="../ext-421/resources/css/ext-all.css">
<script src="../ext-421/ext-all-debug-w-comments.js"></script>
<style>
<!-- CSS not working -->
b:{
margin:25px
}
div:{
margin:10px; width:500px; height:80px; border:1px dotted;border-radius:10px;padding:8px 10px 2px 20px;
}
</style>
<title>Ext XTemplate2</title>
<script type="text/javascript">

Ext.onReady(function() {
var data = [{
color : "#00FF66",
name : 'Json Mraz',
gentle : 'male',
song : ['Live high', 'Butterfly', 'You and I', 'Beautiful mess']
},{
color : "#0066FF",
name : 'Jack Johnson',
gentle : 'male',
song : ['You and Your Heart', 'Turn Your Love', 'My Little Girl']
}];
data.sort('song', 'DESC');

var myTpl = Ext.create('Ext.XTemplate',
'<tpl for=".">',
<!-- CSS working -->
'<div style="background-color: {color};margin:10px; width:500px; height:80px; border:1px dotted;border-radius:10px;padding:8px 10px 2px 20px; ">',
'<b style="margin:25px"> Name :</b> {name} <br/>',
'<b> Gentle :</b> {gentle} <br/>',
'<b> Song: </b>',
'<tpl for="values.song">',
'{.}', // print current value
'{[ (xindex < xcount) ? ", " : "" ]}', // ternary + for loop
'</tpl>',
'<br/>',
'</div>',
'</tpl>',
{
compiled : true
}
);
myTpl.append(Ext.getBody(), data);
});
</script>
</head>
<body>
</body>
</html>

stevenrr
18 Oct 2013, 7:22 PM
check out this: http://xtemplate.net/XTemplate/build/xtemplate-0.4/Tutorial/3_css_selectors.html

evant
18 Oct 2013, 8:38 PM
Inline or class it doesn't matter, it will just generate the markup. Your class selector is probably incorrect.

vnggui
21 Oct 2013, 3:06 PM
evant,

Could you point me in the attached sample code( working sample), how can it works if replace inline CSS style to <style> </style> section? especially how {color} can be passed into <style> CSS ?

thanks ahead,

vng

evant
21 Oct 2013, 4:05 PM
Your css is wrong, get rid of the colons from the styles.



b {
}

div {
}