Override getId

[jmc42]

Hi

I am trying to override the getId method of Ext.Component using this code:

var baseMethod = Ext.Component.prototype.getId;
Ext.override(Ext.Component,{


getId: function() {

var id = baseMethod(arguments);


console.log("id: "+id);
return id;


} // getId
});

When I do this I get an error in Component.js:

actionEl.dom is undefined Component.js Line 353

initAria: function() {
350 var actionEl = this.getActionEl(),
351 role = this.ariaRole;
352 if (role) {
353 actionEl.dom.setAttribute('role', role);
354 }
355 },

Any ideas what is causing this to fall over?

James

[scottmartin]

James,

Can I ask what your goal is here to override the auto generated id? to be same id as the prototype?

Regards,
Scott.

[jmc42]

<br>Hi Scott<br><br>In fact it is not getId that I want to override but the default id generation - I am trying to find a way of overriding the way ids are autogenerated so that you can reliably record tests with the Selenium IDE.<br><br>James<br><br><br><font color="#3e3e3e" face="'Helvetica Neue', Arial, 'Lucida Grande', sans-serif"><span style="font-size: 14px; line-height: 19px;"><br></span></font>

[scottmartin]

The id's as based on xtype and the start by incremental numbers from the component level
panel-1009 if you do not use the override



Ext.override(Ext.AbstractComponent,{

getAutoId: function() {
this.autoGenId = true;
return ++Ext.AbstractComponent.AUTO_ID;
}
});

Ext.override(Ext.Component,{
__getId: function() { // here for reference
var me = this,
xtype;

if (!me.id) {
xtype = me.getXType();
if (xtype) {
xtype = xtype.replace(Ext.Component.INVALID_ID_CHARS_Re, '-');
} else {
xtype = Ext.name.toLowerCase() + '-comp';
}
me.id = xtype + '-' + me.getAutoId(); // AbstractComponent
}
return me.id;
},

getId: function() {
var me = this,
xtype;

// use xtype = me.getXType() code from above
// or define as needed

if (!me.id) {
me.id = xtype + '-' + 'myrandom_value';
}
return me.id;
}

});


Ext.onReady(function(){

var panel = Ext.create('Ext.panel.Panel', {
height: 400,
width: 400,
renderTo: Ext.getBody()
});

console.log(panel.id);

});


Regards,
Scott.