ext.net單選按鈕選定的屬性

Question

在執行表單的鍵盤導航（使用TAB鍵）時，單選按鈕僅被聚焦，但未被選中。爲了選擇我必須使用箭頭鍵。我想 ，當單選按鈕聚焦時，它也應該被選中。之後，用戶可以使用箭頭鍵更改選擇。

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

我該怎麼做？

Answer 1

如果你想正確流動，你將不得不響應3個事件。你還需要一種方法爲用戶作出持久的選擇 的Javascript：

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

標記：

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

查看：