var individual = {
xtype: 'container',
layout: 'hbox',
margin: '0 0 10',
items: [{
xtype: 'fieldset',
flex: 1,
title: 'Individual Checkboxes',
defaultType: 'checkbox',
layout: 'anchor',
defaults: {
anchor: '100%',
hideEmptyLabel: false
},
items: [{
xtype: 'textfield',
name: 'txt-test1',
fieldLabel: 'Alignment Test'
}, {
fieldLabel: 'Favorite Animals',
boxLabel: 'Dog',
name: 'fav-animal-dog',
inputValue: 'dog'
}, {
boxLabel: 'Cat',
name: 'fav-animal-cat',
inputValue: 'cat'
}, {
checked: true,
boxLabel: 'Monkey',
name: 'fav-animal-monkey',
inputValue: 'monkey'
}]
}, {
xtype: 'component',
width: 10
}, {
xtype: 'fieldset',
flex: 1,
title: 'Individual Radios',
defaultType: 'radio',
layout: 'anchor',
defaults: {
anchor: '100%',
hideEmptyLabel: false
},
items: [{
xtype: 'textfield',
name: 'txt-test2',
fieldLabel: 'Alignment Test'
}, {
checked: true,
fieldLabel: 'Favorite Color',
boxLabel: 'Red',
name: 'fav-color',
inputValue: 'red'
}, {
boxLabel: 'Blue',
name: 'fav-color',
inputValue: 'blue'
}, {
boxLabel: 'Green',
name: 'fav-color',
inputValue: 'green'
}]
}]
};
CheckGroup example
var checkGroup = {
xtype: 'fieldset',
title: 'Checkbox Groups (initially collapsed)',
layout: 'anchor',
defaults: {
anchor: '100%'
},
collapsible: true,
collapsed: true,
items: [{
xtype: 'textfield',
name: 'txt-test3',
fieldLabel: 'Alignment Test'
},{
xtype: 'checkboxgroup',
fieldLabel: 'Auto Layout',
cls: 'x-check-group-alt',
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',
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)',
cls: 'x-check-group-alt',
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)',
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)',
cls: 'x-check-group-alt',
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',
fieldLabel: 'Custom Layout<br />(w/ validation)',
allowBlank: false,
msgTarget: 'side',
autoFitErrors: false,
anchor: '-18',
layout: 'column',
defaultType: 'container',
items: [{
columnWidth: .25,
items: [
{xtype: 'component', html: 'Heading 1', cls:'x-form-check-group-label'},
{xtype: 'checkboxfield', boxLabel: 'Item 1', name: 'cb-cust-1'},
{xtype: 'checkboxfield', boxLabel: 'Item 2', name: 'cb-cust-2'}
]
},{
columnWidth: .5,
items: [
{xtype: 'component', html: 'Heading 2', cls:'x-form-check-group-label'},
{xtype: 'checkboxfield', boxLabel: 'A long item just for fun', name: 'cb-cust-3'}
]
},{
columnWidth: .25,
items: [
{xtype: 'component', html: 'Heading 3', cls:'x-form-check-group-label'},
{xtype: 'checkboxfield', boxLabel: 'Item 4', name: 'cb-cust-4'},
{xtype: 'checkboxfield', boxLabel: 'Item 5', name: 'cb-cust-5'}
]
}]
}]
};
RadioGroup examples
var radioGroup = {
xtype: 'fieldset',
title: 'Radio Groups',
layout: 'form',
collapsible: true,
items: [{
xtype: 'textfield',
name: 'txt-test4',
fieldLabel: 'Alignment Test'
},{
xtype: 'radiogroup',
fieldLabel: 'Auto Layout',
cls: 'x-check-group-alt',
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',
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 (horizontal)',
cls: 'x-check-group-alt',
columns: 3,
items: [
{boxLabel: 'Item 1', name: 'rb-horiz-1', inputValue: 1},
{boxLabel: 'Item 2', name: 'rb-horiz-1', inputValue: 2, checked: true},
{boxLabel: 'Item 3', name: 'rb-horiz-1', inputValue: 3},
{boxLabel: 'Item 1', name: 'rb-horiz-2', inputValue: 1, checked: true},
{boxLabel: 'Item 2', name: 'rb-horiz-2', inputValue: 2}
]
},{
xtype: 'radiogroup',
fieldLabel: 'Multi-Column (vertical)',
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)',
cls: 'x-check-group-alt',
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',
fieldLabel: 'Custom Layout<br />(w/ validation)',
allowBlank: false,
msgTarget: 'side',
autoFitErrors: false,
anchor: '-18',
layout: 'column',
defaultType: 'container',
items: [{
columnWidth: .25,
items: [
{xtype: 'component', html: 'Heading 1', cls:'x-form-check-group-label'},
{xtype: 'radiofield', boxLabel: 'Item 1', name: 'rb-cust', inputValue: 1},
{xtype: 'radiofield', boxLabel: 'Item 2', name: 'rb-cust', inputValue: 2}
]
},{
columnWidth: .5,
items: [
{xtype: 'component', html: 'Heading 2', cls:'x-form-check-group-label'},
{xtype: 'radiofield', boxLabel: 'A long item just for fun', name: 'rb-cust', inputValue: 3}
]
},{
columnWidth: .25,
items: [
{xtype: 'component', html: 'Heading 3', cls:'x-form-check-group-label'},
{xtype: 'radiofield', boxLabel: 'Item 4', name: 'rb-cust', inputValue: 4},
{xtype: 'radiofield', boxLabel: 'Item 5', name: 'rb-cust', inputValue: 5}
]
}]
}]
};
var fp = Ext.create('Ext.FormPanel', {
title: 'Check/Radio Groups Example',
frame: true,
fieldDefaults: {
labelWidth: 110,
labelStyle: 'color:green;padding-left:4px'
},
width: 600,
renderTo:'form-ct',
bodyPadding: 10,
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();
}
}]
});