Clear Up
SharpKit Reference

Checkbox Class

Single checkbox field. Can be used as a direct replacement for traditional checkbox fields. Also serves as a parent class for radio buttons.

Labeling

In addition to the standard field labeling options, checkboxes may be given an optional boxLabel which will be displayed immediately after checkbox. Also see Ext.form.CheckboxGroup for a convenient method of grouping related checkboxes.

Values

The main value of a checkbox is a boolean, indicating whether or not the checkbox is checked. The following values will check the checkbox:

  • true
  • 'true'
  • '1'
  • 'on'

Any other value will uncheck the checkbox.

In addition to the main boolean value, you may also specify a separate inputValue. This will be sent as the parameter value when the form is submitted. You will want to set this value if you have multiple checkboxes with the same name. If not specified, the value on will be used.

Example usage

  
    Ext.create('Ext.form.Panel', {
            bodyPadding: 10,
            width: 300,
            title: 'Pizza Order',
            items: [
            {
            xtype: 'fieldcontainer',
            fieldLabel: 'Toppings',
            defaultType: 'checkboxfield',
            items: [
            {
            boxLabel  : 'Anchovies',
            name      : 'topping',
            inputValue: '1',
            id        : 'checkbox1'
            }, {
            boxLabel  : 'Artichoke Hearts',
            name      : 'topping',
            inputValue: '2',
            checked   : true,
            id        : 'checkbox2'
            }, {
            boxLabel  : 'Bacon',
            name      : 'topping',
            inputValue: '3',
            id        : 'checkbox3'
            }
            ]
            }
            ],
            bbar: [
            {
            text: 'Select Bacon',
            handler: function() {
            Ext.getCmp('checkbox3').setValue(true);
            }
            },
            '-',
            {
            text: 'Select All',
            handler: function() {
            Ext.getCmp('checkbox1').setValue(true);
            Ext.getCmp('checkbox2').setValue(true);
            Ext.getCmp('checkbox3').setValue(true);
            }
            },
            {
            text: 'Deselect All',
            handler: function() {
            Ext.getCmp('checkbox1').setValue(false);
            Ext.getCmp('checkbox2').setValue(false);
            Ext.getCmp('checkbox3').setValue(false);
            }
            }
            ],
            renderTo: Ext.getBody()
            });
            

Namespace: Ext.form.field

Derived Types

Fields

Name Description
afterBoxLabelTextTpl An optional string or XTemplate configuration to insert in the field markup after the box label text. If an XTemplate is used, the component's subTpl data serves as the context.
afterBoxLabelTpl An optional string or XTemplate configuration to insert in the field markup after the box label element. If an XTemplate is used, the component's subTpl data serves as the context.
beforeBoxLabelTextTpl An optional string or XTemplate configuration to insert in the field markup before the box label text. If an XTemplate is used, the component's subTpl data serves as the context.
beforeBoxLabelTpl An optional string or XTemplate configuration to insert in the field markup before the box label element. If an XTemplate is used, the component's subTpl data serves as the context.
boxLabel An optional text label that will appear next to the checkbox. Whether it appears before or after the checkbox is determined by the boxLabelAlign config.
boxLabelAlign The position relative to the checkbox where the boxLabel should appear. Recognized values are 'before' and 'after'. Defaults to: "after"
boxLabelAttrTpl An optional string or XTemplate configuration to insert in the field markup inside the box label element (as attributes). If an XTemplate is used, the component's subTpl data serves as the context.
boxLabelCls The CSS class to be applied to the boxLabel element Defaults to: "x-form-cb-label"
checked true if the checkbox should render initially checked Defaults to: false
checkedCls The CSS class added to the component's main element when it is in the checked state. Defaults to: "x-form-cb-checked"
handler A function called when the checked value changes (can be used instead of handling the change event).
inputValue The value that should go into the generated input element's value attribute and should be used as the parameter value when submitting as part of a form. Defaults to: "on"
scope An object to use as the scope ('this' reference) of the handler function. Defaults to this Checkbox.
uncheckedValue If configured, this will be submitted as the checkbox's value during form submit if the checkbox is unchecked. By default this is undefined, which results in nothing being submitted for the checkbox field when the form is submitted (the default behavior of HTML checkboxes).

Properties

Name Description
boxLabelEl A reference to the label element created for the boxLabel. Only present if the component has been rendered and has a boxLabel configured.
© Copyright 2005-2011 SharpKit. All rights reserved.