[extjs.git] / extjs / build / examples / kitchensink / classic / samples / view / form / RadioGroupForm.js

/**\r
 * This example demonstrates the flexible layout capabilities of the RadioGroup class.\r
 * It also shows that you can validate radios as a group - try submitting the form before\r
 * changing any values to see this.\r
 */\r
Ext.define('KitchenSink.view.form.RadioGroupForm', {\r
    extend: 'Ext.form.Panel',\r
    xtype: 'form-radiogroup',\r
    \r
    // This example shares its ViewController with Checkbox Group Form\r
    controller: 'form-checkboxgroup',\r
    \r
    //<example>\r
    exampleTitle: 'Radio Groups',\r
    otherContent: [{\r
        type: 'ViewController',\r
        path: 'classic/samples/view/form/CheckboxGroupFormController.js'\r
    }],\r
    //</example>\r
    \r
    title: 'Radio Group Example',\r
    frame: true,\r
    width: 650,\r
    bodyPadding: 10,\r
    \r
    fieldDefaults: {\r
        labelWidth: 120\r
    },\r
    \r
    items: [{\r
        /*====================================================================\r
         * Individual checkbox/radio examples\r
         *====================================================================*/\r
\r
        // Using checkbox/radio groups will generally be more convenient and flexible than\r
        // using individual checkbox and radio controls, but this shows that you can\r
        // certainly do so if you only have a single control at a time.\r
        xtype: 'container',\r
        layout: 'hbox',\r
        margin: '0 0 10',\r
        items: [{\r
            xtype: 'fieldset',\r
            flex: 1,\r
            title: 'Individual Checkboxes',\r
            checkboxToggle: true,\r
            defaultType: 'checkbox', // each item will be a checkbox\r
            layout: 'anchor',\r
            defaults: {\r
                anchor: '100%',\r
                hideEmptyLabel: false\r
            },\r
            items: [{\r
                xtype: 'textfield',\r
                name: 'txt-test1',\r
                fieldLabel: 'Alignment Test'\r
            }, {\r
                fieldLabel: 'Favorite Animals',\r
                boxLabel: 'Dog',\r
                name: 'fav-animal-dog',\r
                inputValue: 'dog'\r
            }, {\r
                boxLabel: 'Cat',\r
                name: 'fav-animal-cat',\r
                inputValue: 'cat'\r
            }, {\r
                checked: true,\r
                boxLabel: 'Monkey',\r
                name: 'fav-animal-monkey',\r
                inputValue: 'monkey'\r
            }]\r
        }, {\r
            xtype: 'component',\r
            width: 10\r
        }, {\r
            xtype: 'fieldset',\r
            flex: 1,\r
            title: 'Individual Radios',\r
            checkboxToggle: true,\r
            defaultType: 'radio', // each item will be a radio button\r
            layout: 'anchor',\r
            defaults: {\r
                anchor: '100%',\r
                hideEmptyLabel: false\r
            },\r
            items: [{\r
                xtype: 'textfield',\r
                name: 'txt-test2',\r
                fieldLabel: 'Alignment Test'\r
            }, {\r
                checked: true,\r
                fieldLabel: 'Favorite Color',\r
                boxLabel: 'Red',\r
                name: 'fav-color',\r
                inputValue: 'red'\r
            }, {\r
                boxLabel: 'Blue',\r
                name: 'fav-color',\r
                inputValue: 'blue'\r
            }, {\r
                boxLabel: 'Green',\r
                name: 'fav-color',\r
                inputValue: 'green'\r
            }]\r
        }]\r
    }, {\r
        /*====================================================================\r
         * RadioGroup examples\r
         *====================================================================*/\r
        // NOTE: These radio examples use the exact same options as the checkbox ones\r
        // above, so the comments will not be repeated.  Please see comments above for\r
        // additional explanation on some config options.\r
        xtype: 'fieldset',\r
        title: 'Radio Groups',\r
        // in this section we use the form layout that will aggregate all of the fields\r
        // into a single table, rather than one table per field.\r
        layout: 'anchor',\r
        collapsible: true,\r
        defaults: {\r
            anchor: '100%'\r
        },\r
        items: [{\r
            xtype: 'textfield',\r
            name: 'txt-test4',\r
            fieldLabel: 'Alignment Test'\r
        },{\r
            xtype: 'radiogroup',\r
            fieldLabel: 'Auto Layout',\r
            cls: 'x-check-group-alt',\r
            items: [\r
                {boxLabel: 'Item 1', name: 'rb-auto', inputValue: 1},\r
                {boxLabel: 'Item 2', name: 'rb-auto', inputValue: 2, checked: true},\r
                {boxLabel: 'Item 3', name: 'rb-auto', inputValue: 3},\r
                {boxLabel: 'Item 4', name: 'rb-auto', inputValue: 4},\r
                {boxLabel: 'Item 5', name: 'rb-auto', inputValue: 5}\r
            ]\r
        },{\r
            xtype: 'radiogroup',\r
            fieldLabel: 'Single Column',\r
            columns: 1,\r
            items: [\r
                {boxLabel: 'Item 1', name: 'rb-col', inputValue: 1},\r
                {boxLabel: 'Item 2', name: 'rb-col', inputValue: 2, checked: true},\r
                {boxLabel: 'Item 3', name: 'rb-col', inputValue: 3}\r
            ]\r
        },{\r
            xtype: 'radiogroup',\r
            fieldLabel: 'Multi-Column (horizontal)',\r
            cls: 'x-check-group-alt',\r
            columns: 3,\r
            items: [\r
                {boxLabel: 'Item 1', name: 'rb-horiz-1', inputValue: 1},\r
                {boxLabel: 'Item 2', name: 'rb-horiz-1', inputValue: 2, checked: true},\r
                {boxLabel: 'Item 3', name: 'rb-horiz-1', inputValue: 3},\r
                {boxLabel: 'Item 4', name: 'rb-horiz-2', inputValue: 4},\r
                {boxLabel: 'Item 5', name: 'rb-horiz-2', inputValue: 5}\r
            ]\r
        },{\r
            xtype: 'radiogroup',\r
            fieldLabel: 'Multi-Column (vertical)',\r
            columns: 3,\r
            vertical: true,\r
            items: [\r
                {boxLabel: 'Item 1', name: 'rb-vert', inputValue: 1},\r
                {boxLabel: 'Item 2', name: 'rb-vert', inputValue: 2, checked: true},\r
                {boxLabel: 'Item 3', name: 'rb-vert', inputValue: 3},\r
                {boxLabel: 'Item 4', name: 'rb-vert', inputValue: 4},\r
                {boxLabel: 'Item 5', name: 'rb-vert', inputValue: 5}\r
            ]\r
        },{\r
            xtype: 'radiogroup',\r
            fieldLabel: 'Multi-Column<br />(custom widths)',\r
            cls: 'x-check-group-alt',\r
            columns: [100, 100],\r
            vertical: true,\r
            items: [\r
                {boxLabel: 'Item 1', name: 'rb-custwidth', inputValue: 1},\r
                {boxLabel: 'Item 2', name: 'rb-custwidth', inputValue: 2, checked: true},\r
                {boxLabel: 'Item 3', name: 'rb-custwidth', inputValue: 3},\r
                {boxLabel: 'Item 4', name: 'rb-custwidth', inputValue: 4},\r
                {boxLabel: 'Item 5', name: 'rb-custwidth', inputValue: 5}\r
            ]\r
        },{\r
            xtype: 'radiogroup',\r
            fieldLabel: 'Custom Layout<br />(w/ validation)',\r
            allowBlank: false,\r
            msgTarget: 'side',\r
            autoFitErrors: false,\r
            anchor: '-18',\r
            layout: 'column',\r
            defaultType: 'container',\r
            items: [{\r
                columnWidth: .25,\r
                items: [\r
                    {xtype: 'component', html: 'Heading 1', cls:'x-form-check-group-label'},\r
                    {xtype: 'radiofield', boxLabel: 'Item 1', name: 'rb-cust', inputValue: 1},\r
                    {xtype: 'radiofield', boxLabel: 'Item 2', name: 'rb-cust', inputValue: 2}\r
                ]\r
            },{\r
                columnWidth: .4,\r
                items: [\r
                    {xtype: 'component', html: 'Heading 2', cls:'x-form-check-group-label'},\r
                    {xtype: 'radiofield', boxLabel: 'A long item just for fun', name: 'rb-cust', inputValue: 3}\r
                ]\r
            },{\r
                columnWidth: .25,\r
                items: [\r
                    {xtype: 'component', html: 'Heading 3', cls:'x-form-check-group-label'},\r
                    {xtype: 'radiofield', boxLabel: 'Item 4', name: 'rb-cust', inputValue: 4},\r
                    {xtype: 'radiofield', boxLabel: 'Item 5', name: 'rb-cust', inputValue: 5}\r
                ]\r
            }]\r
        }]\r
    }],\r
    \r
    buttons: [{\r
        text: 'Save',\r
        handler: 'onSaveFormClick'\r
    }, {\r
        text: 'Reset',\r
        handler: 'onResetFormClick'\r
    }]\r
});\r
Commit	Line	Data
6527f429 DM	1	/**\r
	2	* This example demonstrates the flexible layout capabilities of the RadioGroup class.\r
	3	* It also shows that you can validate radios as a group - try submitting the form before\r
	4	* changing any values to see this.\r
	5	*/\r
	6	Ext.define('KitchenSink.view.form.RadioGroupForm', {\r
	7	extend: 'Ext.form.Panel',\r
	8	xtype: 'form-radiogroup',\r
	9	\r
	10	// This example shares its ViewController with Checkbox Group Form\r
	11	controller: 'form-checkboxgroup',\r
	12	\r
	13	//<example>\r
	14	exampleTitle: 'Radio Groups',\r
	15	otherContent: [{\r
	16	type: 'ViewController',\r
	17	path: 'classic/samples/view/form/CheckboxGroupFormController.js'\r
	18	}],\r
	19	//</example>\r
	20	\r
	21	title: 'Radio Group Example',\r
	22	frame: true,\r
	23	width: 650,\r
	24	bodyPadding: 10,\r
	25	\r
	26	fieldDefaults: {\r
	27	labelWidth: 120\r
	28	},\r
	29	\r
	30	items: [{\r
	31	/*====================================================================\r
	32	* Individual checkbox/radio examples\r
	33	====================================================================/\r
	34	\r
	35	// Using checkbox/radio groups will generally be more convenient and flexible than\r
	36	// using individual checkbox and radio controls, but this shows that you can\r
	37	// certainly do so if you only have a single control at a time.\r
	38	xtype: 'container',\r
	39	layout: 'hbox',\r
	40	margin: '0 0 10',\r
	41	items: [{\r
	42	xtype: 'fieldset',\r
	43	flex: 1,\r
	44	title: 'Individual Checkboxes',\r
	45	checkboxToggle: true,\r
	46	defaultType: 'checkbox', // each item will be a checkbox\r
	47	layout: 'anchor',\r
	48	defaults: {\r
	49	anchor: '100%',\r
	50	hideEmptyLabel: false\r
	51	},\r
	52	items: [{\r
	53	xtype: 'textfield',\r
	54	name: 'txt-test1',\r
	55	fieldLabel: 'Alignment Test'\r
	56	}, {\r
	57	fieldLabel: 'Favorite Animals',\r
	58	boxLabel: 'Dog',\r
	59	name: 'fav-animal-dog',\r
	60	inputValue: 'dog'\r
	61	}, {\r
	62	boxLabel: 'Cat',\r
	63	name: 'fav-animal-cat',\r
	64	inputValue: 'cat'\r
65	}, {\r
66	checked: true,\r
67	boxLabel: 'Monkey',\r
68	name: 'fav-animal-monkey',\r
69	inputValue: 'monkey'\r
70	}]\r
71	}, {\r
72	xtype: 'component',\r
73	width: 10\r
74	}, {\r
75	xtype: 'fieldset',\r
76	flex: 1,\r
77	title: 'Individual Radios',\r
78	checkboxToggle: true,\r
79	defaultType: 'radio', // each item will be a radio button\r
80	layout: 'anchor',\r
81	defaults: {\r
82	anchor: '100%',\r
83	hideEmptyLabel: false\r
84	},\r
85	items: [{\r
86	xtype: 'textfield',\r
87	name: 'txt-test2',\r
88	fieldLabel: 'Alignment Test'\r
89	}, {\r
90	checked: true,\r
91	fieldLabel: 'Favorite Color',\r
92	boxLabel: 'Red',\r
93	name: 'fav-color',\r
94	inputValue: 'red'\r
95	}, {\r
96	boxLabel: 'Blue',\r
97	name: 'fav-color',\r
98	inputValue: 'blue'\r
99	}, {\r
100	boxLabel: 'Green',\r
101	name: 'fav-color',\r
102	inputValue: 'green'\r
103	}]\r
104	}]\r
105	}, {\r
106	/*====================================================================\r
107	* RadioGroup examples\r
108	====================================================================/\r
109	// NOTE: These radio examples use the exact same options as the checkbox ones\r
110	// above, so the comments will not be repeated. Please see comments above for\r
111	// additional explanation on some config options.\r
112	xtype: 'fieldset',\r
113	title: 'Radio Groups',\r
114	// in this section we use the form layout that will aggregate all of the fields\r
115	// into a single table, rather than one table per field.\r
116	layout: 'anchor',\r
117	collapsible: true,\r
118	defaults: {\r
119	anchor: '100%'\r
120	},\r
121	items: [{\r
122	xtype: 'textfield',\r
123	name: 'txt-test4',\r
124	fieldLabel: 'Alignment Test'\r
125	},{\r
126	xtype: 'radiogroup',\r
127	fieldLabel: 'Auto Layout',\r
128	cls: 'x-check-group-alt',\r
129	items: [\r
130	{boxLabel: 'Item 1', name: 'rb-auto', inputValue: 1},\r
131	{boxLabel: 'Item 2', name: 'rb-auto', inputValue: 2, checked: true},\r
132	{boxLabel: 'Item 3', name: 'rb-auto', inputValue: 3},\r
133	{boxLabel: 'Item 4', name: 'rb-auto', inputValue: 4},\r
134	{boxLabel: 'Item 5', name: 'rb-auto', inputValue: 5}\r
135	]\r
136	},{\r
137	xtype: 'radiogroup',\r
138	fieldLabel: 'Single Column',\r
139	columns: 1,\r
140	items: [\r
141	{boxLabel: 'Item 1', name: 'rb-col', inputValue: 1},\r
142	{boxLabel: 'Item 2', name: 'rb-col', inputValue: 2, checked: true},\r
143	{boxLabel: 'Item 3', name: 'rb-col', inputValue: 3}\r
144	]\r
145	},{\r
146	xtype: 'radiogroup',\r
147	fieldLabel: 'Multi-Column (horizontal)',\r
148	cls: 'x-check-group-alt',\r
149	columns: 3,\r
150	items: [\r
151	{boxLabel: 'Item 1', name: 'rb-horiz-1', inputValue: 1},\r
152	{boxLabel: 'Item 2', name: 'rb-horiz-1', inputValue: 2, checked: true},\r
153	{boxLabel: 'Item 3', name: 'rb-horiz-1', inputValue: 3},\r
154	{boxLabel: 'Item 4', name: 'rb-horiz-2', inputValue: 4},\r
155	{boxLabel: 'Item 5', name: 'rb-horiz-2', inputValue: 5}\r
156	]\r
157	},{\r
158	xtype: 'radiogroup',\r
159	fieldLabel: 'Multi-Column (vertical)',\r
160	columns: 3,\r
161	vertical: true,\r
162	items: [\r
163	{boxLabel: 'Item 1', name: 'rb-vert', inputValue: 1},\r
164	{boxLabel: 'Item 2', name: 'rb-vert', inputValue: 2, checked: true},\r
165	{boxLabel: 'Item 3', name: 'rb-vert', inputValue: 3},\r
166	{boxLabel: 'Item 4', name: 'rb-vert', inputValue: 4},\r
167	{boxLabel: 'Item 5', name: 'rb-vert', inputValue: 5}\r
168	]\r
169	},{\r
170	xtype: 'radiogroup',\r
171	fieldLabel: 'Multi-Column<br />(custom widths)',\r
172	cls: 'x-check-group-alt',\r
173	columns: [100, 100],\r
174	vertical: true,\r
175	items: [\r
176	{boxLabel: 'Item 1', name: 'rb-custwidth', inputValue: 1},\r
177	{boxLabel: 'Item 2', name: 'rb-custwidth', inputValue: 2, checked: true},\r
178	{boxLabel: 'Item 3', name: 'rb-custwidth', inputValue: 3},\r
179	{boxLabel: 'Item 4', name: 'rb-custwidth', inputValue: 4},\r
180	{boxLabel: 'Item 5', name: 'rb-custwidth', inputValue: 5}\r
181	]\r
182	},{\r
183	xtype: 'radiogroup',\r
184	fieldLabel: 'Custom Layout<br />(w/ validation)',\r
185	allowBlank: false,\r
186	msgTarget: 'side',\r
187	autoFitErrors: false,\r
188	anchor: '-18',\r
189	layout: 'column',\r
190	defaultType: 'container',\r
191	items: [{\r
192	columnWidth: .25,\r
193	items: [\r
194	{xtype: 'component', html: 'Heading 1', cls:'x-form-check-group-label'},\r
195	{xtype: 'radiofield', boxLabel: 'Item 1', name: 'rb-cust', inputValue: 1},\r
196	{xtype: 'radiofield', boxLabel: 'Item 2', name: 'rb-cust', inputValue: 2}\r
197	]\r
198	},{\r
199	columnWidth: .4,\r
200	items: [\r
201	{xtype: 'component', html: 'Heading 2', cls:'x-form-check-group-label'},\r
202	{xtype: 'radiofield', boxLabel: 'A long item just for fun', name: 'rb-cust', inputValue: 3}\r
203	]\r
204	},{\r
205	columnWidth: .25,\r
206	items: [\r
207	{xtype: 'component', html: 'Heading 3', cls:'x-form-check-group-label'},\r
208	{xtype: 'radiofield', boxLabel: 'Item 4', name: 'rb-cust', inputValue: 4},\r
209	{xtype: 'radiofield', boxLabel: 'Item 5', name: 'rb-cust', inputValue: 5}\r
210	]\r
211	}]\r
212	}]\r
213	}],\r
214	\r
215	buttons: [{\r
216	text: 'Save',\r
217	handler: 'onSaveFormClick'\r
218	}, {\r
219	text: 'Reset',\r
220	handler: 'onResetFormClick'\r
221	}]\r
222	});\r