0

親が水平レイアウトのグループであるカスタム コンポーネントがあり、1 つは TextInput で、もう 1 つは datefield の 2 つのコントロールがあります。このカスタム コンポーネントを ant の場所で使用する場合、そのコントロール全体に tabindex を提供します。

ユーザーがタブ（キーボード）の場合、Textinputにフォーカスすると、フォーカスがdateFieldにならないだけです。

これを達成する方法。

これが私のコードです。

<?xml version="1.0" encoding="utf-8"?>
<s:Group xmlns:fx="http://ns.adobe.com/mxml/2009" 
         xmlns:s="library://ns.adobe.com/flex/spark" 
         xmlns:mx="library://ns.adobe.com/flex/mx" width="100%" height="20" 
         xmlns:components="com.zigron.controls.extended.components.*"
         creationComplete="creComp()">
    <!--
    Author : Tahir Alvi
    Date   : 11/06/2012
    Place  : Zigron Inc
    -->
    <fx:Declarations>
        <mx:DateFormatter id="formatter" formatString="MM/DD/YYYY" />
    </fx:Declarations>
    <fx:Script>
        <![CDATA[
            import mx.controls.TextInput;
            import mx.events.CalendarLayoutChangeEvent;

            import spark.events.TextOperationEvent;

            private var _selectedDate:Date;
            private var _text:String='';
            private var _propmt:String='DOB';

            //---- creation Complete ----------
            private function creComp():void
            {
                id_dob.tabIndex = tabIndex;
            }
            //--At the initlize of datefield hide the Textinput ---
            protected function init():void 
            {
                var tf:TextInput = df.mx_internal::getTextInput();
                tf.visible = false;
                tf.includeInLayout = false;
            }
            //-- date change handler ---
            protected function df_changeHandler(event:CalendarLayoutChangeEvent):void
            {
                id_dob.text     = formatter.format(df.selectedDate.toString());
                text            = id_dob.text;

                selectedDate   = df.selectedDate;
            }
            // -- Text Input Change handler and apply masking on it -------
            protected function id_txt_changeHandler(event:TextOperationEvent):void
            {
                var s:String    = id_dob.text.replace(/[^0-9]/g,"");
                id_dob.text     = s.substring(0,2) + (s.length>2?"/"+s.substring(2,4) + (s.length>4?"/"+s.substring(4,8):""):"");
                id_dob.selectRange(id_dob.text.length, id_dob.text.length);

                text            = id_dob.text;

                if(text.length)
                {
                    selectedDate = null;
                }
                else
                {
                    text = '';
                }
            }

            [Bindable]
            public function get selectedDate():Date
            {
                return _selectedDate;
            }

            public function set selectedDate(value:Date):void
            {
                _selectedDate = value;
            }

            [Bindable]
            public function get text():String
            {
                return _text;
            }

            public function set text(value:String):void
            {
                _text = value;
                if(_text.length)
                    id_dob.text = _text;
            }

            [Bindable]
            public function get propmt():String
            {
                return _propmt;
            }

            public function set propmt(value:String):void
            {
                _propmt = value;
            }

        ]]>
    </fx:Script>
    <s:layout>
        <s:HorizontalLayout horizontalAlign="left" verticalAlign="top" gap="2"/>
    </s:layout>
    <components:LabelTextInput id="id_dob" 
                               width="100%" prompt="{propmt}" change="id_txt_changeHandler(event)"/>
    <mx:DateField id="df" 
                  initialize="init()" width="20" change="df_changeHandler(event)" selectableRange="{{rangeEnd:new Date()}}"
                  toolTip="Select Date of Birth" yearNavigationEnabled="true" textInputStyleName="mandatoryDateSkin"
                  maxYear="{new Date().getFullYear()}" minYear="1901"/>
</s:Group>
4

2 に答える 2

1

彼の中にテキスト入力があるカスタムコンポーネントで同様の問題がありました。私の解決策は、次のような public var を作成することでした。

//This is my component MyComponent...
[Bindable] public var fTabIndex:int = -1;

<mx:TextInput id="field" tabIndex="{fTabIndex}"/>

(その他のコンポーネント...)

//Other component
<mx:TextInput tabindex="1"/>
<control:MyComponent fTabIndex="2"/>

お役に立てば幸いです。

于 2012-11-06T13:01:07.750 に答える
0

有効に設定 = "false"; 必要に応じてコードを変更します。

于 2013-07-20T12:24:13.080 に答える