Flex 可编辑的 Spark List 组件

<s:List id="chapterList" width="100%" height="100%" textAlign="center"
	dataProvider="{m_chapterAc}"
	labelField="chaptername"
	itemRenderer="notion.touch.view.main.ebookeditor.EditorList">
					
</s:List>
 
 
 
notion.touch.view.main.ebookeditor.EditorList:
 
<?xml version="1.0" encoding="utf-8"?>
<s:ItemRenderer xmlns:fx="http://ns.adobe.com/mxml/2009" 
				xmlns:s="library://ns.adobe.com/flex/spark" 
				xmlns:mx="library://ns.adobe.com/flex/mx" 
				autoDrawBackground="true">
	
	<fx:Script>
		<![CDATA[
			import spark.components.List;
			import spark.components.supportClasses.ListBase;
			
			private var lblField:String;
			
			private function onChange(event:Event):void 
			{
				
				var oldValue:String = labelDisplay.text;
				
				if (oldValue != inputTxt.text)
				{
					data[lblField] = inputTxt.text;
					labelDisplay.text = inputTxt.text;
					
					//dispatch the data update event
					var list:ListBase = this.owner as ListBase;
					list.dataProvider.itemUpdated(data, lblField , oldValue, inputTxt.text); 
				}
				isEdit(false);
				
			}
			
			private function onEdit(event:Event):void 
			{
				if(lblField =="")
					throw new Error("必须为" + List(this.owner).id + "(List)指定labelField");
				lblField = List(this.owner).labelField;
				inputTxt.text = data[lblField];
				isEdit(true);
				//set cursor postion to end
				inputTxt.selectRange(inputTxt.text.length,inputTxt.text.length+1);
				inputTxt.setFocus();
				
			}
			
			private function isEdit(value:Boolean):void 
			{
				labelDisplay.visible = !value;
				inputTxt.visible =  value;
			}
			
			
		]]>
	</fx:Script>
	
	
	<s:Label id="labelDisplay" 
			 doubleClickEnabled="true"
			 doubleClick="onEdit(event)" 
			 top="7" bottom="5" left="5" right="3"/>
	
	<s:TextInput id="inputTxt"  
				 visible="false"  
				 focusOut="onChange(event)"
				 top="1"  bottom="1" left="1" right="0" minWidth="25"/>
	
</s:ItemRenderer>



你可能感兴趣的:(Flex,Flex,Flex)