Flex 可编辑的 Spark List 组件

最新推荐文章于 2014-09-02 00:18:00 发布

泛中游

最新推荐文章于 2014-09-02 00:18:00 发布

阅读量1.2k

点赞数

CC 4.0 BY-SA版权

分类专栏： Flex 文章标签： flex Flex FLEX

本文链接：https://blog.csdn.net/ganxunzou/article/details/8286384

Flex 专栏收录该内容

56 篇文章

订阅专栏

本文介绍了一个使用Flex技术实现的可编辑章节列表组件。该组件允许用户直接修改列表项的名称，并通过双击触发编辑状态，修改后自动保存更新。组件内部集成了自定义的ItemRenderer用于显示和编辑每一条目。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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