Flex中TitleWindow傳值思路及實(shí)現(xiàn)
更新時(shí)間：2014年05月12日 10:59:00 作者：
這篇文章主要介紹了Flex中TitleWindow傳值思路及實(shí)現(xiàn),需要的朋友可以參考下
1、設(shè)計(jì)思路
（1）新建一個(gè)DataGrid，在其中最后一列加入三個(gè)按鈕：新增、修改和刪除；
（2）點(diǎn)擊新增按鈕，可以將表格新增一行；
（3）單擊“修改”按鈕，可以修改表格中該行的一些屬性；
（4）單擊“刪除”按鈕，會將表格中該行刪除。
2、實(shí)現(xiàn)步驟
（1）新建一個(gè)應(yīng)用程序，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>
<!-- 將非可視元素（例如服務(wù)、值對象）放在此處 -->
</fx:Declarations>
<fx:Script>
<![CDATA[
import mx.collections.ArrayCollection;
[Bindable]
//表格數(shù)據(jù)源綁定
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="學(xué)號" 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;
/*添加按鈕事件函數(shù)*/
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;
}
/*修改按鈕事件函數(shù)*/
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）新建一個(gè)新增窗口組件，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;
/*關(guān)閉按鈕函數(shù)*/
protected function closeHandler(event:CloseEvent):void
{
PopUpManager.removePopUp(this);
}
/*取消按鈕函數(shù)*/
protected function cancelHandler(event:MouseEvent):void
{
PopUpManager.removePopUp(this);
}
]]>
</fx:Script>
<fx:Declarations>
<!-- 將非可視元素（例如服務(wù)、值對象）放在此處 -->
</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="學(xué)號：">
<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）新建一個(gè)修改界面組件，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;
/*關(guān)閉按鈕函數(shù)*/
protected function closeHandler(event:CloseEvent):void
{
PopUpManager.removePopUp(this);
}
/*取消按鈕函數(shù)*/
protected function cancelHandler(event:MouseEvent):void
{
PopUpManager.removePopUp(this);
}
]]>
</fx:Script>
<fx:Declarations>
<!-- 將非可視元素（例如服務(wù)、值對象）放在此處 -->
</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="學(xué)號：">
<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、設(shè)計(jì)結(jié)果
（1）初始化時(shí)
（1）新建一個(gè)DataGrid，在其中最后一列加入三個(gè)按鈕：新增、修改和刪除；
（2）點(diǎn)擊新增按鈕，可以將表格新增一行；
（3）單擊“修改”按鈕，可以修改表格中該行的一些屬性；
（4）單擊“刪除”按鈕，會將表格中該行刪除。
2、實(shí)現(xiàn)步驟
（1）新建一個(gè)應(yīng)用程序，DataGrid.mxml
DataGrid.mxml：
復(fù)制代碼 代碼如下:
<?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>
<!-- 將非可視元素（例如服務(wù)、值對象）放在此處 -->
</fx:Declarations>
<fx:Script>
<![CDATA[
import mx.collections.ArrayCollection;
[Bindable]
//表格數(shù)據(jù)源綁定
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="學(xué)號" 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;
/*添加按鈕事件函數(shù)*/
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;
}
/*修改按鈕事件函數(shù)*/
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）新建一個(gè)新增窗口組件，ChildWindow.mxml
ChildWindow.mxml：
復(fù)制代碼 代碼如下:
<?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;
/*關(guān)閉按鈕函數(shù)*/
protected function closeHandler(event:CloseEvent):void
{
PopUpManager.removePopUp(this);
}
/*取消按鈕函數(shù)*/
protected function cancelHandler(event:MouseEvent):void
{
PopUpManager.removePopUp(this);
}
]]>
</fx:Script>
<fx:Declarations>
<!-- 將非可視元素（例如服務(wù)、值對象）放在此處 -->
</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="學(xué)號：">
<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）新建一個(gè)修改界面組件，UpdateWindow.mxml
UpdateWindow.mxml：
復(fù)制代碼 代碼如下:
<?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;
/*關(guān)閉按鈕函數(shù)*/
protected function closeHandler(event:CloseEvent):void
{
PopUpManager.removePopUp(this);
}
/*取消按鈕函數(shù)*/
protected function cancelHandler(event:MouseEvent):void
{
PopUpManager.removePopUp(this);
}
]]>
</fx:Script>
<fx:Declarations>
<!-- 將非可視元素（例如服務(wù)、值對象）放在此處 -->
</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="學(xué)號：">
<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、設(shè)計(jì)結(jié)果
（1）初始化時(shí)
相關(guān)文章
flex actionScript時(shí)間處理相加返回相加后的date
這篇文章主要介紹了flex actionScript時(shí)間處理相加返回相加后的date,需要的朋友可以參考下2014-07-07
如果表格中的字段過多，會出現(xiàn)滾動條，在將滾動條滾到一定的位置時(shí)，重新刷新又回到原處，本文教大家如何給滾動條定位2014-10-10
Flex中TextInput組件設(shè)置限制某些字符的輸入的方法
TextInput組件設(shè)置限制輸入例如限制某個(gè)字符的輸入、設(shè)置只能輸入某些字符等等，下面是具體的示例，喜歡的朋友可以參考下2014-01-01
flex壓縮圖片exif信息(作者/相機(jī))丟失問題解決
使用flex的jpegencoder對圖片進(jìn)行壓縮的時(shí)候，exif信息會丟失這一點(diǎn)確實(shí)令人郁悶啊,此問題應(yīng)當(dāng)如何解決呢？經(jīng)研究jpeg的文檔，最終解決這個(gè)問題,曬出來與大家分享希望可以幫助到你們2013-02-02
flex 開發(fā)項(xiàng)目報(bào)錯(cuò)之404錯(cuò)誤解決方案
最近兩天被HttpStates404這個(gè)錯(cuò)誤折騰的夠嗆，查了很多的文章都是大同小異，接下來為大家介紹下詳細(xì)的解決方法，感興趣的各位可以參考下哈，希望可以幫助到你2013-03-03
Flex 事件分發(fā)(FlexViewer事件機(jī)制)剝離過程
本節(jié)主要介紹了如何將FlexViewer里面的事件分發(fā)及監(jiān)聽事件機(jī)制剝離出來在其他項(xiàng)目中使用,需要的朋友可以參考下2014-07-07
flex4.5中CSS選擇器的應(yīng)用小結(jié)
與HTML相似，F(xiàn)lex允許在MXML標(biāo)簽中通過CSS樣式來設(shè)置組件的外觀。到flex4.5后已經(jīng)基本上支持了HTML中的所有CSS的應(yīng)用方式，這里主要來列舉下flex4.5中CSS選擇器的使用方法2013-04-04
在Flex(Flash)中嵌入HTML代碼或頁面(Flex IFrame)
在flex組件中嵌入html代碼，可以利用flex iframe，下面為大家詳細(xì)介紹下具體實(shí)現(xiàn)過程，感興趣的朋友可以參考下2013-08-08
Flex動態(tài)生成可編輯的DataGrid具體實(shí)現(xiàn)代碼
DataGrid具有以下功能：表頭是動態(tài)生成的、每行都是有序號的、每行都是可以編輯、插入、刪除、修改，接下來為大家分享下Flex如何動態(tài)生成可編輯的DataGrid2013-04-04
獲取DataGrid行號和列號在使用過程中還是蠻實(shí)用的，下面為大家詳細(xì)介紹下FLEX是如何做到的，感興趣的朋友可以了解下2013-09-09