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'
      }, {
        checked: true,
        fieldLabel: '',
        labelSeparator: '',
        boxLabel: 'Monkey',
        name: 'fav-animal-monkey'
      } ]
    }
  }, {
    bodyStyle: 'padding-left:5px;',
    items: {
      xtype: 'fieldset',
      title: 'Individual Radios',
      autoHeight: true,
      defaultType: 'radio', // each item will be a radio button
      items: [ {
        xtype: 'textfield',
        name: 'txt-test2',
        fieldLabel: 'Alignment Test'
      }, {
        checked: true,
        fieldLabel: 'Favorite Color',
        boxLabel: 'Red',
        name: 'fav-color',
        inputValue: 'red'
      }, {
        fieldLabel: '',
        labelSeparator: '',
        boxLabel: 'Blue',
        name: 'fav-color',
        inputValue: 'blue'
      }, {
        fieldLabel: '',
        labelSeparator: '',
        boxLabel: 'Green',
        name: 'fav-color',
        inputValue: 'green'
      } ]
    }
  } ];

  /*====================================================================
   * CheckGroup example
   *====================================================================*/
  var checkGroup = {
    xtype: 'fieldset',
    title: 'Checkbox Groups (initially collapsed)',
    autoHeight: true,
    layout: 'form',
    collapsed: true, // initially collapse the group
    collapsible: true,
    items: [ {
      xtype: 'textfield',
      name: 'txt-test3',
      fieldLabel: 'Alignment Test',
      anchor: '95%'
    }, {
      // Use the default, automatic layout to distribute the controls evenly
      // across a single row
      xtype: 'checkboxgroup',
      fieldLabel: 'Auto Layout',
      items: [ {
        boxLabel: 'Item 1',
        name: 'cb-auto-1'
      }, {
        boxLabel: 'Item 2',
        name: 'cb-auto-2',
        checked: true
      }, {
        boxLabel: 'Item 3',
        name: 'cb-auto-3'
      }, {
        boxLabel: 'Item 4',
        name: 'cb-auto-4'
      }, {
        boxLabel: 'Item 5',
        name: 'cb-auto-5'
      } ]
    }, {
      xtype: 'checkboxgroup',
      fieldLabel: 'Single Column',
      itemCls: 'x-check-group-alt',
      // Put all controls in a single column with width 100%
      columns: 1,
      items: [ {
        boxLabel: 'Item 1',
        name: 'cb-col-1'
      }, {
        boxLabel: 'Item 2',
        name: 'cb-col-2',
        checked: true
      }, {
        boxLabel: 'Item 3',
        name: 'cb-col-3'
      } ]
    }, {
      xtype: 'checkboxgroup',
      fieldLabel: 'Multi-Column (horizontal)',
      // Distribute controls across 3 even columns, filling each row
      // from left to right before starting the next row
      columns: 3,
      items: [ {
        boxLabel: 'Item 1',
        name: 'cb-horiz-1'
      }, {
        boxLabel: 'Item 2',
        name: 'cb-horiz-2',
        checked: true
      }, {
        boxLabel: 'Item 3',
        name: 'cb-horiz-3'
      }, {
        boxLabel: 'Item 4',
        name: 'cb-horiz-4'
      }, {
        boxLabel: 'Item 5',
        name: 'cb-horiz-5'
      } ]
    }, {
      xtype: 'checkboxgroup',
      fieldLabel: 'Multi-Column (vertical)',
      itemCls: 'x-check-group-alt',
      // Distribute controls across 3 even columns, filling each column
      // from top to bottom before starting the next column
      columns: 3,
      vertical: true,
      items: [ {
        boxLabel: 'Item 1',
        name: 'cb-vert-1'
      }, {
        boxLabel: 'Item 2',
        name: 'cb-vert-2',
        checked: true
      }, {
        boxLabel: 'Item 3',
        name: 'cb-vert-3'
      }, {
        boxLabel: 'Item 4',
        name: 'cb-vert-4'
      }, {
        boxLabel: 'Item 5',
        name: 'cb-vert-5'
      } ]
    }, {
      xtype: 'checkboxgroup',
      fieldLabel: 'Multi-Column<br />(custom widths)',
      // Specify exact column widths (could also include float values for %)
      columns: [ 100, 100 ],
      vertical: true,
      items: [ {
        boxLabel: 'Item 1',
        name: 'cb-custwidth',
        inputValue: 1
      }, {
        boxLabel: 'Item 2',
        name: 'cb-custwidth',
        inputValue: 2,
        checked: true
      }, {
        boxLabel: 'Item 3',
        name: 'cb-custwidth',
        inputValue: 3
      }, {
        boxLabel: 'Item 4',
        name: 'cb-custwidth',
        inputValue: 4
      }, {
        boxLabel: 'Item 5',
        name: 'cb-custwidth',
        inputValue: 5
      } ]
    }, {
      xtype: 'checkboxgroup',
      itemCls: 'x-check-group-alt',
      fieldLabel: 'Custom Layout<br />(w/ validation)',
      allowBlank: false,
      anchor: '95%',
      items: [ {
        // You can pass sub-item arrays along with width/columnWidth configs
        // ColumnLayout-style for complete layout control.  In this example we
        // only want one item in the middle column, which would not be possible
        // using the columns config.  We also want to make sure that our headings
        // end up at the top of each column as expected.
        columnWidth: '.25',
        items: [ {
          xtype: 'label',
          text: 'Heading 1',
          cls: 'x-form-check-group-label',
          anchor: '-15'
        }, {
          boxLabel: 'Item 1',
          name: 'cb-cust-1'
        }, {
          boxLabel: 'Item 2',
          name: 'cb-cust-2'
        } ]
      }, {
        columnWidth: '.5',
        items: [ {
          xtype: 'label',
          text: 'Heading 2',
          cls: 'x-form-check-group-label',
          anchor: '-15'
        }, {
          boxLabel: 'A long item just for fun',
          name: 'cb-cust-3'
        } ]
      }, {
        columnWidth: '.25',
        items: [ {
          xtype: 'label',
          text: 'Heading 3',
          cls: 'x-form-check-group-label',
          anchor: '-15'
        }, {
          boxLabel: 'Item 4',
          name: 'cb-cust-4'
        }, {
          boxLabel: 'Item 5',
          name: 'cb-cust-5'
        } ]
      } ]
    } ]
  };

  /*====================================================================
   * RadioGroup examples
   *====================================================================*/

  var radioGroup = {
    xtype: 'fieldset',
    title: 'Radio Groups',
    autoHeight: true,
    items: [ {
      xtype: 'textfield',
      name: 'txt-test4',
      fieldLabel: 'Alignment Test',
      anchor: '95%'
    }, {
      xtype: 'radiogroup',
      fieldLabel: 'Auto Layout',
      items: [ {
        boxLabel: 'Item 1',
        name: 'rb-auto',
        inputValue: 1
      }, {
        boxLabel: 'Item 2',
        name: 'rb-auto',
        inputValue: 2,
        checked: true
      }, {
        boxLabel: 'Item 3',
        name: 'rb-auto',
        inputValue: 3
      }, {
        boxLabel: 'Item 4',
        name: 'rb-auto',
        inputValue: 4
      }, {
        boxLabel: 'Item 5',
        name: 'rb-auto',
        inputValue: 5
      } ]
    }, {
      xtype: 'radiogroup',
      fieldLabel: 'Single Column',
      itemCls: 'x-check-group-alt',
      columns: 1,
      items: [ {
        boxLabel: 'Item 1',
        name: 'rb-col',
        inputValue: 1
      }, {
        boxLabel: 'Item 2',
        name: 'rb-col',
        inputValue: 2,
        checked: true
      }, {
        boxLabel: 'Item 3',
        name: 'rb-col',
        inputValue: 3
      } ]
    }, {
      xtype: 'radiogroup',
      fieldLabel: 'Multi-Column<br />(horiz. auto-width)',
      columns: 3,
      items: [ {
        boxLabel: 'Item 1',
        name: 'rb-horiz',
        inputValue: 1
      }, {
        boxLabel: 'Item 2',
        name: 'rb-horiz',
        inputValue: 2,
        checked: true
      }, {
        boxLabel: 'Item 3',
        name: 'rb-horiz',
        inputValue: 3
      }, {
        boxLabel: 'Item 4',
        name: 'rb-horiz',
        inputValue: 4
      }, {
        boxLabel: 'Item 5',
        name: 'rb-horiz',
        inputValue: 5
      } ]
    }, {
      xtype: 'radiogroup',
      fieldLabel: 'Multi-Column<br />(vert. auto-width)',
      itemCls: 'x-check-group-alt',
      columns: 3,
      vertical: true,
      items: [ {
        boxLabel: 'Item 1',
        name: 'rb-vert',
        inputValue: 1
      }, {
        boxLabel: 'Item 2',
        name: 'rb-vert',
        inputValue: 2,
        checked: true
      }, {
        boxLabel: 'Item 3',
        name: 'rb-vert',
        inputValue: 3
      }, {
        boxLabel: 'Item 4',
        name: 'rb-vert',
        inputValue: 4
      }, {
        boxLabel: 'Item 5',
        name: 'rb-vert',
        inputValue: 5
      } ]
    }, {
      xtype: 'radiogroup',
      fieldLabel: 'Multi-Column<br />(custom widths)',
      columns: [ 100, 100 ],
      vertical: true,
      items: [ {
        boxLabel: 'Item 1',
        name: 'rb-custwidth',
        inputValue: 1
      }, {
        boxLabel: 'Item 2',
        name: 'rb-custwidth',
        inputValue: 2,
        checked: true
      }, {
        boxLabel: 'Item 3',
        name: 'rb-custwidth',
        inputValue: 3
      }, {
        boxLabel: 'Item 4',
        name: 'rb-custwidth',
        inputValue: 4
      }, {
        boxLabel: 'Item 5',
        name: 'rb-custwidth',
        inputValue: 5
      } ]
    }, {
      xtype: 'radiogroup',
      itemCls: 'x-check-group-alt',
      fieldLabel: 'Custom Layout<br />(w/ validation)',
      allowBlank: false,
      anchor: '95%',
      items: [ {
        columnWidth: '.25',
        items: [ {
          xtype: 'label',
          text: 'Heading 1',
          cls: 'x-form-check-group-label',
          anchor: '-15'
        }, {
          boxLabel: 'Item 1',
          name: 'rb-cust',
          inputValue: 1
        }, {
          boxLabel: 'Item 2',
          name: 'rb-cust',
          inputValue: 2
        } ]
      }, {
        columnWidth: '.5',
        items: [ {
          xtype: 'label',
          text: 'Heading 2',
          cls: 'x-form-check-group-label',
          anchor: '-15'
        }, {
          boxLabel: 'A long item just for fun',
          name: 'rb-cust',
          inputValue: 3
        } ]
      }, {
        columnWidth: '.25',
        items: [ {
          xtype: 'label',
          text: 'Heading 3',
          cls: 'x-form-check-group-label',
          anchor: '-15'
        }, {
          boxLabel: 'Item 4',
          name: 'rb-cust',
          inputValue: 4
        }, {
          boxLabel: 'Item 5',
          name: 'rb-cust',
          inputValue: 5
        } ]
      } ]
    } ]
  };

  // combine all that into one huge form
  var fp = new Ext.FormPanel({
    title: 'Check/Radio Groups Example',
    frame: true,
    labelWidth: 110,
    width: 600,
    renderTo: 'container',
    bodyStyle: 'padding:0 10px 0;',
    items: [ {
      layout: 'column',
      border: false,
      // defaults are applied to all child items unless otherwise specified by child item
      defaults: {
        columnWidth: '.5',
        border: false
      },
      items: individual
    }, checkGroup, radioGroup ],
    buttons: [
      {
        text: 'Save',
        handler: function() {
          if (fp.getForm().isValid()) {
            Ext.Msg.alert('Submitted Values',
              'The following will be sent to the server: <br />'
              + fp.getForm().getValues(true)
              .replace(/&/g, ', '));
          }
        }
      }, {
        text: 'Reset',
        handler: function() {
          fp.getForm().reset();
        }
      }
    ]
  });
});