Ext. Form. checkboxgroup and Ext. Form. radiogroup

1. Main configuration of Ext. Form. checkboxgroup

Configuration item	Type	Description
Allowblank	Boolean	Set whether at least one item must be selected. "True" indicates that at least one item can be selected. "false" indicates that at least one item cannot be selected. The default value is "true.
Blanktext	String	Error message when allowblank is set to false and no check box is selected
Columns	String/number/Array	Set the number of columns, Valid values include: "Auto": Automatically splits the width of the field container. Number: number of specified Columns Array specifies the array of column width. integers and floating-point numbers can be used.
Items	Array	Check box or check box configure an array of Objects

2. Ext. Form. checkboxgroup example

Code:

 <! Doctype HTML public "-// W3C // dtd xhtml 1.0 transitional // en" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"  >  <  Html  Xmlns  = "Http://www.w3.org/1999/xhtml"  >  <  Head  Runat  = "Server"  >      <  Title  > Checkboxgroup and radiogroup examples </  Title  >      <  Link  Href  = "Ext-4.0.7-gpl/resources/CSS/ext-all.css"  REL  = "Stylesheet"  Type  = "Text/CSS"   />      <  Script  SRC = "Ext-4.0.7-gpl/Bootstrap. js"  Type  = "Text/JavaScript"  > </  Script  >      <  Script  Type  = "Text/JavaScript"  >  Ext. onready (  Function  (){ New  Ext. Form. Panel ({Title:  "  Checkboxgroup and radiogroup examples  "  , Bodystyle:  "  Padding: 5  "  , Frame:  True , Height:  150  , Width:  300  , Renderto: Ext. getbody (), defaults: {labelseparator:  "  :  "  , Labelwidth:  80 , Width:  250  , Labelalign:  "  Left  "  }, Items: [{xtype:  "  Radiogroup  " , Fieldlabel:  "  Gender  "  , Columns:  2  , Items: [{boxlabel:  "  Male  "  , Name: "  Sex  "  , Inputvalue:  "  Male  "  }, {Boxlabel:  "  Female  " , Name:  "  Sex  "  , Inputvalue:  "  Female  "  }]}, {Xtype:  "  Checkboxgroup "  , Fieldlabel:  "  Hobbies  "  , Columns:  3  , Items: [{boxlabel:  "  Swimming  " , Name:  "  Swim  "  }, {Boxlabel:  "  Walking  "  , Name:  "  Walk "  }, {Boxlabel:  "  Read  "  , Name:  "  Read  "  }, {Boxlabel:  " Games  "  , Name:  "  Game  "  }, {Boxlabel:  "  Movie  "  , Name: "  Movie  "  }]});  </  Script  >  </  Head  >  <  Body  >  </  Body >  </  Html  > 

: