Flex中TitleWindow传值思路及实现

1、设计思路

（1）新建一个datagrid，在其中最后一列加入三个按钮：新增、修改和删除；

（2）点击新增按钮，可以将表格新增一行；

（3）单击“修改”按钮，可以修改表格中该行的一些属性；

（4）单击“删除”按钮，会将表格中该行删除。

2、实现步骤

（1）新建一个应用程序，datagrid.mxml

datagrid.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" minwidth="955" minheight="600">
<s:layout>
<s:basiclayout/>
</s:layout>
<fx:declarations>
<!-- 将非可视元素（例如服务、值对象）放在此处 -->
</fx:declarations>

<fx:script>
<![cdata[
import mx.collections.arraycollection;

[bindable]
//表格数据源绑定
private var grid:arraycollection = new arraycollection([
{number:"2014010101",name:"张三",sex:"男",age:"19"},
{number:"2014010102",name:"李思",sex:"女",age:"20"},
{number:"2014010103",name:"蔡华",sex:"男",age:"21"},
{number:"2014010104",name:"牛耳",sex:"女",age:"22"},
{number:"2014010105",name:"兆司",sex:"男",age:"18"},
{number:"2014010106",name:"胡柳",sex:"女",age:"19"},
{number:"2014010107",name:"刘斯",sex:"男",age:"20"},
{number:"2014010108",name:"孙阳",sex:"女",age:"22"},
{number:"2014010109",name:"郑武",sex:"男",age:"21"},
{number:"2014010110",name:"王雪",sex:"女",age:"20"},
{number:"2014010111",name:"胡柳",sex:"女",age:"19"},
{number:"2014010112",name:"刘斯",sex:"男",age:"20"},
{number:"2014010113",name:"孙阳",sex:"女",age:"22"},
{number:"2014010114",name:"郑武",sex:"男",age:"21"},
{number:"2014010115",name:"王雪",sex:"女",age:"20"}
]);
]]>
</fx:script>

<mx:vbox width="100%" height="100%" paddingbottom="100" paddingleft="100" paddingright="100" paddingtop="100">
<mx:datagrid id="datagrid" dataprovider="{grid}" rowcount="{grid.length+1}" width="100%" textalign="center">
<mx:columns>
<mx:datagridcolumn headertext="学号" datafield="number" id="stunumber"/>
<mx:datagridcolumn headertext="姓名" datafield="name"/>
<mx:datagridcolumn headertext="性别" datafield="sex"/>
<mx:datagridcolumn headertext="年龄" datafield="age"/>
<mx:datagridcolumn headertext="操作">
<mx:itemrenderer>
<fx:component>
<mx:hbox width="100%" paddingleft="40">

<fx:script>
<![cdata[
import mx.managers.popupmanager;

/*添加按钮事件函数*/
protected function addhandler(event:mouseevent):void
{
var childwindow:childwindow = childwindow(popupmanager.createpopup(this,childwindow,true));
var point:point = new point(100,100);
childwindow.x = point.x + 400;
childwindow.y = point.y + 50;
}

/*修改按钮事件函数*/
protected function updatehandler(event:mouseevent):void
{
var updatewindow:updatewindow = updatewindow(popupmanager.createpopup(this,updatewindow,true));
var point:point = new point(100,100);
updatewindow.x = point.x + 400;
updatewindow.y = point.y + 50;
updatewindow.stuno = event.currenttarget.selecteditem.content;
}

]]>
</fx:script>

<mx:linkbutton label="新增" click="addhandler(event)"/>
<s:label width="10"/>
<mx:linkbutton label="修改" click="updatehandler(event)"/>
<s:label width="10"/>
<mx:linkbutton label="删除"/>
</mx:hbox>
</fx:component>
</mx:itemrenderer>
</mx:datagridcolumn>
</mx:columns>
</mx:datagrid>

</mx:vbox>
</s:application>

（2）新建一个新增窗口组件，childwindow.mxml

childwindow.mxml：

<?xml version="1.0" encoding="utf-8"?>
<s:titlewindow 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="400" height="300"
close="closehandler(event)" title="新增窗口">
<s:layout>
<s:basiclayout/>
</s:layout>
<fx:script>
<![cdata[
import mx.events.closeevent;
import mx.managers.popupmanager;

/*关闭按钮函数*/
protected function closehandler(event:closeevent):void
{
popupmanager.removepopup(this);
}

/*取消按钮函数*/
protected function cancelhandler(event:mouseevent):void
{
popupmanager.removepopup(this);
}

]]>
</fx:script>
<fx:declarations>
<!-- 将非可视元素（例如服务、值对象）放在此处 -->
</fx:declarations>

<mx:vbox width="100%" height="100%" horizontalalign="center">
<mx:form borderstyle="solid" bordercolor="#cccccc" width="100%">
<mx:formheading label="新增界面" fontsize="14"/>
<mx:formitem label="学号：">
<s:textinput id="stuno" width="200"/>
</mx:formitem>
<mx:formitem label="姓名：">
<s:textinput id="stuname" width="200"/>
</mx:formitem>
<mx:formitem label="性别：">
<s:textinput id="stusex" width="200"/>
</mx:formitem>
<mx:formitem label="年龄：">
<s:textinput id="stuage" width="200"/>
</mx:formitem>
</mx:form>
<mx:hbox width="100%" height="25">
<s:label width="60"/>
<s:button label="新增"/>
<s:label width="48"/>
<s:button label="取消" click="cancelhandler(event)"/>
</mx:hbox>
</mx:vbox>
</s:titlewindow>

（3）新建一个修改界面组件，updatewindow.mxml

updatewindow.mxml：

<?xml version="1.0" encoding="utf-8"?>
<s:titlewindow 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="400" height="300"
close="closehandler(event)" title="修改窗口">
<s:layout>
<s:basiclayout/>
</s:layout>
<fx:script>
<![cdata[
import mx.events.closeevent;
import mx.managers.popupmanager;

/*关闭按钮函数*/
protected function closehandler(event:closeevent):void
{
popupmanager.removepopup(this);
}

/*取消按钮函数*/
protected function cancelhandler(event:mouseevent):void
{
popupmanager.removepopup(this);
}

]]>
</fx:script>
<fx:declarations>
<!-- 将非可视元素（例如服务、值对象）放在此处 -->
</fx:declarations>

<mx:vbox width="100%" height="100%" horizontalalign="center">
<mx:form borderstyle="solid" bordercolor="#cccccc" width="100%">
<mx:formheading label="修改界面" fontsize="14"/>
<mx:formitem label="学号：">
<s:textinput id="stuno" width="200"/>
</mx:formitem>
<mx:formitem label="姓名：">
<s:textinput id="stuname" width="200"/>
</mx:formitem>
<mx:formitem label="性别：">
<s:textinput id="stusex" width="200"/>
</mx:formitem>
<mx:formitem label="年龄：">
<s:textinput id="stuage" width="200"/>
</mx:formitem>
</mx:form>
<mx:hbox width="100%" height="25">
<s:label width="60"/>
<s:button label="修改"/>
<s:label width="48"/>
<s:button label="取消" click="cancelhandler(event)"/>
</mx:hbox>
</mx:vbox>
</s:titlewindow>

3、设计结果

（1）初始化时