Correct use of the id parameter

[codeathome]

Hi everyone. I'm new to Ext and am currently checking it out to see if I can use it in my future projects. I'm running into one snag.

I have need to access the HTML DOM created by Ext using an external application. When I set the id parameter of a button, the id is added to the surrounding div element instead of the button itself. This example is taken from examples/form/contact-form.js.


buttons: [{
text: 'Cancel',
handler: function() {
this.up('form').getForm().reset();
this.up('window').hide();
}
}, {
text: 'Send',
id: 'SendButton',
handler: function() {
if (this.up('form').getForm().isValid()) {
// In a real application, this would submit the form to the configured url
// this.up('form').getForm().submit();
this.up('form').getForm().reset();
this.up('window').hide();
Ext.MessageBox.alert('Thank you!', 'Your inquiry has been sent. We will respond as soon as possible.');
}
}
}]

This is the resulting HTML:


<div id="SendButton" class="x-btn x-box-item x-toolbar-item x-btn-default-small x-noicon x-btn-noicon x-btn-default-small-noicon" style="margin-left: 0px; margin-bottom: 0px; margin-right: 0px; margin-top: 0px; width: 75px; left: 301px; top: 0px; ">
<em class id="ext-gen1061">
<button type="button" hidefocus="true" role="button" autocomplete="off" id="ext-gen1060" style="width: 69px; ">
<span class="x-btn-inner" style="width: 69px; " id="ext-gen1062">Send</span>
<span class="x-btn-icon" id="ext-gen1063"></span>
</button>
</em>
</div>

Is there a way to get Ext to put that id into the <button> tag instead?

[skirtle]

That's a bit of an abuse of component ids.

Doesn't your external application support a CSS-style syntax for grabbing child elements rather than needing everything to have an id?

It looks like ExtJS 4.0.6 does assign an id to the button, take a look at the renderTpl in here:

http://docs.sencha.com/ext-js/4-0/source/Button.html#Ext-button-Button

Seems that wasn't in 4.0.2 though. You could do some tricks to add it (such as overriding the renderTpl) but I'd say it's a dangerous road to go down, twisting the framework to fit in with some external application.

[tvanzoelen]

It's strange, other formfield components have the same id value at dom level. Why is the Button different?

[skirtle]

I don't see any difference.

Try putting an id on a textfield. You'll see the id is placed on the surrounding div element. This is exactly the same as what happens with a button. It is important to realize that ExtJS components do not map directly onto their HTML equivalents: a textfield isn't just an HTML input box and a button isn't just an HTML button. Generally the id is placed on the outermost element for a component, the one returned by comp.getEl().