- 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();
- }
- } ]
- });
- });
本文转自 tianya23 51CTO博客,原文链接:http://blog.51cto.com/tianya23/821394,如需转载请自行联系原作者