在ExtJS中创建容器面板时出现问题

问题描述

我是ExtJS的新手，我想为ExtJS中的按钮创建一个容器面板，到目前为止，我设法做的就是尝试在类中添加一个简单的按钮，如下所示：

    Ext.define('MyClass.view.buttons',{
    extend: 'Ext.container.Container',alias: 'widget.MyClass',controller: 'MyClass',requires: [
      
       'MyClass.view.Main',],items   : [
        {
            xtype: 'button',text : 'My Button'
        }
    ]

});

也不会显示任何内容（控制台中没有报告的错误）。 请帮我解决这个问题。

解决方法

更新：

您可以使用handler或listeners属性来设置点击处理程序。我的代码仅供参考，将元素渲染到正文中当然会在页面上而不是在另一个元素内进行渲染。看一下这个更新后的示例，在该示例中，我已使用定义的组件的xtype属性在另一个自定义组件中使用它。

Ext.define('MyClass.view.buttons',{
  extend: 'Ext.container.Container',alias: 'widget.MyClass',xtype: 'myclass',items: [{
    xtype: 'button',text: 'Child Button Button',handler: function() {
        alert('You clicked the button!');
    }
  }]
});

Ext.define('MyClass.view.anotherButtons',alias: 'widget.MyAnotherClass',items: [{
    xtype: 'myclass'
  },{
    xtype: 'button',text: 'Parent Container Button'
  }]
});

Ext.create('MyClass.view.anotherButtons',{
  renderTo: Ext.getBody(),width: 400,height: 300,});

Ext.define('MyClass.view.buttons',text: 'My Button'
  }]
});
Ext.create('MyClass.view.buttons',});