问题描述
下面是我做动态生成checkbox的一个demo.不过有两个问题一直无法解决,麻烦各位帮忙看下:1, 如果checkbox在初始化的时候就checked(选中),取消选中的时候事件没有触发.比如例子上checkbox B刚开始是代码给选中的,取消B的选中,上面的文本框不会出现单个C,如果单选中一个C,文本框应该显示C.2, 点击动态生成,总是提示this.ownerCt.forcelayout is null or undefined.好像是render不对,不知道原因在哪.可是通过调试cbGroup.ownerCt.forceLayout是false.请各位帮忙看看,谢谢了!下面是代码<html><head><meta http-equiv="Content-Type" content="text/html; charset=gbk"> <title>Hello World Window Example</title> <link rel="stylesheet" type="text/css" href="ext-3.2.1/resources/css/ext-all.css" /> <script type="text/javascript" src="ext-3.2.1/adapter/ext/ext-base-debug-w-comments.js"></script> <script type="text/javascript" src="ext-3.2.1/ext-all-debug-w-comments.js"></script> <script type="text/javascript">Ext.onReady(function(){var win;var cb_Group;var data = '';function funCheck(thisCheck){var selectStr = "";for (var j=0;j<5 ;j++ ){var cbObj = Ext.getDom("name"+j);if (cbObj && cbObj.checked){selectStr = selectStr + Ext.getDom("name"+j).value ; }}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></head><body>
解决方案
引用new_cbg.items = newItems; cbGroup.items.add(new_cbg); 改成如下：new_cbg.items = newItems; cbGroup.add(new_cbg); 我用3.1版本测试的 成功 不报错 我点击取消选中的时候 事件触发了 上面的textfield内的值也发生变化了