Flex使用弹出窗口为DataGrid添加新数据
经常在Demo中会看到列表,表格等方式来显示数据。当然有时候也需要添加数据到这些列表或者表格中。有很多方式提交,这里展示一个弹出窗口的方式来添加新的数据到DataGrid中。
例子展示:
首先,我们开始建设一个基本的界面结构,一个带有“Notes"标题的Panel,一个DataGrid,以及一个用于提交数据的按钮。
<?xml version="1.0" encoding="utf-8"?>
<mx:Application
xmlns:mx="http://www.adobe.com/2006/mxml"
layout="absolute"
width="500" height="300">
<mx:Panel title="Notes"
width="100%" height="100%"
layout="vertical" horizontalAlign="right"
paddingTop="3" paddingLeft="3" paddingRight="3" paddingBottom="3">
<mx:DataGrid width="100%" height="100%">
<mx:columns>
<mx:DataGridColumn headerText="Author" dataField="author" width="80"/>
<mx:DataGridColumn headerText="Topic" dataField="topic" width="100"/>
<mx:DataGridColumn headerText="Description" dataField="description"/>
</mx:columns>
</mx:DataGrid>
<mx:Button label="Add Note"/>
</mx:Panel>
</mx:Application>
这些代码看起来并不陌生,DataGrid三个列的数据对应我们Note类的三个属性,我们定义Note类如下:
package
{
public class Note
{
public var author:String;
public var topic:String;
public var description:String;
}
}
要真正使得我们的数据开始运转,我们还需要一个脚本块:需要一个数据结构来保存我们的Note信息。这里我们使用notes:ArrayCollection来记录我们要添加和已经添加的数据。这些数据能够在DataGrid中显示,是因为我们要把它设置成为DataGrid的provider.接下来我们先定义和初始化这个notes.
<mx:Script>
<!--[CDATA[
import mx.collections.ArrayCollection;
[Bindable]
private var notes:ArrayCollection = new ArrayCollection();
]]-->
</mx:Script>
然后在把它设置成为datagrid的provider.
<mx:DataGrid dataProvider="{notes}" width="100%" height="100%">
相关文档:
业内著名互联网咨询机构iResearch艾瑞咨询调查显示, 随着诸如开心厨房类网络游戏, 优酷网类视频分享网站, 以及新浪财经, 华尔街股市分析系统和各类诱人的网络广告等富互联网应用系统的急剧增加, 作为最佳富互联网应用解决方案的Flex技术人才进入严重奇缺阶段. 据可靠数据, 目前国内各类Flash设计师和Fle ......
<?xml version="1.0"?>
<!-- Simple example to demonstrate the ProgressBar control. -->
<!--
如何使用Flex ProgressBar
MyShareBook.cn 翻译
-->
<mx:Applic ......
Learning Flex in a week – Day1
Flex,Flash,Flash
Player,AIR概述
了
解Flex Builder
Flex
Builder工作空间
了
解Flex预编译组件
了
解MXML
组
件的数据绑定
处
理用户事件
了
解事件对象
使
用ActionScript添加事件侦听器
使
用HttpService获取数据 ......
前一阵在论坛上看到一个兄弟,想在Flex Chart中为图例设置3D效果,近几天查找了些资料,动手做了个DEMO供大家参考!
DEMO演示地址http://xingjunli.webs.com/flash/flexChartDemo.swf,先来个图片看看最终效果:
相关知识点
1、图表使用的 ......