Flex4 List项 增加 删除 变色等简单实现

来源:互联网 发布:vb.net 新建文件夹 编辑:程序博客网 时间:2024/05/29 10:45

示例主要实现以下功能:

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


0 0