windowReceiver组件

视频地址：http://pan.baidu.com/s/1mgsoPvE

对话框接收组件，适用于对话框与父页面的交互，关闭对话框等操作。

目录

一、综述
二、DOM结构
三、样式
四、属性
五、方法
六、事件
七、操作
八、案例

一. 综述

windowReceiver，一般结合windowDialog组合使用，用于接收windowDialog打开对话框时传送的数据，关闭对话框，向主页面传送数据，参考windowDialog组件

一般用法：在对话框页面放windowReceiver组件，用来接收主页面传送的数据及其他操作

组件路径 : /UI2/system/components/justep/windowReceiver

组件标识 : $UI/system/components/justep/windowReceiver/windowReceiver

二. DOM结构

• dom结构

<span component="$UI/system/components/justep/windowReceiver/windowReceiver"
  xid="xxwindowReceiver"/>

三. 样式

• （无）

四. 属性

组件具有公共属性，请参考组件公共属性

五. 方法

组件具有公共方法，请参考组件公共方法

• windowEnsure

void windowEnsure (data)
向调用者传送数据并关闭当前窗口，适用于对话框页确定等操作

> Parameters

data要返回的数据，支持任意类型的数据

> Return Value

void

//把当前时间传递给调用者并关闭当前窗口
this.comp("windowReceiver1").windowEnsure(new Date());

//调用者页面接收数据
Model.prototype.sendDataDlgReceive = function(event) {
    alert(event.data)
};

• windowCancel

void windowCancel ()取消、关闭当前窗口，适用于取消等操作

> Parameters

无

> Return Value

void

//关闭当前页面
this.comp("windowReceiver1").windowCancel();

• sendData

void sendData (data)向调用者传送数据

> Parameters

data传送的数据，支持任意格式

> Return Value

void

//向调用者传送数据
this.comp("windowReceiver1").sendData(new Date());
//在调用者页面接收数据
 Model.prototype.sendDataDlgReceive = function(event) {
     alert(event.data);
 };

• getReceiveData

object getReceiveData()获取调用者传送的数据

> Parameters

无

> Return Value

object

//接收调用者页面传送的数据
var data = this.comp("windowReceiver1").getReceiveData();

六. 事件

• void onReceive(object event)接收数据事件

event结构如下：

{
"source" : 组件的js对象,
"bindingContext" : 组件绑定的上下文，包含$model、$object等具体请参考bindingContext说明
"data" : 接收到的数据,
"sender" : 发送数据的组件js对象，如：WindowDialog
}

Model.prototype.windowReceiverReceive = function(event) {
    // 获取父页面的参数
    var fieldVal = event.data;
}

七. 操作

• windowCancel

取消关闭window对话框

• windowEnsure

向调用者传送数据并且关闭

八. 案例

案例参考windowDialog组件

 1、给父页面返回值

• 返回单值

<pre>//把当前时间传递给调用者并关闭当前窗口
this.comp("windowReceiver1").windowEnsure(new Date());

//调用者页面接收数据
Model.prototype.sendDataDlgReceive = function(event) {
    alert(event.data)
};

• 返回多值

   //返回姓名和年龄并关闭当前窗口
   this.comp("windowReceiver1").windowEnsure({name:"张三",age:28});
   //调用者页面接收数据
   Model.prototype.sendDataDlgReceive = function(event) {
        alert("name:"+event.data.name+"-age:"+event.data.age);
   };

2、调用父页面的方法

• 方法一：

//方法一：在对话框页调用父页面的方法
this.getParent().alertMain();

• 方法二：

在windowReceiver的onReceive的事件中，通过event.sender得到对应页面的组件，

获取到对应组件的model对象，即可调用该页面的js方法

Model.prototype.windowReceiverReceive = function(event) {
    // 调用父页面的alertMain方法
    event.sender.getModel().alertMain();
}