Results 1 to 2 of 2

Thread: [SOLVED] MouseMove in ContentPanel

  1. #1
    Sencha User fay's Avatar
    Join Date
    Apr 2007
    Location
    Ireland
    Posts
    1,750

    Default [SOLVED] MouseMove in ContentPanel

    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:

    Code:
    <!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

  2. #2
    Sencha User fay's Avatar
    Join Date
    Apr 2007
    Location
    Ireland
    Posts
    1,750

    Default

    Turns out the following does the trick, though I haven't a clue as to why:

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

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •