title: Uncaught TypeError: Cannot read property Add of undefined
body: <p>HI im getting this error after executing my code. It says Uncaught TypeError: Cannot read property 'add' of undefined index.html:24
  (anonymous function)</p>
  
  <p>index.html </p>
  
  <pre><code>&lt;link rel="stylesheet" type="text/css" href="resources/css/ext-all.css"&gt;
  &lt;script type="text/javascript" src="ext-all.js"&gt;&lt;/script&gt;   
  &lt;/head&gt;
  &lt;body&gt;
  &lt;script&gt;
  // Create a draw component
   var drawComponent = Ext.create('Ext.draw.Component', {
  viewBox: false
  });
  
  // Create a window to place the draw component in
  Ext.create('Ext.Window', {
  width: 220,
  height: 230,
  layout: 'fit',
  items: [drawComponent]
  }).show();
  
  // Add a circle sprite
  var myCircle = drawComponent.surface.add({
  type: 'circle',
  x: 100,
  y: 100,
  radius: 100,
  fill: '#cc5'
   });
  
  // Now do stuff with the sprite, like changing its properties:
  myCircle.setAttributes({
    fill: '#ccc'
   }, true);
  
  // or animate an attribute on the sprite
  myCircle.animate({
  to: {
      fill: '#555'
  },
  duration: 2000
   });
  
   // Add a mouseup listener to the sprite
    myCircle.addListener('mouseup', function() {
    alert('mouse upped  ryru6!');
   });
  </code></pre>
  
  <ol>
  <li><p>i have tried this code from sencha ext js  documentataion website.</p>
  
  <ul>
  <li>here is link of output image <a href="http://postimg.org/image/9r6kb7wxb/" rel="nofollow">http://postimg.org/image/9r6kb7wxb/</a>. </li>
  </ul></li>
  </ol>