ext.net Optionsfeld ausgewählte Eigenschaft

Question

Während der Tastaturnavigation (mithilfe der TAB-Taste) des Formulars werden die Optionsschaltflächen nur fokussiert, aber nicht ausgewählt. Zur Auswahl muss ich die PFEILTASTE verwenden. Ich möchte , dass wenn der Radio-Button fokussiert sind sollte es auch ausgewählt werden. Danach kann der Benutzer mit der PFEILTASTE die Auswahl ändern.

<ext:RadioGroup 
    runat="server" 
    DataIndex="gender" 
    ColumnsNumber="1"> 
    <Items> 
     <ext:Radio runat="server" BoxLabel="Male" InputValue="true" /> 
     <ext:Radio runat="server" BoxLabel="Female" InputValue="false" /> 
    </Items> 
</ext:RadioGroup> 

Wie kann ich das tun?

Answer 1

Sie müssen auf 3 Ereignisse reagieren, wenn Sie möchten, dass dies korrekt abläuft. Sie müssen auch einen Weg für den Anwender eine dauerhafte Auswahl Javascript machen:

<script type="text/javascript"> 
    (function() { 
     var util = function() { } 
     var USER_SELECTED = undefined; 

     // respond to the radiobutton being focused 
     util.onFocus = function (grp, key) { 
      // skip along until the user presses enter on the item they are focused on... 
      if (USER_SELECTED == undefined) { 
       grp.setValue(true); 
      } 
     } 

     // respond to the loss of focus - prevent the last item in the list from keeping the 'checked' 
     // value if the list is no longer under focus 
     util.lostFocus = function (grp, key) { 
      if (USER_SELECTED != grp) 
       grp.setValue(false); 
     } 

     // if the user presses ENTER ... make the item in the list under static focus ... 
     // subsequent ENTERS can make static focus go to the new radio box 
     util.onEnter = function (grp, key, code) { 
      if (key.type = 'pressDown' && key.keyCode == 13){ 
       USER_SELECTED = grp; 
       grp.setValue(true); 
       grp.boxLabelEl.highlight(); 
      } 
     } 

     if (!window.util) { 
      window.util = util; 
     } 

    }(window)); 


</script> 

Markup:

<ext:Panel ID="Panel1" runat="server" Height="300" Title="Title" Layout="FormLayout" > 

    <Items> 
     <ext:RadioGroup ID="RadioGroup1" runat="server" ColumnsNumber="1"> 
      <Items> 
       <ext:Radio runat="server" BoxLabel="Male" InputValue="1" TabIndex="1"> 
        <Listeners> 
         <SpecialKey Fn="util.onEnter" /> 
         <Focus Fn="util.onFocus" /> 
         <Blur Fn="util.lostFocus" /> 
        </Listeners> 
        </ext:Radio> 
       <ext:Radio runat="server" BoxLabel="Female" InputValue="0" TabIndex="2"> 
        <Listeners> 
         <SpecialKey Fn="util.onEnter" /> 
         <Focus Fn="util.onFocus" /> 
         <Blur Fn="util.lostFocus" /> 
        </Listeners> 
      </ext:Radio> 
       <ext:Radio runat="server" BoxLabel="Transgender" InputValue="2" TabIndex="3"> 
        <Listeners> 
         <SpecialKey Fn="util.onEnter" /> 
         <Focus Fn="util.onFocus" /> 
         <Blur Fn="util.lostFocus" /> 
        </Listeners> 
      </ext:Radio> 
       <ext:Radio runat="server" BoxLabel="Other" InputValue="3" TabIndex="4"> 
        <Listeners> 
         <SpecialKey Fn="util.onEnter" /> 
         <Focus Fn="util.onFocus" /> 
         <Blur Fn="util.lostFocus" /> 
        </Listeners> 
      </ext:Radio> 
      </Items> 
     </ext:RadioGroup> 

    </Items> 
</ext:Panel> 

Ausblick: