extjs: how can I add event handlers to a component in its raw object form (xtype)

Question

I have an extjs component in its raw object type, for example:

var x = {
   xtype: 'button', 
   text: 'Delete', 
   handler: whatever, 
   more:config, 
   more2: config2};

Now I want to add some listener to x. In my scenario I don't have access to the x object before or right after it is created. I just want to add an event handler when it is just a javascript object without overwriting existing handlers. How can that be done?

Answer 1

You can use the listeners config to do this

{
   xtype: 'button', 
   text: 'Delete', 
   handler: whatever, 
   more:config, 
   more2: config2,
   listeners:{
      scope : this,
      event1 : function(){},
      event2 : function(){}
   }

};

Answer 2

A listeners config is needed:

var x = {
   xtype: 'button', 
   text: 'Delete', 
   handler: whatever, 
   more:config, 
   more2: config2,
   listeners: {
     click: function() {
       ...       
     },
     render: function() {
       ...
     }
   }
};