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> 

ビュー：