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

【问题标题】：How to add an item to ext js panel on click of the panel?如何在单击面板时将项目添加到 ext js 面板？
【发布时间】：2015-02-10 14:15:37
【问题描述】：

我想在面板中添加一个按钮到我单击的确切位置。

所以我尝试如下，这是我的Ext.widget 元素的结构

Ext.widget({ xtype : 'mz-form-widget', 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":"+"}); 更新

this.down('#container')

正在返回 null。

请给我你的建议？

【问题讨论】：

你看到了什么错误？
无法调用未定义的函数 addItem。我已更新问题详情。
因为'this'已经是容器了，看Saki最近的cmets就做this.add()
谢谢，但它对我不起作用。还有其他建议吗？

标签： javascript jquery extjs

【解决方案1】：

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

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

【讨论】：

感谢您的第二意见。但仍然添加也不起作用。我的行有问题：this.down('#container') 这行返回空对象，我不能添加/添加项目到未定义的对象。
监听器安装在容器本身上，所以this.add(...)应该这样做。
this.down('#container') 因为 null 看起来是范围问题，你可以试试 {element: 'el', scope: this, fn: function () {...}}
对于this.down('#container')，我仍然为空。
你试过this.add()吗？如果您从容器中下来，请确保您没有得到该容器。它不能是它自己的孩子。