经常在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%">
<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>
接下来,我们就要创建一个弹出的窗口,这里使用的是Flex组件TitleWindow.我们起名为AddNote.mxml.它将用于输入界面,通过它,可以输入与datagrid三列属性对应的数据。它还包含两个按钮:cancel和save.
<?xml version="1.0" encoding="utf-8"?>
<mx:TitleWindow xmlns:mx="http://www.adobe.com/2006/mxml"
layout="absolute" width="348" height="218"
title="Add A Note">
<mx:Label text="Author" x="35" y="10"/>
<mx:TextInput id="author" width="150" x="84" y="8"/>
<mx:Label text="Topic" y="36" x="42"/>
<mx:TextInput id="topic" width="150" x="84" y="34"/>
<mx:Label text="Description" y="62" x="10"/>
<mx:TextArea id="description" width="234" height="77" x="84" y="61"/>
<mx:Button label="Cancel" x="193" y="146"/>
<mx:Button label="Save" x="264" y="146"/>
</mx:TitleWindow>
好了,我们已经拥有一个可以作为数据输入的界面,我们还要在我们的主程序中设定在某个合适的时间初始化并且显示这个窗口,这个任务就交给了Application的creation complete事件。即在Application 创建的时候执行:
<mx:Application
xmlns:mx="http://www.adobe.com/2006/mxml"
layout="absolute"
width="500" height="300"
creationComplete="init()">
在这个init()函数中,我们创建了AddNote的一个实例,并设置监听来自save按钮的saveNote事件
private var addNoteScreen:AddNote;
private function init():void
{
addNoteScreen = new AddNote();
addNoteScreen.addEventListener("SaveNote", saveNote);
}
<mx:Button label="Add Note" click="addNote()"/>
当用户点击addNoe按钮的时候就要弹出刚才创建的窗口。这里我们使用PopManager来简单管理窗口的创建和关闭。
private function addNote():void
{
PopUpManager.addPopUp(addNoteScreen, this, true);
PopUpManager.centerPopUp(addNoteScreen);
addNoteScreen.author.text = "";
addNoteScreen.topic.text = "";
addNoteScreen.description.text = "";
}
这里有两个方法,方法一addPopUp,就是弹出窗口,这里我们传输了三个参数,addNoteScreen为AddNote的一个实例,this为当前窗口,true为是否设是否只有弹出的窗口可被点击,即是否只有弹出的窗口处于Active状态。第二个方法,就是设置弹出窗口的位置。
当窗口弹出来的时候,我们可以做两件事情,一提交保存用户输入数据,二是简单的关闭窗口。如果关闭窗口,我们也使用PopManager管理器:
<mx:Script>
<![CDATA[
import mx.managers.PopUpManager;
private function close():void
{
PopUpManager.removePopUp(this);
}
]]>
</mx:Script>
<mx:Button label="Cancel" click="close()" x="193" y="146"/>
若要保存用户提交的数据,我们需要调度一个自定义的事件.我们使用Event metadata tag来创建我们的自定义事件,而这个标记将在TitleWindow中创建。
<mx:Metadata>
[Event(name="SaveNote")]
</mx:Metadata>
要调度这个时间,我们必须和按钮save挂钩起来:
<mx:Button label="Save" click="save()" x="264" y="146"/>
这个方法将添加到脚本中,这个方法就是简单调度SaveNoe事件:
private function save():void
{
this.dispatchEvent(new Event("SaveNote"));
}
下面是TitleWindow所有代码:
<?xml version="1.0" encoding="utf-8"?>
<mx:TitleWindow xmlns:mx="http://www.adobe.com/2006/mxml"
layout="absolute" width="348" height="218"
title="Add A Note">
<mx:Metadata>
[Event(name="SaveNote")]
</mx:Metadata>
<mx:Script>
<![CDATA[
import mx.managers.PopUpManager;
private function close():void
{
PopUpManager.removePopUp(this);
}
private function save():void
{
this.dispatchEvent(new Event("SaveNote"));
}
]]>
</mx:Script>
<mx:Label text="Author" x="35" y="10"/>
<mx:TextInput id="author" width="150" x="84" y="8"/>
<mx:Label text="Topic" y="36" x="42"/>
<mx:TextInput id="topic" width="150" x="84" y="34"/>
<mx:Label text="Description" y="62" x="10"/>
<mx:TextArea id="description" width="234" height="77" x="84" y="61"/>
<mx:Button label="Cancel" click="close()" x="193" y="146"/>
<mx:Button label="Save" click="save()" x="264" y="146"/>
</mx:TitleWindow>
要把弹出窗口中用户输入的数据显示在Application 中的datagrid中,其实也很简单,就是要数据绑定。前面的[Bindable]中的notes:ArrayCollecton就要与我们弹出窗口中的用户输入数据绑定起来。这个方法由save按钮触发后执行:private function saveNote(e:Event):void
{
var note:Note = new Note();
note.author = addNoteScreen.author.text;
note.topic = addNoteScreen.topic.text;
note.description = addNoteScreen.description.text;
notes.addItem(note);
PopUpManager.removePopUp(addNoteScreen);
}
在绑定之后,即显示在Application datagrid中之后,我们要把弹出的窗口关闭,即removePopUp。这里就是全部的介绍了,下面是Application的代码:
<?xml version="1.0" encoding="utf-8"?>
<mx:Application
xmlns:mx="http://www.adobe.com/2006/mxml"
layout="absolute"
width="500" height="300"
creationComplete="init()">
<mx:Script>
<![CDATA[
import mx.managers.PopUpManager;
import mx.collections.ArrayCollection;
[Bindable]
private var notes:ArrayCollection = new ArrayCollection();
private var addNoteScreen:AddNote;
private function init():void
{
addNoteScreen = new AddNote();
addNoteScreen.addEventListener("SaveNote", saveNote);
}
private function addNote():void
{
PopUpManager.addPopUp(addNoteScreen, this, true);
PopUpManager.centerPopUp(addNoteScreen);
addNoteScreen.author.text = "";
addNoteScreen.topic.text = "";
addNoteScreen.description.text = "";
}
private function saveNote(e:Event):void
{
var note:Note = new Note();
note.author = addNoteScreen.author.text;
note.topic = addNoteScreen.topic.text;
note.description = addNoteScreen.description.text;
notes.addItem(note);
PopUpManager.removePopUp(addNoteScreen);
}
]]>
</mx:Script>
<mx:Panel title="Notes"
width="100%" height="100%"
layout="vertical" horizontalAlign="right"
paddingTop="3" paddingLeft="3" paddingRight="3" paddingBottom="3">
<mx:DataGrid dataProvider="{notes}" 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" click="addNote()"/>
</mx:Panel>
</mx:Application>
本文来自CSDN博客,转载请标明出处:
http://blog.csdn.net/Arthur0088/archive/2009/11/26/4880863.aspx
参考翻译:http://www.switchonthecode.com/tutorials/flex-datagrid-adding-rows-using-a-popup
分享到:
相关推荐
Flex使用弹出窗口(titlewindos)为DataGrid添加新数据
flex中dataGrid导出数据到excel中,不存在乱码问题
flex 通过读取xml文件 实现动态DataGrid数据列表
flex 三状态多选 自动分页DataGrid
在FLEX4中开发带有过滤功能的DATAGRID组件
Flex DataGrid从XML文件中加载数据
为DataGrid添加确认删除的对话框 confirm javascript
flex datagrid 添加按钮并根据特定内容进行判断是否显示按钮
FLEX4 s:dataGrid单元格弹出可文本,就是单击单元格弹出自己定义的一个组件,
绝对好东西,datagrid 标题栏及 datagridcolumn 添加 checkbox
将flex中datagrid组件中数据导出到excel表格中。思路很简单,利用as将datagrid中的数据解析出来,传到后台java服务端处理,即可保存为excel文件。
FLEX4实践—动态生成DataGrid及应用客户化itemRenderer.doc
Flex的DataGrid中使用CheckBox. 大家共同研究
datagrid里添加combobox列,在拖动时会出现数据混乱问题,该实例解决此问题。
其中包含一个三种状态的checkbox,DataGrid代码中引用了 带多选框的DataGrid(AdvancedDataGrid) 表头有全选CheckBox,三种状态:全选、部分选择、无选择 如果改变目录结构,需要在CustomCheckBox.mxml中更改inner....
WPF DataGrid 动态添加 行列 比较靠谱的,可以看看,通俗易懂
NULL 博文链接:https://songwensheng.iteye.com/blog/628997
FLEX的一个DataGrid例子,熟悉一下DataGrid的使用
简单的一个自定义label.根据dataGrid的数据变色.压缩包里一个是渲染器..一个是主程序....新建一个flex项目...把mxml和文件夹都放在scr下面就可以跑起来了..有问题请回复.
Flex dataGrid 全选、反选 checkBox 不是很完善,但很有借鉴意义