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

Question

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

所以我试过如下，这是我的 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。

请给我你的建议？

Answer 1

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

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

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

How to add an item to ext js panel on click of the panel?

javascript

jquery

extjs