JSFiddle - React, Tailwind, and code Playground
HTML
<link rel="stylesheet" href="http://docs.sencha.com/ext-js/4-0/extjs/resources/css/ext-all.css">
<div id="events"></div>
CSS
.clear{
clear:both;
}
#events{
width: 200px;
background:#fff;
position:absolute;
top: 0px;
left: 290px;
}
JavaScript
Ext.define('NS.CustomView', {
extend: 'Ext.DataView',
itemTpl: ["<div>{label}</div>",
"<p>MOUSE MOVE HERE. YOUR DIV IS HIDDEN :)</p>",
"<div class='ph_horz_carousel' id='ph_horz_carousel_{#}' style='display:none'>",
"<tpl for=\"subitems\">",
"<div class='ph_horz_item' id='horz_item_{#}' subitem_id='{#}'>",
"<img src='{inactive_img}' bsrc='{active_img}'/>",
"<span>{label}</span>",
"</div>",
"</tpl>",
"<div class='clear'></div>",
"</div>",
"<div class='clear'></div>"]
});
var ev = Ext.get('events');
var cv = Ext.create('NS.CustomView', {
renderTo: Ext.getBody(),
store: Ext.create('Ext.data.Store', {
data: [{
label: 'Movies',
subitems:[{
label: 'super',
active_img: 'http://upload.wikimedia.org/wikipedia/commons/thumb/d/d5/CD_autolev_crop.jpg/220px-CD_autolev_crop.jpg',
inactive_img: 'http://upload.wikimedia.org/wikipedia/commons/thumb/d/d5/CD_autolev_crop.jpg/220px-CD_autolev_crop.jpg',
launch_info: {
type: 'url',
target: ''
}
}]
}],
/**
* The css selector of the item to be interacted with
*/
itemSelector: '.ph_horz_item',
fields: ['label', 'subitems']
}),
listeners: {
itemmouseenter: function() {
alert('X');
ev.createChild({html: 'x'});
},
itemmouseleave: function() {
ev.createChild({html: 'leaving'});
},
}
});