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

Question

I want to add a button into a panel to the exact position where I clicked.

SO I have tried like as follows, this the structure of my Ext.widget element

Ext.widget({ xtype : 'mz-form-widget', itemId: 'shopableImage', anchor: "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'); }
                }
            }
        }

The following line throwing me error. this.down('#container').addItem({"xtype":"button","text":"+"}); UPDATE

this.down('#container')

is returning null.

Please give me your suggestions regarding this?

Answer 1

There are two problems here, one is causing the error and another is a potential time bomb:

1. addItem does not exist, the correct method name is add
2. You use id's on components and that is a very bad practice, however, it does not the immediate cause of the error