0

我有一个自定义组件，其父组件是具有水平布局的组，因为我有两个控件，一个是 TextInput，另一个是日期字段。当在 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

我在一个带有文本输入的自定义组件中遇到了类似的问题。我的解决方案是创建一个公共变量，如下所示：

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

设置启用=“假”；并在需要时在代码中更改它。

于 2013-07-20T12:24:13.080 回答