Flex父子窗口相互调用

1、设计思路

(1)子窗口调用父窗口的方法

(2)子窗口做了修改后,返回父窗口,父窗口调用子窗口函数

2、设计源码

(1)父窗口

ParentWindow.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"
			   width="100%" height="100%">
	<s:layout>
		<s:BasicLayout/>
	</s:layout>
	<fx:Declarations>
		<!-- 将非可视元素(例如服务、值对象)放在此处 -->
	</fx:Declarations>

	<fx:Script>
		<![CDATA[
			import mx.collections.ArrayCollection;
			import mx.controls.Alert;
			import mx.managers.PopUpManager;

			[Bindable]
			//表格数据源绑定
			private var grid:ArrayCollection = new ArrayCollection([
				{number:"2014010101",name:"张散",sex:"男",age:"23"},
				{number:"2014010102",name:"李思",sex:"女",age:"22"},
				{number:"2014010101",name:"吴王",sex:"男",age:"21"},
				{number:"2014010101",name:"赵柳",sex:"女",age:"20"},
				{number:"2014010101",name:"游华",sex:"男",age:"22"},
				{number:"2014010101",name:"祝思",sex:"女",age:"18"},
				{number:"2014010101",name:"周礼",sex:"男",age:"19"},
				{number:"2014010101",name:"华捷",sex:"女",age:"20"},
				{number:"2014010101",name:"刘亮",sex:"男",age:"22"},
				{number:"2014010101",name:"沈雪",sex:"女",age:"21"}
			]);

			/*修改事件函数*/
			protected function updateHandler(event:MouseEvent):void
			{
				//新建子窗体对象
				var childWindow:ChildWindow = new ChildWindow();
				//将子窗体添加到PopUpManager中
				PopUpManager.addPopUp(childWindow,this,true);
				//向子窗体传递参数
				childWindow.age = "23";
				//子窗口调用父窗口函数
				childWindow.callBack = this.myFunction;
				//子窗体居中弹出
				PopUpManager.centerPopUp(childWindow);
			}

			/*刷新函数*/
			public function myFunction(you:String):void
			{
				Alert.show(you+"Hello");
			} 

		]]>
	</fx:Script>
	<mx:VBox width="100%" height="100%" paddingBottom="10" paddingLeft="10" paddingRight="10" paddingTop="10">
		<mx:DataGrid id="dataGrid" dataProvider="{grid}" rowCount="{grid.length + 1}" width="100%"
					 verticalAlign="middle" textAlign="center">
			<mx:columns>
				<mx:DataGridColumn headerText="学号" dataField="number"/>
				<mx:DataGridColumn headerText="姓名" dataField="name"/>
				<mx:DataGridColumn headerText="性别" dataField="sex"/>
				<mx:DataGridColumn headerText="年龄" dataField="age"/>
			</mx:columns>
		</mx:DataGrid>
		<mx:HBox width="100%" horizontalAlign="center" verticalAlign="middle">
			<s:Button label="修改" click="updateHandler(event)"/>
		</mx:HBox>
	</mx:VBox>
</s:Application>

(2)子窗口

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="300" height="220"
			   close="closeHandler(event)" title="修改窗口">
	<s:layout>
		<s:BasicLayout/>
	</s:layout>
	<fx:Script>
		<![CDATA[
			import mx.events.CloseEvent;
			import mx.managers.PopUpManager;

			//回调函数
			public var callBack:Function;

			public var age:String = "";

			/*关闭事件函数*/
			protected function closeHandler(event:CloseEvent):void
			{
				PopUpManager.removePopUp(this);
			}

			/*修改按钮事件函数*/
			protected function updateHandler(event:MouseEvent):void
			{
				stuAge.text = age;
			}

            /*取消按钮事件函数*/
			protected function cancelHandler(event:MouseEvent):void
			{
				number.text = "";
				stuName.text = "";
				PopUpManager.removePopUp(this);
				if(isPopUp)
				{
					callBack.call(parent);
				}
			}
		]]>
	</fx:Script>
	<fx:Declarations>
		<!-- 将非可视元素(例如服务、值对象)放在此处 -->
	</fx:Declarations>

	<mx:VBox width="100%" height="100%">
		<mx:Form>
			<mx:FormItem label="学号:">
				<s:TextInput id="number" width="200" maxChars="10"/>
			</mx:FormItem>
			<mx:FormItem label="姓名:">
				<s:TextInput id="stuName" width="200" maxChars="10"/>
			</mx:FormItem>
			<mx:FormItem label="性别:">
				<mx:HBox width="100%">
					<mx:RadioButtonGroup id="sex"/>
					<s:RadioButton groupName="sex" label="男" selected="true"/>
					<s:RadioButton groupName="sex" label="女"/>
				</mx:HBox>
			</mx:FormItem>
			<mx:FormItem label="年龄:">
				<s:TextInput id="stuAge" width="200" maxChars="2"/>
			</mx:FormItem>
			<mx:FormItem>
				<mx:HBox width="100%">
					<s:Button label="修改" click="updateHandler(event)"/>
					<s:Label width="42"/>
					<s:Button label="取消" click="cancelHandler(event)"/>
				</mx:HBox>
			</mx:FormItem>
		</mx:Form>
	</mx:VBox>
</s:TitleWindow>

3、设计结果

(1)初始化时

(2)单击修改按钮

Flex父子窗口相互调用的更多相关文章

  1. Flex父子窗体相互调用

    Flex父子窗体相互调用 1.设计思路 (1)子窗体调用父窗体的方法 (2)子窗体做了改动后,返回父窗体,父窗体调用子窗体函数 2.设计源代码 (1)父窗体 ParentWindow.mxml: &l ...

  2. JavaScript 父子页面相互调用总结

    父子页面相互调用是一个在开发中经常遇到的问题,但是没有找到过比较全面的文章介绍.在此总结下来,供大家参考. 四种方式 一般情况下,我们可以使用iframe.window的open.showModalD ...

  3. JQuery javascript实现父子页面相互调用

    javascript实现父子页面相互调用 By:授客 QQ:1033553122 场景1 父页面调用子页面 如上图,在iframe子页面的<script>元素中,定义了taskStatus ...

  4. vue中的父子组件相互调用

    vue中的父子组件相互调用: 1.vue子组件调用父组件方法:子组件:this.$emit('xx'); 父组件:定义yy方法,并在引用子组件时传参,如@xx="yy" 2.vue ...

  5. iframe 父子窗口相互之间调用语法

    一.父窗口调用iframe子窗口方法 1.HTML语法:<iframe name="myFrame" src="child.html"></i ...

  6. flex与js相互调用

    1.flex调用js方法 调用方法例如:ExternalInterface.call("UploadComplete",oldName,uidName,_dir+"/&q ...

  7. iframe,modaldialog父子窗口相互通信的问题

    --- 子窗口访问父窗口的window对象 --- 打开新窗口一般有几种方法,window.open(...),window.showModalDialog(...),以及iframe中嵌套页面,另外 ...

  8. iframe父子页面相互调用方法,相互获取元素

    父页面获取子页面 var childWin = document.getElementById('setIframe').contentWindow;//获取子页面窗口对象 childWin.send ...

  9. Extjs Ext.ux.IFrame的用法 以及父子窗口间函数相互调用

    Extjs Ext.ux.IFrame的用法 以及父子窗口间函数相互调用 Ext.ux.IFrame Extjs官方提供的一个组件,可以很方便的使用. 这样就完成了一个简单的IFrame的使用,通过E ...

随机推荐

  1. JS前端验证代码

    手机号码正则表达式验证: function checkPhone(){ var phone = document.getElementById('phone').value; if(!(/^1[345 ...

  2. JavaScript函数调用模式

    1.方法调用模式: var myObj = { value : 0; increment:function(inc){ this.value += typeof inc === 'number' ? ...

  3. Java高并发的常见应对方案

    Java高并发的常见应对方案 一.关于并发我们说的高并发是什么? 在互联网时代,高并发,通常是指,在某个时间点,有很多个访问同时到来. 高并发,通常关心的系统指标与业务指标? QPS:每秒钟查询量,广 ...

  4. Oracle RAC基本概念

    原文链接:http://tech.it168.com/a2012/0814/1384/000001384756_all.shtml 不同的集群产品都有自己的特点,RAC的特点包括如下几点: ·双机并行 ...

  5. Eclipse远程调试应用程序

    第一步,在应用程序的配置文件run.xml中加入下面的配置项,启动应用程序: <target name="run" depends="checkBuilderFai ...

  6. 微信小程序开发《一》:阿里云tomcat免费配置https

    小狼咕咕最近开启了微信小程序开发的征程,由于微信小程序的前后台通信必须通过https协议,所以小狼咕咕第一件要做的事就是配置一个能够通过https访问的后台服务.小狼咕咕用的是阿里云ECS服务器,Li ...

  7. Vue.js搭建路由报错 router.map is not a function,Cannot read property ‘component’ of undefined

    错误: 解决办法: 2.0已经没有map了,使用npm install vue-router@0.7.13 命令兼容1.0版本vue 但是安装完之后会出现一个错误: Cannot read prope ...

  8. BZOJ 3270: 博物馆 [概率DP 高斯消元]

    http://www.lydsy.com/JudgeOnline/problem.php?id=3270 题意:一张无向图,一开始两人分别在$x$和$y$,每一分钟在点$i$不走的概率为$p[i]$, ...

  9. Linux内存机制以及手动释放swap和内存

    今天我们来谈谈Linux的内存机制. 首先我们理一下概念 一.什么是linux的内存机制? 我们知道,直接从物理内存读写数据要比从硬盘读写数据要快的多,因此,我们希望所有数据的读取和写入都在内存完成, ...

  10. Nginx配置参数中文说明

    #定义Nginx运行的用户和用户组 user www www;   #nginx进程数,建议设置为等于CPU总核心数. worker_processes 8;   #全局错误日志定义类型,[ debu ...