Flex中List实现上移下移功能

最新推荐文章于 2023-04-12 08:35:05 发布

转载最新推荐文章于 2023-04-12 08:35:05 发布 · 686 阅读

Flex 专栏收录该内容

13 篇文章

订阅专栏

本文介绍了一个使用Flex实现的音乐专辑管理应用，通过代码展示了如何实现专辑的上下移动功能，涉及数组操作、数据绑定、事件监听等核心概念。

下面是具体实现代码：

[html] view plain copy

<?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"
width="100%" height="100%"
>
<fx:Style source="../../sps/sheet/css/forms.css"/>
<s:layout>
<s:VerticalLayout/>
</s:layout>
<fx:Declarations>
</fx:Declarations>
<fx:Script>
<![CDATA[
import mx.collections.ArrayCollection;
import mx.utils.ObjectUtil;
private var dp:ArrayCollection=new ArrayCollection([
{Artist:'Pavement1', Album:'Slanted and Enchanted',
Price:11.99, InStock: true},
{Artist:'Pavement2', Album:'Crooked Rain, Crooked Rain',
Price:10.99, InStock: false},
{Artist:'Pavement3', Album:'Wowee Zowee',
Price:12.99, InStock: true},
{Artist:'Asphalt1', Album:'Brighten the Corners',
Price:11.99, InStock: false},
{Artist:'Asphalt2', Album:'Terror Twilight',
Price:11.99, InStock: true},
{Artist:'Asphalt3', Album:'Buildings Meet the Sky',
Price:14.99, InStock: true},
{Artist:'Other', Album:'Other', Price:5.99, InStock: true}
]);
private function up():void{
if(list.selectedIndex>0){
var i:int=list.selectedIndex;
var tmp:Object=ObjectUtil.copy(list.selectedItem);
var tmpupper:Object=dp.getItemAt(i-1);
dp.setItemAt(tmpupper,i);
dp.setItemAt(tmp,i-1);
list.selectedIndex=i-1;
list.selectedItem=tmp;
}
}
private function down():void{
if (list.selectedIndex<dp.length-1){
var i:int=list.selectedIndex;
var tmp:Object=ObjectUtil.copy(list.selectedItem);
var tmplower:Object=dp.getItemAt(i+1);
dp.setItemAt(tmplower,i);
dp.setItemAt(tmp,i+1);
list.selectedIndex=i+1;
list.selectedItem=tmp;
}
}
]]>
</fx:Script>
<s:Group width="100%" height="50%" id="a">
</s:Group>
<s:Group>
<s:layout >
<s:VerticalLayout/>
</s:layout>
<mx:List dataProvider="{dp}" id="list" labelField="Artist"></mx:List>
<mx:Button label="UP" click="{up();}" enabled="{list.selectedItem!=null}"/>
<mx:Button label="DOWN" click="{down();}" enabled="{list.selectedItem!=null}"/>
</s:Group>
</s:Application>