如何在单击面板时将项目添加到ext js面板？

我想在面板中添加一个按钮到我点击的确切位置。如何在单击面板时将项目添加到ext js面板？

SO我试图像如下，这是我的Ext.widget元件

Ext.widget（{ 的xtype的结构： 'MZ-形插件'，的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。

请给我你的建议吗？

来源

2015-02-10 Dipak

你看到了什么错误？ – mindparse 2015-02-10 14:25:58

无法调用未定义的函数addItem。我已更新问题的详细信息。 – Dipak 2015-02-11 07:12:38

因为'this'已经是容器了，请参阅Saki最近的评论只是做这个.add（） – mindparse 2015-02-11 07:15:06

这里有两个问题，一个是造成错误，另一个是潜在的定时炸弹：

addItem不存在，正确的方法名是add
您对组件和使用的id是一个非常糟糕的做法，但是，它并不是错误的直接原因

来源

2015-02-10 14:58:07 Saki

感谢您的第二个意见。但仍然添加也不起作用。我有问题的行：'this.down（'＃容器'）' 这行返回我空对象，我不能做add/addItem到一个未定义的对象。 – Dipak 2015-02-10 17:33:23

监听器安装在容器本身上，所以'this.add（...）'应该这样做。 – Saki 2015-02-10 19:20:46

this.down（'＃container'）as null看起来像一个示波器问题，你可以尝试 {element：'el'，scope：this，fn：function（）{...}} – Luiguis 2015-02-11 15:36:49

如何在单击面板时将项目添加到ext js面板？

回答

相关问题