ext.net radyo düğmesi seçili özellik

Question

Formun klavye gezinmesini (SEKME tuşunu kullanarak) yaparken, radyo düğmeleri yalnızca odaklanmış, ancak seçilmemişlerdir. Seçim için OK tuşunu kullanıyorum. Radyo düğmesi odaklandığında, 'u da istiyorum. Bu kullanıcı seçimini değiştirmek için ARROW tuşunu kullanabilir.

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

Bunu nasıl yapabilirim?

Answer 1

Bunun doğru şekilde akmasını istiyorsanız, 3 olaya yanıt vermek zorunda kalacaksınız. Ayrıca kalıcı bir seçim Javascript yapmak kullanıcı için bir yol gerekir:

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

Biçimlendirme:

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

Görünüm: