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

Question

我是 ExtJS 的新手，我想在 ExtJS 中为我的按钮创建一个容器面板，到目前为止我设法做的就是尝试在我的 class 中添加一个简单的按钮，就像这样:

    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,
});

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

Problem creating a container Panel in ExtJS

javascript

extjs

extjs4