效果浏览
基本用法
存取值方法
默认情况下,如果我们通过CheckBox的取值方法获取到的值为true/false(不推荐):
var value = checkbox.get("value");//取值 checkbox.set("value", true/false);//设置值
不过通常情况下CheckBox都与DataSet绑定使用。可以通过其dataSet与property属性的设定与Entity对象绑定:
这样我们就可以通过如下的代码存取值(推荐):
var entity = dataSetEmployee.getData("#");//获取当前要操作的实体对象 var needSend = entity.get("sendMessage");//获取值 entity.set("sendMessage", true/false);//设置值
offValue和onValue
虽然在大多数场景下CheckBox的默认值为true/false,但是在一些特殊场景下可能CheckBox选择与否的值并不是true,false,例如数据类型为int,我们希望1表示选择,0表示不选中,则可以通过设定CheckBox的offValue和onValue自定义,如下范例:
在这个范例中我们设定onValue为"y",offValue的值为"n",表示当对于的Entity对象的sendMessage的值为"y"时,复选框处于选中状态,否则就是未选中状态。
另外由于数据绑定关系,当我们修改复选框的选择状态时,根据Entity对象的绑定关系,会自动的修改对应的属性值(本例为sendMessage)为"y"或"n"。
在Grid中显示CheckBox
如果希望在Grid中的某一个列的值用CheckBox来显示,
我们可以通过设定DataColumn的editorType为checkbox实现,如下:
但是通过这种方式设置的CheckBox,我们很难对CheckBox的其他属性做详细设定,如上面介绍过的offValue和onValue。如果我们还希望对这些CheckBox的详细属性做进一步设定,就不能通过editorType完成了,我们可以在DataColumn下添加CheckBox子节点:
这样就可以基于CheckBox做详细的属性和事件的设定了。
主要属性说明
caption
CheckBox默认就是一个复选框对象,如下:
我们可以通过caption为这个CheckBox加一个标题,如:
则只要设置CheckBox的caption属性就可以:
下图是多个CheckBox设置Caption的效果图:
triState
是否3态复选框,即是否启用复选框的mixed状态。如下图:
上图可以看到Dorado7,BDF和DBConsole分别处于三种不同的状态,对应为复选框的off,mixed和on三种状态。三种状态的值分别对应为offValue,mixedValue和onValue,我们可以通过mixedValue设置mixed的值:
supportsDirtyFlag
是否支持脏状态标记的显示,如果我们将CheckBox与DataSet绑定,当我们修改了数据的原始值后会在编辑框的左上角出现一个红色的提示符号,用以标识该复选框用户已经做过更改,并且还未保存:
注意上图中左上角的脏数据标识(彩色标记)
如果将supportsDirtyFlag属性设置为false,则无论我们如何修改数据,编辑框都不会出现这个脏数据标识符号。
主要事件说明
onValueChange
当复选框的value发生变化的时候(或者说鼠标单击改变选中状态的时候)触发的事件,范例代码:
var value = self.get("value"); switch (value){ case self.get("onValue"):{ break; } case self.get("offValue"):{ break; } case self.get("mixedValue"):{ break; } }
Attachments:
image2012-8-9 13:16:31.png (image/png)
image2012-8-9 13:25:33.png (image/png)
image2012-8-9 13:31:46.png (image/png)
image2012-8-9 13:32:42.png (image/png)
image2012-8-9 13:33:21.png (image/png)
image2012-8-9 13:38:35.png (image/png)
image2012-8-9 13:51:27.png (image/png)
image2012-8-9 14:4:4.png (image/png)
image2012-8-9 14:32:7.png (image/png)
image2012-8-9 14:33:10.png (image/png)
image2012-8-9 14:49:17.png (image/png)
image2012-8-10 13:7:32.png (image/png)