Ext z自写checkbox

软件弹出框Exr.window里面有许多个CheckBox,用ext自带的CheckBoxGroup也可以实现,但是在后期处理的时候远没有自写的CheckBox灵活,还出了一些莫名其妙的bug

忍无可忍,将CheckBoxGroup全换成了自己写的HTML代码:

(p.s.:因为公司项目较老,用的extjs版本非常低3.2版本的,高版本的没有测试,估计也是这样写的(⊙﹏⊙)b)

TZGDForm = new Ext.FormPanel({
        id : 'test',
        labelAlign : 'right',
        bodyStyle : 'padding:10px,10px,0px;',
        height : 300,
        labelWidth : 100,
        frame : true,
        buttonAlign: 'center',
        monitorValid : true,
        items : [ID,
          {
            columnWidth : 1,
            layout : 'FORM',
            items : [ {
              layout : 'column',
              items : [{
                  hidden:true,
                  items : [ ID ]
              }, {
                columnWidth : 0.5,
                layout : 'FORM',
                items : [ MAN_NAME ]
              }, {
                columnWidth : 0.5,
                layout : 'FORM',
                items : [ ENGLISH_NAME ]
              } ,{
                  items:[FOR_COUNTRY_TZGD]
              },{
                  columnWidth : 0.5,
                  layout : 'FORM',
                  items : [ FOR_COUNTRY_TZGD_ ]
              },{
                columnWidth : 0.5,
                layout : 'FORM',
                items : [ CERTIFICATE_NO ]
              },{

                  layout : 'column',
                  columnWidth:1,
                  border : false,
                  labelSeparator : ' : ',
                  defaults : {
                      layout : 'form',
                      border : false,
                      columnWidth : .5
                  },
                  items : [ {
                      items : [ {
                 fieldLabel : '类别',
                       html : '<ul>'
                         + '<li><input type="checkbox" name="typeTZEND" id="typeTZEND_0" value="0"> 测试1</li>'
                         + '<li><input type="checkbox" name="typeTZEND" id="typeTZEND_1" value="1"> 测试2</li>'
                         + '<li><input type="checkbox" name="typeTZEND" id="typeTZEND_2" value="2"> 测试3</li>'
                         + '<li><input type="checkbox" name="typeTZEND" id="typeTZEND_3" value="3"> 测试4</li>'
                         + '<li><input type="checkbox" name="typeTZEND" id="typeTZEND_4" value="4"> 测试5</li>'
                           + '<li><input type="checkbox" name="typeTZEND" id="typeTZEND_5" value="5"> 测试6</li>'
                           + '<li><input type="checkbox" name="typeTZEND" id="typeTZEND_6" value="6"> 测试7</li>'
                           + '</ul>',
                         bodyStyle : 'height:200px;line-height:25px;vertical-align:middle;'
                } ]
                  }, {
                  items : [ {
                   fieldLabel : '实际控制方式',
                   html : '<ul> '
                     + '<li><input type="checkbox" name="controlTZEND" id="typeTZEND_7" value="0"> 测试1</li>'
                       + '<li><input type="checkbox" name="controlTZEND" id="typeTZEND_8" value="1"> 测试2</li>'
                       + '<li><input type="checkbox" name="controlTZEND" id="typeTZEND_9" value="2"> 测试3</li>'
                       + '</ul>',
                     bodyStyle : 'height:200px;line-height:25px;vertical-align:middle;'
            } ]
              }]
              
              },{
                  columnWidth : 1,
                  layout : 'FORM',
                  items : [ OTHER_CONTENT ]
              }]
            } ]
          }],
          buttons : [{
              id : 'subTZGD',
              text : '确定',
              name : 'submit',
              align:'center',
              handler : function() {
                       ………………
                          TZGDwin.hide();
                         TZGDForm.form.reset();
                        },
                        failure : function(form, action) {
                          Ext.Msg.alert('消息', action.result.data);
                          this.disabled = false;
                        }
                      });
                this.disabled = false;
              }
            }, {
              text : '关闭',
              handler : function() {
                this.disabled = false;
                TZGDwin.hide();
                TZGDForm.form.reset();
              }
            }]
      });
原文地址:https://www.cnblogs.com/laorenzhenhaoa/p/6872102.html