Results 1 to 3 of 3

Thread: Error ApplyTo on Existing Radio Button

  1. #1
    Ext JS Premium Member
    Join Date
    Sep 2007
    Location
    CT
    Posts
    462

    Default Error ApplyTo on Existing Radio Button

    I have a set of radio buttons that need to be inside of a span due to wrapping, if I use the renderTo and use a div it works but the div creates a new line and the yes / no radio buttons are no longer next to the text. If I use the applyTo I get an error on line 55778.

    Code:
    Ext.getCmp(el.dom.id).setValue(false);
    error: 'Ext.getCmp(...)' is null or not an object


    The layout looks similar to this including the width and wrapping, the question is fictional and was changed to protect the innocent so it may not make sense.:

    1. Was the car purchased or driven during the month of August or during the time the driver
    had a lease on the vehicle? [] Yes [] No

    The markup
    Code:
    <span id='lSection1Q1' style="font-size:12px;padding:2px 2px 2px 2px;font-weight:bold;float:left;">Was the car purchased or driven during the month of August or during the time the driver had a lease on the vehicle?                     
    <input id='iSection1A1-1' class=" x-form-radio x-form-field" name='Section1A1' type='radio' autocomplete="off" tabindex="17"/>
    <span style="font-size:12px;">Yes</span>
    <input id='iSection1A1-2' name='Section1A1' type='radio' tabindex="18"/><span style="font-size:12px;">No</span>
    </span>
    The script
    Code:
            var iSection1A1Yes =  new Ext.form.Radio({
                id:"iSection1A1-1",
                name:"Section1A1",
                applyTo: "iSection1A1-1",
                checked:false,
                disabled:false
             });

  2. #2

    Default

    I'm having almost the exact same issue with a more complicated example. Good to know that it's not my code that's getting in the way.

    Any advice?

  3. #3
    Sencha User Condor's Avatar
    Join Date
    Mar 2007
    Location
    The Netherlands
    Posts
    24,245

    Default

    Because the radio buttons are in the same group you will need to create them both before applying them to the markup, e.g.
    Code:
    var iSection1A1Yes =  new Ext.form.Radio({
      id:"iSection1A1-1",
      name:"Section1A1",
      checked:false,
      disabled:false
    });
    var iSection1A1No =  new Ext.form.Radio({
      id:"iSection1A1-2",
      name:"Section1A1",
      checked:false,
      disabled:false
    });
    iSection1A1Yes.applyToMarkup('iSection1A1-1');
    iSection1A1No.applyToMarkup('iSection1A1-2');
    This won't solve your alignment problem though, because applyTo will also create a div wrapper for the radio button.
    You can solve this by using different markup: The lSection1Q1 element needs to be display:block and the inner x-form-check-wrap divs need to be float:left. The first x-form-check-wrap div also needs a left margin to make room for the label (which needs to be position:relative).

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •