示例主要实现以下功能:
1、增加项。
2、删除项。
3、单选条目变色。
4、不选中无法操作。
Mxml如下:
<?xml version="1.0" encoding="utf-8"?>
<s:Application
xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:mx="library://ns.adobe.com/flex/mx">
<fx:Script>
<![CDATA[
import com.XXX.model.Task;
import mx.collections.ArrayCollection;
[Bindable]
private var _tasks:ArrayCollection = new ArrayCollection();
private function createTask():void {
_tasks.addItem(new Task(newTaskTI.text,""));
}
private function deleteSelectedTask():void {
_tasks.removeItemAt(taskList.selectedIndex);
}
private function colorTask(color:String):void{
//_tasks.getItemAt(taskList.selectedIndex).
var _task:Task = _tasks.getItemAt(taskList.selectedIndex) as Task;
_task.color = color;
this.deleteSelectedTask();
_tasks.addItem(_task);
}
]]>
</fx:Script>
<s:Panel title="Todo List" width="100%" height="100%">
<s:VGroup width="100%" height="100%">
<s:HGroup width="100%" verticalAlign="middle">
<s:Label text="New Task"/>
<s:TextInput id="newTaskTI" width="100%"
enter="createTask()"/>
<s:Button label="Create" click="createTask()"/>
</s:HGroup>
<s:List id="taskList" width="100%" height="100%"
labelField="name"
dataProvider="{_tasks}">
<s:itemRenderer>
<fx:Component>
<s:ItemRenderer>
<fx:Script>
<![CDATA[
override public function set data(value:Object):void {
if(value!=null){
taskLabel.text = value.name;
taskLabel.setStyle("color",value.color);
}
}
]]>
</fx:Script>
<s:Label id="taskLabel" />
</s:ItemRenderer>
</fx:Component>
</s:itemRenderer>
</s:List>
<s:HGroup width="100%">
<s:Button label="Delete" width="100%" height="30"
enabled="{taskList.selectedItem != null}"
click="deleteSelectedTask()"/>
<s:Button label="RedTask" width="100%" height="30"
enabled="{taskList.selectedItem != null}"
click="colorTask('red')"/>
<s:Button label="YellowTask" width="100%" height="30"
enabled="{taskList.selectedItem != null}"
click="colorTask('yellow')"/>
<s:Button label="GreenTask" width="100%" height="30"
enabled="{taskList.selectedItem != null}"
click="colorTask('green')"/>
<s:Button label="BlueTask" width="100%" height="30"
enabled="{taskList.selectedItem != null}"
click="colorTask('blue')"/>
</s:HGroup>
</s:VGroup>
</s:Panel>
</s:Application>
AS编写Model
package com.XXX.model {
public class Task {
[Bindable]
public var name:String;
public var color:String;
public function Task(name:String ,color:String) {
this.name = name;
this.color = color;
}
}
}