5.9.为List的项编辑器添加格式化和验证数据

5.9.1.问题
在提交输入值到列表之前验证用户在一个条目编辑器中输入的所有数据.
5.9.2.解决方法
在itemEditEnd 事件上,使用ListBase 类的itemEditorInstance 属性从条目编辑器中重新获得文本内容并解析其结果。
5.9.3讨论
当用户开始和结束编辑一个列表中的条目时,为了验证和格式化所有输入数据,必须侦听由List 发出的条目编辑事件。当条目编辑编辑完以后List 控件发出三个事件

itemEditBegin
当editedItemPosition 属性已设置且条目可编辑后调度。当事件被触发,List 组件使用createItemEditor 方法创建一个itemEditor 对象并从条目拷贝数据属性到编辑器。默认情况下,itemEditor 对象是一个TextInput 控件的实例.使用List 控件的itemEditor 属性来指定一个定制itemEditor 类并最终设置itemEditorInstance,来停止创建编辑器,可以将preventDefault 作为默认事件侦听器的一部分来调用.

itemEditBeginning
当用户准备好编辑项目(例如,在项目上释放鼠标按键)后调度。跳到List 上面或其内部,或以任何方式试图编辑列表,该事件的默认侦听器设置List.editedItemPosition 属性到有焦点的条目来启动条目编辑会话,为该事件写一个你自己的事件侦听器来拒绝编辑特别的条目和条目组。调用你自己事件侦听器中的preventDefault 方法来防止默认的侦听器执行。

itemEditEnd
当项目编辑会话因任何原因而结束时调度。List 组件有一个针对该事件的默认处理过程,它从itemEditor 拷贝数据到List 控件的数据提供者,默认情况下,List 使用List 控件中的editorDataField 属性来决定itemEditor 的属性包含新数据并使用该新数据更新数据提供者条目,由于默认的itemEditor 是TextInput 控件,editorDataField 属性的默认值是text,为TextInput 包含新的条目数据指定text属性然后调用destroyItemEditor,清除itemEditor.在事件侦听方法内,你可以通过编辑器修改返回数据到List 组件。在你的事件侦听器中,检查itemEditor 中输入的数据,若数据不正确,你可以调用preventDefault 来让flex 停止传递新的数据到List 组件和关闭编辑器.

下面的例子中,若基于正则表达式,事件的preventDefault 方法用来防止编缉器把关闭和保存值给dataProvider ,若被传递给itemEditor 的值是正确的,则将该字符串格式化为适当的姓和名并保存该结果.
+展开
-XML
<mx:Canvas xmlns:mx="http://www.adobe.com/2006/mxmlwidth="400height="300">
<mx:Script>
<![CDATA[
import mx.events.ListEvent;
import mx.controls.TextInput;
import mx.events.ListEvent;
import mx.collections.ArrayCollection;
[Bindable]
private var dp:ArrayCollection = new ArrayCollection([{name:"John Smith" , positionType:1}
, {name:"Ellen Smith" , positionType:2}
, {name:"James Smith" , positionType:3}
, {name:"Jane Smith" , positionType:4}]);
//下面定义的这个itemEditEnd 事件的事件侦听器,注意事件是一个包含reason 属性的ListEvent 对象,该属性将被用作判断用户是否修改了itemEditor 的值。
public function formatData(event:ListEvent):void {
// Check the reason for the event.
if(event.reason == "cancelled") {
// Do not update cell.
return;
}
// Get the new data value from the editor.
var newData:String = TextInput(event.currentTarget.itemEditorInstance).text;
// Determine if the new value is an empty String.
var reg:RegExp = /\d/; 
if(newData == ""|| reg.test(newData)) {
// Prevent the user from removing focus,
// and leave the cell editor open.
event.preventDefault();
// Use the errorString to inform the user that something is wrong.
TextInput(listInstance.itemEditorInstance).setStyle("borderColor",0xff0000);
TextInput(listInstance.itemEditorInstance).errorString = "Enter a valid string." ;
return void ;
}
//test for FirstName LastName format
reg = /\w+.\s.\w+/
if (!reg.test(newData)) {
event.preventDefault();
TextInput( listInstance.itemEditorInstance).setStyle( "borderColor", 0xff0000);
TextInput(listInstance.itemEditorInstance).errorString = "Enter first name and last name";
else{
//make sure the name is properly formatted
var firstName:String = newData.substring(0, newData.indexOf(" " ));
var lastName:String = newData.substring(newData.indexOf(" " )+1);
firstName = firstName.charAt(0).toUpperCase() + firstName.substr(1);
lastName = lastName.charAt(0).toUpperCase() + lastName.substr(1);
TextInput(listInstance.itemEditorInstance).text = firstName+" " +lastName;
newData = newData.charAt(0).toLocaleUpperCase()+ newData.substring(1, newData.indexOf(" "
))+ newData.charAt(newData.indexOf(" " )+1)+ newData.substring(newData.indexOf(" " )+2);
}
}

]]>
</mx:Script>
<mx:List id="listInstancedataProvider="{dp}editable="truelabelField="nameitemEditEnd="formatData(event)width="300"/>
</mx:Canvas>

加支付宝好友偷能量挖...


评论(0)网络
阅读(78)喜欢(0)flash/flex/fcs/AIR