1 概述
在Smartbi中,有较多场景会用到对话框。本文介绍在Smartbi中创建自定义对话框的方法。
目前Smartbi的对话框底层采用layer弹层组件实现。经过Smartbi对layer的封装,使得对话框的应用更加便捷,同时也更方便根据需要替换底层的弹层组件。如下图所示:
2 自定义对话框的基本对象
创建自定义对话框的整体步骤:创建一个普通的JS类,使其继承BaseDialogEx;实现init和destroy方法,并分别调用父类BaseDialogEx的init和destroy方法;最后采用dialogFactory工具类提供的showDialog方法显示对话框即可。
创建自定义对话框前,需要了解对话框组件的基类:BaseDialogEx,以及对话框的工具类:dialogFactory。
BaseDialogEx
对话框组件基类freequery.dialog.BaseDialogEx继承了freequery.widget.Module2,主要方法包括两个:初始化方法(init)、注销方法(destroy)
1)初始化方法:init
- 定义:BaseDialogEx.prototype.init = function(parent, data, fn, obj, win)
- 功能:初始化一个空的对话框。
- 参数:@parent(对话框内容的父容器);@data(调用对话框时传递给对话框的数据);@fn(可选参数,对话框关闭后回调函数);@obj(可选参数,上面fn回调函数的this对象) @win(可选参数,源窗口)。
2)注销方法:destroy
- 定义:BaseDialogEx.prototype.destroy = function()
- 功能:关闭对话框,销毁相关资源。
dialogFactory
对话框工具类:freequery.dialog.dialogFactory,主要包含showDialog方法。
1)显示对话框方法:showDialog
- 定义:showDialog : function(dlgConf, params, fn, obj, opts)
- 功能:根据传入的对话框配置,弹出一个对话框。
- 参数:@dlgConf(对话框配置对象);@params(需要传递到对话框的数据);@fn(对话框关闭的回调函数);@obj(回调函数内部的this对象);@opts(扩展配置,如:{ success:function(){} })。
2)详细参数说明:@dlgConf:对话框配置对象,对象格式{fullName:'xx.xx.xx',size:[100,200],title:'***’}
常用配置项如下:
- fullName: 必选项,对话框的全名,例如 freequery.dialog.OpenSaveDialog
- size: 可选项,对话框尺寸(指定该项将会忽略width和height)
- width:可选项,对话框宽度
- height: 可选项,对话框高度
- resizable:可选项,对话框大小是否可变,合法值 'yes', 'no'
- title::可选项,对话框标题
- dialogType: 可选项,对话框模态,缺省值'modal', 合法值 'modal','modeless'
3 创建自定义对话框的步骤
步骤一:创建对话框业务处理类
创建一个对话框的业务处理JS类,使其继承BaseDialogEx类。 如:创建test.dialog.TestDialog.js类: