如何使用Flex NumberFormatter

最新推荐文章于 2014-08-30 23:57:00 发布

最新推荐文章于 2014-08-30 23:57:00 发布 · 204 阅读

文章标签：

#Flex #XML

Flex Validators 专栏收录该内容

12 篇文章

订阅专栏

本文介绍了一个简单的 Flex NumberFormatter 使用示例，演示了如何通过 NumberFormatter 控件格式化输入的数值，包括验证输入的有效性并应用特定精度及千位分隔符。

<?xml version="1.0"?>
<!-- Simple example to demonstrate NumberFormatter. -->
<!--
	如何使用Flex NumberFormatter
	MyShareBook.cn 翻译
-->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">

    <mx:Script>
        <![CDATA[

          import mx.events.ValidationResultEvent;			
          private var vResult:ValidationResultEvent;

          // Event handler to validate and format input.            
          private function Format():void
          {
             vResult = numVal.validate();
			 if (vResult.type==ValidationResultEvent.VALID) {

                formattedNumber.text= numberFormatter.format(inputVal.text);
             }

             else {
                formattedNumber.text= "";
             }
          }
      ]]>      
    </mx:Script>

    <mx:NumberFormatter id="numberFormatter" precision="4" 
        useThousandsSeparator="true" useNegativeSign="true"/>

    <mx:NumberValidator id="numVal" source="{inputVal}" property="text" 
        allowNegative="true" domain="real"/>

    <mx:Panel title="NumberFormatter Example" width="75%" height="75%" 
            paddingTop="10" paddingLeft="10" paddingRight="10" paddingBottom="10">

        <mx:Form>
            <mx:FormItem label="Enter number:">
                <mx:TextInput id="inputVal" text="" width="50%"/>
            </mx:FormItem>

            <mx:FormItem label="Formatted number (precision=4): ">
                <mx:TextInput id="formattedNumber" editable="false" width="50%"/>
            </mx:FormItem>

            <mx:FormItem>
                <mx:Button label="Validate and Format" click="Format();"/>
            </mx:FormItem>
        </mx:Form>

    </mx:Panel>
</mx:Application>