View Full Version : Ext.Button component id

21 Jun 2009, 10:21 PM
Hi all,
I've assigned an id to an Ext.button component (this is the code)

returnnew Ext.Button(
id : 'dropbtn3',
tooltip : 'Sales order management',
icon : '/images/BkgFavorites.png',
iconAlign : 'center',
scale : 'medium'


During run-time the is is assigned to button container (table) and button id is auto generated
(this is the html piece)

<table id="dropbtn3" class="x-btn x-btn-icon" cellspacing="0">
<tbody class="x-btn-medium x-btn-icon-medium-center">
<td class="x-btn-ml">
<td class="x-btn-mc">
<em class="" unselectable="on">
<button id="ext-gen86" class="x-btn-text" type="button" style="background-image: url(/images/BkgFavorites.png);"> </button>
<td class="x-btn-mr">

Is there a way have during runtime the button id in the component and not in container?

Thank you very much.

22 Jun 2009, 3:49 AM
I am interested in this as well. The fact that the button itself has an auto-generated ID breaks our automated tests.

22 Jun 2009, 4:00 AM
So you are looking for something like:

Ext.override(Ext.Button, {
initButtonEl : function(btn, btnEl){
this.el = btn;
//this.el.dom.id = this.el.id = this.id;
btnEl.dom.id = btnEl.id = this.id;
btnEl.setStyle('background-image', 'url(' +this.icon +')');
if(this.tabIndex !== undefined){
btnEl.dom.tabIndex = this.tabIndex;
this.setTooltip(this.tooltip, true);
this.mon(btn, {
scope: this,
mouseover: this.onMouseOver,
mousedown: this.onMouseDown
this.mon(this.menu, {
scope: this,
show: this.onMenuShow,
hide: this.onMenuHide
var repeater = new Ext.util.ClickRepeater(btn, Ext.isObject(this.repeat) ? this.repeat : {});
this.mon(repeater, 'click', this.onClick, this);
this.mon(btn, this.clickEvent, this.onClick, this);

22 Jun 2009, 4:14 AM
Can we consider it a bug so ?
Usually if I force an id, I would like that using the getCmp("xxx"), I will get my component...

22 Jun 2009, 4:37 AM
Ext.getCmp(id) should always return the component with the id (and it does in this case). But this is not true for Ext.get(id) (Ext tries to assign the id to one the elements created for the component, but this is not guaranteed).

Your problem is that a button consists of several elements and that the id is assigned to the <table> element instead of the <button> element.

This is not a bug, just not what you were expecting.