1. #1
    Sencha User
    Join Date
    Aug 2011
    Posts
    1
    Vote Rating
    0
    codeathome is on a distinguished road

      0  

    Default Unanswered: Correct use of the id parameter

    Unanswered: Correct use of the id parameter


    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.

    Code:
                    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:

    HTML Code:
    <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?

  2. #2
    Sencha Premium Member skirtle's Avatar
    Join Date
    Oct 2010
    Location
    UK
    Posts
    3,592
    Answers
    541
    Vote Rating
    323
    skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future

      0  

    Default


    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.

  3. #3
    Ext JS Premium Member tvanzoelen's Avatar
    Join Date
    Apr 2008
    Location
    Groningen - Netherlands
    Posts
    1,114
    Answers
    83
    Vote Rating
    30
    tvanzoelen has a spectacular aura about tvanzoelen has a spectacular aura about tvanzoelen has a spectacular aura about

      0  

    Default


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

  4. #4
    Sencha Premium Member skirtle's Avatar
    Join Date
    Oct 2010
    Location
    UK
    Posts
    3,592
    Answers
    541
    Vote Rating
    323
    skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future

      0  

    Default


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

Thread Participants: 2