基本特性说明
Dialog继承自FloatPanel,其基本特性和使用请参考:FloatPanel(DCUG)
其他特性说明
默认的className为:d-dialog
支持拖拽
Dialog控件支持鼠标的拖拽移动,但是其父类FloatPanel默认是不支持的,除非你设置FlaotPanel的dragable为true.
支持dragOutside特性
默认情况下浏览器中的Dialog拖拽到窗口边上的时候就无法再向外拖动了:
如果设置Dialog的dragOutside为true:
那么上面场景下Dialog还可以被拖动到Window窗口区域之外:
提供最小化功能
Dialgo提供了最小化功能,使用时只要将其minimizeable属性设置为true:
最小化按钮单击时默认执行的就是Dialog的hide()方法。就是隐藏这个Dialog.
可以通过鼠标的拖拽操作改变Dialog的尺寸
通过鼠标拖拽Dialog的边角可以动态调整其尺寸,效果如下:
拖拽的时候会有一个虚线框,表示你实际拖拽的大小。
如果你不喜欢这个功能,可以通过Dialog的resizeable属性设置为false来屏蔽Dialog动态改变尺寸的功能:
提供最小高度和最小宽度设定
Dialog提供了动态改变尺寸的功能,但是如果Dialog的尺寸变的特别小,会导致Dialog的可用性和友好性下降,如下图:
如上图的Dialog,如果我们不把Dialog的尺寸调整到一定大小就根本不知道这个Dialog的内部究竟有什么功能。
但是可以通过minHeight和minWidth属性设置一个下限:
这样无论用户怎么改变Dialog的大小,都有一个下限设定,效果如:
这样在任何情况下我们都能知道这个Dialog的功能。
Dialog默认约定minHeight为100,minWidth为200.因此大多数情况下,你可以不用关心这个功能。
但在特殊场景下,你可以通过这两个属性调整他们的默认值。
关闭系统按钮默认可见
Panel默认情况下关闭按钮是不可见的,Dialog默认情况下关闭按钮是可见的。
支持最大化目标对象设定
提供maximizeTarget属性,用以支持最大化目标对象设定功能,默认情况下如果我们单击Dialog的最大化按钮,他会自动的在本Dialog所在的Window对象下,充满整个window,如下图:
但在某些情况下,我们还希望在Dialog最大化之后,window中的部分元素还可见,这种情况下我们就可以通过maximizeTarget属性解决这个问题了,maximizeTarget属性可以是一个Dorado的控件对象,也可以是dom对象或dom对象的jQuery选择符。
例如,如下的页面:
我们希望Dialog最大化后上面的说明信息依然可见,Dialog只填满下面的这个区域,如下面区域包含了一个Container控件(id为container2),则我们可以设置Dialog的
dialog.set("maximizeTarget", view.get("#container2"));
那么页面中我们去单击最大化按钮,Dialog最大化之后的效果,就是填充container2的所有区域,如下:
Attachments:












