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,575
    Answers
    540
    Vote Rating
    311
    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,575
    Answers
    540
    Vote Rating
    311
    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

Turkiyenin en sevilen filmlerinin yer aldigi xnxx internet sitemiz olan ve porn sex tarzi bir site olan mobil porno izle sitemiz gercekten dillere destan bir durumda herkesin sevdigi bir site olarak tarihe gececege benziyor. Sitenin en belirgin ozelliklerinden birisi de Turkiyede gercekten kaliteli ve muntazam, duzenli porno izle siteleri olmamasidir. Bu yuzden iste. Ayrica en net goruntu kalitesine sahip adresinde yayinlanmaktadir. Mesela diğer sitelerimizden bahsedecek olursak, en iyi hd porno video arşivine sahip bir siteyiz. "The Best anal porn videos and slut anus, big asses movies set..." hd porno faketaxi