ExtJS 表单控件：单选框与复选框组合使用示例

Ext.onReady(function() {
  Ext.QuickTips.init();

  // turn on validation errors beside the field globally
  Ext.form.Field.prototype.msgTarget = 'side';

  var individual = [ {
    bodyStyle: 'padding-right:5px;',
    items: {
      xtype: 'fieldset',
      title: 'Individual Checkboxes',
      autoHeight: true,
      defaultType: 'checkbox', // each item will be a checkbox
      items: [ {
        xtype: 'textfield',
        name: 'txt-test1',
        fieldLabel: 'Alignment Test'
      }, {
        fieldLabel: 'Favorite Animals',
        boxLabel: 'Dog',
        name: 'fav-animal-dog'
      }, {
        fieldLabel: '',
        labelSeparator: '',
        boxLabel: 'Cat',
        name: 'fav-animal-cat'
      }, {
        : ,
        : ,
        : ,
        : ,
        : 
      } ]
    }
  }, {
    : ,
    : {
      : ,
      : ,
      : ,
      : , 
      : [ {
        : ,
        : ,
        : 
      }, {
        : ,
        : ,
        : ,
        : ,
        : 
      }, {
        : ,
        : ,
        : ,
        : ,
        : 
      }, {
        : ,
        : ,
        : ,
        : ,
        : 
      } ]
    }
  } ];

  
   checkGroup = {
    : ,
    : ,
    : ,
    : ,
    : , 
    : ,
    : [ {
      : ,
      : ,
      : ,
      : 
    }, {
      
      
      : ,
      : ,
      : [ {
        : ,
        : 
      }, {
        : ,
        : ,
        : 
      }, {
        : ,
        : 
      }, {
        : ,
        : 
      }, {
        : ,
        : 
      } ]
    }, {
      : ,
      : ,
      : ,
      
      : ,
      : [ {
        : ,
        : 
      }, {
        : ,
        : ,
        : 
      }, {
        : ,
        : 
      } ]
    }, {
      : ,
      : ,
      
      
      : ,
      : [ {
        : ,
        : 
      }, {
        : ,
        : ,
        : 
      }, {
        : ,
        : 
      }, {
        : ,
        : 
      }, {
        : ,
        : 
      } ]
    }, {
      : ,
      : ,
      : ,
      
      
      : ,
      : ,
      : [ {
        : ,
        : 
      }, {
        : ,
        : ,
        : 
      }, {
        : ,
        : 
      }, {
        : ,
        : 
      }, {
        : ,
        : 
      } ]
    }, {
      : ,
      : ,
      
      : [ ,  ],
      : ,
      : [ {
        : ,
        : ,
        : 
      }, {
        : ,
        : ,
        : ,
        : 
      }, {
        : ,
        : ,
        : 
      }, {
        : ,
        : ,
        : 
      }, {
        : ,
        : ,
        : 
      } ]
    }, {
      : ,
      : ,
      : ,
      : ,
      : ,
      : [ {
        
        
        
        
        
        : ,
        : [ {
          : ,
          : ,
          : ,
          : 
        }, {
          : ,
          : 
        }, {
          : ,
          : 
        } ]
      }, {
        : ,
        : [ {
          : ,
          : ,
          : ,
          : 
        }, {
          : ,
          : 
        } ]
      }, {
        : ,
        : [ {
          : ,
          : ,
          : ,
          : 
        }, {
          : ,
          : 
        }, {
          : ,
          : 
        } ]
      } ]
    } ]
  };

  

   radioGroup = {
    : ,
    : ,
    : ,
    : [ {
      : ,
      : ,
      : ,
      : 
    }, {
      : ,
      : ,
      : [ {
        : ,
        : ,
        : 
      }, {
        : ,
        : ,
        : ,
        : 
      }, {
        : ,
        : ,
        : 
      }, {
        : ,
        : ,
        : 
      }, {
        : ,
        : ,
        : 
      } ]
    }, {
      : ,
      : ,
      : ,
      : ,
      : [ {
        : ,
        : ,
        : 
      }, {
        : ,
        : ,
        : ,
        : 
      }, {
        : ,
        : ,
        : 
      } ]
    }, {
      : ,
      : ,
      : ,
      : [ {
        : ,
        : ,
        : 
      }, {
        : ,
        : ,
        : ,
        : 
      }, {
        : ,
        : ,
        : 
      }, {
        : ,
        : ,
        : 
      }, {
        : ,
        : ,
        : 
      } ]
    }, {
      : ,
      : ,
      : ,
      : ,
      : ,
      : [ {
        : ,
        : ,
        : 
      }, {
        : ,
        : ,
        : ,
        : 
      }, {
        : ,
        : ,
        : 
      }, {
        : ,
        : ,
        : 
      }, {
        : ,
        : ,
        : 
      } ]
    }, {
      : ,
      : ,
      : [ ,  ],
      : ,
      : [ {
        : ,
        : ,
        : 
      }, {
        : ,
        : ,
        : ,
        : 
      }, {
        : ,
        : ,
        : 
      }, {
        : ,
        : ,
        : 
      }, {
        : ,
        : ,
        : 
      } ]
    }, {
      : ,
      : ,
      : ,
      : ,
      : ,
      : [ {
        : ,
        : [ {
          : ,
          : ,
          : ,
          : 
        }, {
          : ,
          : ,
          : 
        }, {
          : ,
          : ,
          : 
        } ]
      }, {
        : ,
        : [ {
          : ,
          : ,
          : ,
          : 
        }, {
          : ,
          : ,
          : 
        } ]
      }, {
        : ,
        : [ {
          : ,
          : ,
          : ,
          : 
        }, {
          : ,
          : ,
          : 
        }, {
          : ,
          : ,
          : 
        } ]
      } ]
    } ]
  };

  
   fp =  .({
    : ,
    : ,
    : ,
    : ,
    : ,
    : ,
    : [ {
      : ,
      : ,
      
      : {
        : ,
        : 
      },
      : individual
    }, checkGroup, radioGroup ],
    : [
      {
        : ,
        : () {
           (fp.().()) {
            ..(,
              
              + fp.().()
              .(, ));
          }
        }
      }, {
        : ,
        : () {
          fp.().();
        }
      }
    ]
  });
});