Как добавить элемент в панель ext js при щелчке панели?

Question

Я хочу добавить кнопку в панель в то место, где я нажал.

SO Я попытался, как так, это структура моего Ext.widget элемента

Ext.widget ({ xtype: "М.З. форм-виджет, Itemid: 'shopableImage', якоря:" 100%»,

defaults: { 
     xtype: 'textfield', 
     listeners: { 
      controller: '', 
      change: function (cmp) { 
       controller = cmp; 
       cmp.up('#shopableImage').updatePreview(); 
      } 
     } 
    }, 


    items: [ 
     { 
      xtype: "tacofilefield", 
      itemId: "imageUploadButton", 
      text: "Upload images" 
     }, 
     { 
      xtype: 'panel', 
      width: 350, 
      height: 350, 
      itemId:'container', 
      id:'container', 
      bodyStyle:{"background":"url('http://www.easyvectors.com/assets/images/vectors/vmvectors/jeans-girl-vector-27.jpg')","border":"1px solid #eee"}, 
      listeners: { 
       click: { 
        element: 'el', //bind to the underlying el property on the panel 
        fn: function(a,b,c,d){ 
         console.log(a.browserEvent.clientX - b.offsetLeft); 
         console.log(a.browserEvent.clientY - b.offsetTop); 
         console.log(c); 
         this.down('#container').addItem({"xtype":"button","text":"+"}); 
        } 
       }, 
       dblclick: { 
        element: 'body', //bind to the underlying body property on the panel 
        fn: function(){ console.log('dblclick body'); } 
       } 
      } 
     } 

следующая строка бросает мне ошибку. this.down('#container').addItem({"xtype":"button","text":"+"}); UPDATE

this.down('#container') 

возвращается null.

Просьба представить свои предложения по этому вопросу?

Answer 1

Есть две проблемы, одна вызывает ошибку, а другой является потенциальной бомбой замедленного действия:

1. addItem не существует, правильное имя метода add
2. Вы можете использовать идентификаторы на компонентах и это очень плохая практика, однако, это не является непосредственной причиной ошибки