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/so...-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().