PDA

View Full Version : mouseover/hover on xtemplate



Pat Emi
19 Oct 2012, 7:51 AM
Hi,

The mouse effect is not working on my xtemplate.
my xtemplate..


var tpl = new Ext.XTemplate(
'<tpl for=".">',
'<table class="view_table">',
'<tr>',
'<tpl for="description">',
'<td><p>{img}&nbsp; &nbsp; &nbsp;{summary}<input type="checkbox" class="check"/></p></td>',
'<tpl if="xindex % 1 === 0">',
'</tr><tr>',
'</tpl>',
'</tpl>',
'</tr>',
'</table>',
'</tpl>'
);

my dataview...


var myDataView = Ext.create('Ext.DataView', {
width : 500,
height : 200,
overCls :'view_table',
renderTo : Ext.getBody(),
store : Ext.getStore('viewStore'),
tpl : tpl
});

my css


.view_table{
color:#3e6aaa !important;
}


Please help, is there something i'm doing wrong?
Thanks,

Pat.

mitchellsimoens
23 Oct 2012, 6:46 AM
With a couple changes to get it to work with 4.1.1 (highlighted in red) this is working for me:


var tpl = new Ext.XTemplate(
'<tpl for=".">',
'<table>',
'<tr>',
'<tpl for="description">',
'<td><p>{img}&nbsp; &nbsp; &nbsp;{summary}<input type="checkbox" class="check"/></p></td>',
'<tpl if="xindex % 1 === 0">',
'</tr><tr>',
'</tpl>',
'</tpl>',
'</tr>',
'</table>',
'</tpl>'
);

var myDataView = Ext.create('Ext.view.View', {
width : 500,
height : 200,
overItemCls : 'view_table',
itemSelector : 'table',
renderTo : Ext.getBody(),
store : {
fields : ['description'],
data : [
{
description : [
{
summary : 'One'
},
{
summary : 'Two'
}
]
},
{
description : [
{
summary : 'Three'
},
{
summary : 'Four'
}
]
}
]
},
tpl : tpl
});