Функции создания и создания спрайтов ExtJS

Question

Я пытаюсь создать приложение ExtJS для создания поверхностей на основе XML-файла, а затем смогу добавить спрайты на этих поверхностях с помощью мыши. У меня возникают некоторые проблемы с фактическими функциями, которые создают поверхности и спрайты через параметры, которые можно получить из источников, перечисленных ранее. Мои объекты, которые я создаю, возвращаются неопределенными, когда я проверяю tham на значение в консоли JS. У меня нет никаких ошибок или предупреждений в JS, которые он сообщает. Вот код:

Ext.ns('myNameSpace');//create namespace to hold all variables 
    myNameSpace = { 
     init: function(){//initialize namespace 
      function surfaceCreator(name){//create surface based on parameter 
       var name = Ext.create('Ext.draw.Component', { 
        viewBox: false 
       }); 
       return name; 
      } 
      function spriteCreator(surfaceName,sprite,posX,posY){//draw sprite based on parameters 
       var sprite = Ext.create('Ext.draw.Sprite', { 
        type: 'circle', 
        x: posX, 
        y: posY, 
        radius: 25, 
        surface: surfaceName.surface, 
        fill: '#cc5' 
       });sprite.show(true); 
      } 
      var mySurface = 'mySurface';//this could be an xml value 
      var myCircle = 'myCircle';//this could be determined by numbering each one that is created. 
      var myActualSurface = surfaceCreator(mySurface);//call function to create surface and return surface name as an object 
      spriteCreator(myActualSurface,myCircle,20,20);//call function to create sprite on specified surface. Also, I could use the mouse coordinates to determine where the sprite should be drawn and make this trigger on 'click'. 
      var myWin = Ext.create('Ext.Window', {// Create a window to house the surfaces 
       width: 800, 
       resizeable: false, 
       height: 600, 
       layout: 'fit', 
       items: myActualSurface//This seems to be undefined somehow and I'm not sure why, as it is defined up above. 
      }).show(); 
     } 
    } 
Ext.onReady(myNameSpace.init,myNameSpace);//render namespace when webpage is ready. 

Если бы я мог получить второе мнение о том, что может происходить здесь, я был бы очень доволен. Если у кого-то есть решение (скорее всего, я просто что-то неправильно использовал), я был бы в восторге. Спасибо за ваше время и внимание.

Answer 1

Я думаю, что главная проблема здесь свойство "поверхность", см: http://docs.sencha.com/extjs/4.1.3/#!/api/Ext.draw.Sprite

Вы можете добавить спрайт к поверхности, используя следующие обозначения:

surfaceName.add(sprite); 

ИЛИ

var sprite = Ext.create('Ext.draw.Sprite', { 
        type: 'circle', 
        x: posX, 
        y: posY, 
        radius: 25, 
        // surface: surfaceName.surface, >> omit this line 
        fill: '#cc5' 
       }); 
{ 
xtype:'drawcomponent', 
items:[sprite] 
}