下面是我做动态生成checkbox的一个demo.不过有两个问题一直无法解决,麻烦各位帮忙看下:
1, 如果checkbox在初始化的时候就checked(选中),取消选中的时候事件没有触发.比如例子上checkbox B刚开始是代码给选中的,取消B的选中,上面的文本框不会出现单个C,如果单选中一个C,文本框应该显示C.
2, 点击动态生成,总是提示this.ownerCt.forcelayout is null or undefined.好像是render不对,不知道原因在哪.可是通过调试cbGroup.ownerCt.forceLayout是false.
请各位帮忙看看,谢谢了!下面是代码
Hello World Window Example
<br> Ext.onReady(function(){<br> var win;<br> var cb_Group;<br> var data = '';<br> function funCheck(thisCheck){<br><br> var selectStr = "";<br> for (var j=0;j<5 ;j++ )<br> {<br><br> var cbObj = Ext.getDom("name"+j);<br> if (cbObj && cbObj.checked)<br> {<br> selectStr = selectStr + Ext.getDom("name"+j).value ; <br> }<br> }</p> <pre><code> Ext.getDom("selectValue").value = selectStr; }; function setChecked(){ var selectValue = Ext.getDom("selectValue").value; selectValue = 'BC'; for (var j=0;j<3 ;j++ ) { var labelText = Ext.getDom("name"+j).value; if (selectValue.indexOf(labelText) >= 0) { Ext.getDom("name"+j).checked = true; }else{ Ext.getDom("name"+j).checked = false; } } }; function dynamicGen(){ var cbGroup = Ext.getCmp('cbCon'); cbGroup.removeAll(); var new_cbg = new Ext.form.CheckboxGroup( { xtype: 'checkboxgroup', fieldLabel: '新的多选组', id:'ElementTypeID', name :'ElementTypeID', columns: 10 }); var newItems=[]; for(var i=0;i<5;i++) { var lText = String.fromCharCode(65 + i); var chkNew = {boxLabel: lText, name: "name"+i, inputValue: lText , isChecked : false ,listeners: { check : funCheck}}; newItems.push(chkNew); } new_cbg.items = newItems; cbGroup.items.add(new_cbg); alert(cbGroup.ownerCt.forceLayout); cbGroup.doLayout(false, false); }; var items=[]; for(var i=0;i<3;i++) { var labelText = String.fromCharCode(65 + i); var chk = {boxLabel: labelText, name: "name"+i, inputValue: labelText , isChecked : false ,listeners: { check : funCheck}}; items.push(chk); } var cb_Group = new Ext.form.CheckboxGroup( { xtype: 'checkboxgroup', fieldLabel: '元素类型', id:'ElementTypeID', name :'ElementTypeID', columns: 10, anchor:"95%", msgTarget:"side" }); cb_Group.items = items; if(!win){ win = new Ext.Window({ title : '多ceckbox动态生成测试窗口', xtype:"window", width : 900, height : 600, plain : true , items : [{ xtype:"fieldset", layout:"form", items:[ { xtype:"textfield", id : 'selectValue', fieldLabel:"选项值", anchor:"100%" } ] },{ xtype:"fieldset", layout:"form", id : 'cbCon', renderTo : this.panel, items:[ cb_Group ] }, { baseCls:"x-plain", buttons : [{ type:"button", text:"动态生成", handler : function() { dynamicGen(); } }] } ] }); } win.show(); setChecked(); }); </script> </code></pre> <p></head><br> <body></p>
