ExtJS 4: как добавить кнопку в любом пользовательской формы

Question

В настоящее время я пытаюсь добавить пользовательскую кнопку, которая будет в состоянии назвать когда-либо пользователь хочет добавить новую кнопку с помощью ExtJS 4.

Вот TimeButton.js файл, который я хочу использовать для создания кнопки

Ext.namespace("Ext.controls"); 

Ext.create('Ext.Button', { 
text: 'Time', 
renderTo: Ext.getBody(), 
handler: function() { 
    alert('The current time is '+Date()) 
} 
}); 

Ext.reg('timebutton', Ext.controls.TimeButton); 

но когда-либо я пытаюсь добавить его в любой форме, я получаю следующую ошибку

types[config.xtype || defaultType] is not a constructor 

Или было бы лучше, чтобы сделать что-то вот так

Ext.controls.TimeButton = Ext.extend(Ext.Panel, { 

initComponent: function(){ 


    Ext.apply(this, {      
      frame: true 
      ,height: 330  
      ,layout: 'border' 
      ,layout: 'column' 
      ,split: true 
      ,cls: 'DocumentWindow' 
      ,items: [] 

    }); 

    this.documentGrid = new Ext.controls.DocumentGrid({height: 220, 
       agentId : this.agentId, 
       columnWidth: 0.5}) 

    Ext.controls.DocumentPanel.superclass.initComponent.apply(this, arguments); 


} 

Из того, что я понимаю, это происходит при попытке создать экземпляр (создать) компонент, который не существует, но я не вижу, где может быть ошибка! есть ли ошибка в коде, который я опубликовал?

Answer 1

Определите свою кнопку как класс, зарегистрируйте ее для использования с xtype, предоставив alias и создайте экземпляр в родительском контейнере items. Пример Here.