What's New?

RadioGroup

  1. #1
    Jan 30, 2009, 12:32 AM

    RadioGroup

    I am using the ext radio group and would like to add javascript to show and hide certain <table id="1"> based on what radio button is clicked. I've tried using a listener on change although I could not get it to work.

    Is there an example of how I can make this work. I have 5 radio buttons and 5 tables that go with each one.

    jason
  2. #2
    Jan 30, 2009, 12:17 PM

    RE: RadioGroup

    Hi,

    For quick response please show how you try to do it*


  3. #3
    Jan 30, 2009, 1:40 PM

    RE: RadioGroup 



    
<%@ Register Assembly="Coolite.Ext.Web" Namespace="Coolite.Ext.Web" TagPrefix="ext" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>Untitled Page</title>


    <script language="javascript"> 


 function changeType(id) {
  
 var i
 var totalLinks
 totalLinks =  2
 var compareID
 var hideTable
 
 
  for(i=1; i<totalLinks; i++) { 
 compareID = ('Layer' + i + '');
  if (compareID != id) {
     hideTable = ('Layer' + i + '');
   var row = &#100;ocument.getElementById(hideTable);
    row.style.display = 'none';
    }
  }


  var row = &#100;ocument.getElementById(id);
  row.style.display = 'block';


}
  
  
    </script>


</head>
<body>
    <form id="form1" runat="server">
    <ext:ScriptManager ID="ScriptManager1" runat="server" />
    <ext:TabPanel ID="TabPanel1" runat="server" ActiveTabIndex="0" Frame="true">
        <Tabs>
            <ext:Tab ID="Tab1" runat="server" Title="Info" BodyStyle="padding:2px;">
                <Body>
                </Body>
            </ext:Tab>
            <ext:Tab ID="Tab2" runat="server" Title="Dates" BodyStyle="padding:2px;">
                <Body>
                    <table>
                        <tr>
                            <td>
                                <ext:RadioGroup ID="Type" runat="server" FieldLabel="Type" ColumnsNumber="1"
                                    ItemCls="x-check-group-alt">
                                    <Items>
                                        <ext:Radio ID="None" runat="server" BoxLabel="0 " Checked="true">
                                            <Listeners>
                                                <Change Fn="changeType('Layer1')" />
                                            </Listeners>
                                        </ext:Radio>
                                        <ext:Radio ID="Daily" runat="server" BoxLabel="1 ">
                                            <Listeners>
                                                <Change Fn="changeType('Layer2')" />
                                            </Listeners>
                                        </ext:Radio>
                                        <ext:Radio ID="Weekly" runat="server" BoxLabel="2 " />
                                        <ext:Radio ID="Monthly" runat="server" BoxLabel="3 " />
                                        <ext:Radio ID="Yearly" runat="server" BoxLabel="4 " />
                                    </Items>
                                </ext:RadioGroup>
                            </td>
                            <td>
                                <table id="Layer1" name="Layer1" width="100%" border="0" align="left" cellpadding="0"
                                    cellspacing="3">
                                    <tr>
                                        <td>0
                                        </td>
                                    </tr>
                                </table>
                                <table id="Layer2" name="Layer2" bgcolor="#FFFFCC" width="100%" border="0" align="left"
                                    cellpadding="0" cellspacing="3">
                                    <tr>
                                        <td align="left" valign="top">
                                            2
                                        </td>
                                    </tr>
                                </table>
                            </td>
                        </tr>
                    </table>
                </Body>
            </ext:Tab>
            <ext:Tab ID="Tab3" runat="server" Title="Details" BodyStyle="padding:2px;">
                <Body>
                </Body>
            </ext:Tab>
        </Tabs>
    </ext:TabPanel>
    </form>
</body>
</html>
  4. #4
    Jan 30, 2009, 2:08 PM

    RE: RadioGroup

    Hi,

    1. Your hs for loop is incorrect. If you start from 1 then need include last number
    for (i = 1; i <= totalLinks; i++) {*


    2. Set width for td (your td with tables is filling all spaces)


    3. Set Radio listener (instead Change)
    <Check Handler="if(checked){changeType('Layer1');}" />



  5. #5
    Jan 30, 2009, 2:58 PM

    RE: RadioGroup

    It worked. thank you very much.

Similar Threads

  1. [CLOSED] RadioGroup
    By supera in forum 2.x Legacy Premium Help
    Replies: 2
    Last Post: Jul 04, 2012, 4:23 PM
  2. radiogroup runtime gen, but can't get value! help!!
    By tms2003@126.com in forum 1.x Help
    Replies: 1
    Last Post: Jan 21, 2012, 9:03 AM
  3. RadioGroup and RadioColumn
    By Birgit in forum 1.x Help
    Replies: 0
    Last Post: Oct 11, 2011, 1:53 PM
  4. [CLOSED] [1.0] RadioGroup
    By Timothy in forum 1.x Legacy Premium Help
    Replies: 2
    Last Post: Mar 08, 2010, 7:54 AM
  5. [1.0] Dynamic radiogroup
    By SouthDeveloper in forum 1.x Help
    Replies: 8
    Last Post: Feb 25, 2010, 5:44 AM

Posting Permissions