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

Question

我是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'
}
]
});

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

Answer 1

更新：

您可以使用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', {
extend: 'Ext.container.Container',
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', {
extend: 'Ext.container.Container',
alias: 'widget.MyClass',
items: [{
xtype: 'button',
text: 'My Button'
}]
});
Ext.create('MyClass.view.buttons', {
renderTo: Ext.getBody(),
width: 400,
height: 300,
});