面板中的extjs动态按钮

Question

拥有此代码

Ext.define('C.YmkDetPanel', {
    extend: 'Ext.Panel',
    xtype: 'YmkDetPanel',
    conttroller: 'ccc',

    viewModel: {
        type: 'ymkDetModel'
    },

    bind: {
    html: '<div> {zzz} </div> <div id = "button"> </div>'

    },
    listeners: {
        painted: function (  ) {
            new Ext.Button({
                renderTo: 'button',
                scope: this,
                text: 'Click Me',
                listeners: 
                {
                    tap: function() {
                        alert(this.up());
                    }               
                }
            }); 
        }
    },  
    initComponent: function() {


    this.callParent(arguments);                             
    }           
});

我看到已创建按钮。 但是单击时this.up（）为null。这是按钮。

如何从按钮访问C.YmkDetPanel？在Painted事件中，此为“ Ext.dom.Element”

Answer 1

使用一个容器并将两个项目分别嵌套fiddle：

Ext.define('C.YmkDetPanel', {
    extend: 'Ext.Panel',
    xtype: 'YmkDetPanel',

    viewModel: {
        data: {
            zzz: 'foo'
        }
    },

    items: [{
        xtype: 'component',
        bind: '{zzz}'
    }, {
        xtype: 'button',
        text: 'Click me'
    }]
});

Ext.application({
    name : 'Fiddle',

    launch : function() {
        Ext.Viewport.add({
            xtype: 'YmkDetPanel'
        });
    }
});