Dojo动态创建CheckBox

  在某些情况下,我们需要动态的创建CheckBox,以满足我们对编程的需要。尽管Dojo官方也提供了一些Demo,但当Dojo的版本不断升级,而Dojo的Demo却依然停留在历史版本中,我们对此感到的是相当的头痛。尽管那些Demo简单,但是却不实用。因为他们只是为了达到易用的目的,而不是实用与扩充性。下面我们就来看一下,我们在项目中应该如何动态创建CheckBox。
     尽管dijit.form.CheckBox很好用,但是我们为了更便捷的使用,对其又进行了封装,将其封装为CheckBoxFiled,以下是简单的Code,更深层的封装Code,将不在这里展示。

dojo.provide( "com.itccxx.common.dijit.form.field.CheckBoxField" );

dojo.require( "com.itccxx.common.dijit.form.field.CheckField" );

dojo.declare( "com.itccxx.common.dijit.form.field.CheckBoxField" , com.ibm.ecm.nuclear.common.dijit.form.field.CheckField, {
});

   如上,是我们封装完毕的一个CheckBoxField,在这里请读者不要进行过多的考虑,就将其当做一个普通的CheckBox即可,我们封装CheckBox也仅仅是我们更方便的使用CheckBox的某些属性。
   当我们有了CheckBoxField原型之后,我们就要开始使用代码动态生成CheckBox。当我们需要动态创建CheckBoxField的时候,往往需要不止一个,因为我们需要遍历的来创建这些CheckBoxField,以下是创建所需Field的源码。

_loadCheckBoxByService : function(){
     var subclasses = itemSet.get("items")[0].get("itemJSON").subclasses;
     if (subclasses) {
         dojo.forEach(subclasses, function(subclass) {
              this.createCheckBox(subclass);
     }
}

createCheckBox : function(subclass){   
      var chkBox = new com.ibm.ecm.nuclear.common.dijit.form.field.CheckField({
             checked: false,
             label : subclass.label,
             symbolicName : subclass.symbolicName,
             style: {
                 display : "inline-block"
                 },
             title : subclass.value            
         });
     
      chkBox.placeAt(this.childDocLib);
      chkBox.startup();
}

     当我们动态创建完CheckBoxField之后,就需要将CheckBox挂到相应的节点上。chkBox.placeAt()将这些CheckBoxField挂到相应的Div上。如下是存放CheckBoxField的HTML。

<div data-dojo-attach-point="childDocLib"></div>

     我们是以动态创建CheckBoxField为例进行说明的,如果需要动态创建CheckBox,可以直接参照createCheckBox进行创建。
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值