PDA

View Full Version : [SOLVED] MouseMove in ContentPanel


fay
27 Jun 2008, 1:30 AM
I don't know what the heck I'm doing wrong here - perhaps lack of sleep is responsible, but I cannot get an extended ContentPanel to capture the mouseMove event. Can anyone see what I'm doing wrong:


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Test</title>

<link rel="stylesheet" type="text/css" href="/ext111/resources/css/ext-all.css" />

<script type="text/javascript" src="/ext111/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="/ext111/ext-all-debug.js"></script>

<script type="text/javascript">
Ext.BLANK_IMAGE_URL = '/ext111/resources/images/default/s.gif';

Ext.CurvePanel = function(el, config, content){

Ext.CurvePanel.superclass.constructor.call(this, el, config, content);

//TODO...
};

Ext.extend(Ext.CurvePanel, Ext.ContentPanel,
{
setTracking: function(trackingOn)
{
if (trackingOn == true)
{
if (Ext.isIE)
this.el.on('mousemove', this.MouseTrackIE, this); // this.getEl()...?
else
this.el.on('mousemove', this.MouseTrackFF, this);
}
else
{
this.el.un('mousemove');
}
},

MouseTrackIE: function(e)
{
alert('IE MouseMove');
},

MouseTrackFF: function(e)
{
alert('FF MouseMove');
}
});

var TestUI = function(){
var cpCurve;

return{
init: function()
{
var layout = new Ext.BorderLayout(document.body,
{
north: {split:true, initialSize: 80},
east: {split:true, initialSize: 130},
center: {autoScroll: true},
south: {split:true, initialSize: 280}
});

cpCurve = new Ext.CurvePanel('curve');

layout.beginUpdate();
layout.add('north', new Ext.ContentPanel('toolbar'));
layout.add('east', new Ext.ContentPanel('data'));
layout.add('center', cpCurve);
layout.add('south', new Ext.ContentPanel('status'));
layout.endUpdate();

cpCurve.setTracking(true);
}
}
}();

Ext.onReady(function() {
TestUI.init();
});
</script>

</head>

<body>
<div id="container">
<div id="toolbar"></div>
<div id='data'></div>
<div id='curve'></div>
<div id='status'></div>
</div>
</body>
</html>

Thanks in advance,

Fiachra
fay
27 Jun 2008, 3:25 AM
Turns out the following does the trick, though I haven't a clue as to why:


cpCurve = new Ext.CurvePanel('curve', {fitToFrame: true});