Flex ArrayCollection数据添加删除的例子

Flex <wbr>ArrayCollection数据添加删除的例子


<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical">
<mx:Script>
<![CDATA[
      import mx.controls.Alert;
       import mx.collections.ArrayCollection;
       [Bindable]
       private var dIcon:ArrayCollection = new ArrayCollection([
              {name:'aa',price:10,img:'qq.png'},
              {name:'bb',price:20,img:'qq2.png'},
              {name:'cc',price:30,img:'qq3.png'},
              {name:'dd',price:40,img:'qq4.png'}
       ]);
       [Bindable]
       private var cbDate:ArrayCollection = new ArrayCollection([
              {label:'icon1',data:'qq.png'},
              {label:'icon2',data:'qq2.png'},
              {label:'icon3',data:'qq3.png'},
              {label:'icon4',data:'qq4.png'}
       ]);
       private function addFn():void{
              var newOne:Object = new Object();
              newOne.name = nameBox.text;
              newOne.price = priceBox.value;
              newOne.img = imgBox.value;
              dIcon.addItem(newOne);
              //更新datagrid的所有行;
              dg.invalidateList();
              Alert.show('ok')
       }
       private function delecteFn():void{
              var index:int = dg.selectedindex;
              dIcon.removeItemAt(index);
              dg.invalidateList();
       }
]]>
</mx:Script>
       <mx:Panel title="数据添加删除例子" paddingTop="10" paddingRight="10" paddingBottom="10" paddingLeft="10">
              <mx:DataGrid id="dg" dataProvider="{dIcon}"   rowHeight="30">
                     <mx:columns>
                            <mx:DataGridColumn datafield="img" sortable="false" itemRenderer="mx.controls.Image" />
                            <mx:DataGridColumn datafield="name" sortable="false" />
                            <mx:DataGridColumn datafield="price" sortable="false" />
                     </mx:columns>
              </mx:DataGrid>
       <mx:ControlBar>
              <mx:Form>
                     <mx:FormItem label="name:">
                     <mx:TextInput id="nameBox" text="" />
              </mx:FormItem>
              <mx:FormItem label="img:">
                     <mx:ComboBox id="imgBox" dataProvider="{cbDate}" />
              </mx:FormItem>
              <mx:FormItem label="price:">
                     <mx:NumericStepper id="priceBox" minimum="10" maximum="200" value="50" />
              </mx:FormItem>
              <mx:HBox>
                     <mx:Button label="add" click="addFn()" />
                     <mx:Button label="remove" click="delecteFn()" />
              </mx:HBox>
              </mx:Form>
       </mx:ControlBar>
</mx:Panel>
</mx:Application>

相关文章

一:display:flex布局display:flex是一种布局方式。它即可以...
1. flex设置元素垂直居中对齐在之前的一篇文章中记载过如何...
移动端开发知识点pc端软件和移动端apppc端软件是什么,有哪些...
最近挺忙的,准备考试,还有其他的事,没时间研究东西,快周...
display:flex;把容器设置为弹性盒模型(设置为弹性盒模型之后...
我在网页上运行了一个Flex应用程序,我想使用Command←组合键...