- items: [{
- xtype: 'label',
- text: 'Plain Label'
- },{
- fieldLabel: 'TextField',
- xtype: 'textfield',
- emptyText: 'Enter a value',
- itemCls: 'x-form-required'
- },{
- fieldLabel: 'ComboBox',
- xtype: 'combo',
- store: ['Foo', 'Bar'],
- itemCls: 'x-form-required',
- resizable: true
- },{
- fieldLabel: 'DateField',
- itemCls: 'x-form-required',
- xtype: 'datefield'
- },{
- fieldLabel: 'TimeField',
- itemCls: 'x-form-required',
- xtype: 'timefield'
- },{
- fieldLabel: 'NumberField',
- emptyText: '(This field is optional)',
- allowBlank: true,
- xtype: 'numberfield'
- },{
- fieldLabel: 'TextArea',
- //msgTarget: 'under',
- itemCls: 'x-form-required',
- xtype: 'textarea',
- cls: 'x-form-valid',
- value: 'This field is hard-coded to have the "valid" style (it will require some code changes to add/remove this style dynamically)'
- },{
- fieldLabel: 'Checkboxes',
- xtype: 'checkboxgroup',
- columns: [100,100],
- items: [{boxLabel: 'Foo', checked: true},{boxLabel: 'Bar'}]
- },{
- fieldLabel: 'Radios',
- xtype: 'radiogroup',
- columns: [100,100],
- items: [{boxLabel: 'Foo', checked: true, name: 'radios'},{boxLabel: 'Bar', name: 'radios'}]
- },{
- hideLabel: true,
- xtype: 'htmleditor',
- value: 'Mouse over toolbar for tooltips.<br /><br />The HTMLEditor IFrame requires a refresh between a stylesheet switch to get accurate colors.',
- height: 110,
- handler: function(){
- Ext.get('styleswitcher').on('click', function(e){
- Ext.getCmp('form-widgets').getForm().reset();
- });
- }
- },{
- title: 'Plain Fieldset',
- xtype: 'fieldset',
- height: 50
- },{
- title: 'Collapsible Fieldset',
- xtype: 'fieldset',
- collapsible: true,
- height: 50
- },{
- title: 'Checkbox Fieldset',
- xtype: 'fieldset',
- checkboxToggle: true,
- height: 50
- }],
- buttons: [{
- text:'Toggle Enabled',
- cls: 'x-icon-btn',
- iconCls: 'x-icon-btn-toggle',
- handler: function(){
- Ext.getCmp('form-widgets').getForm().items.each(function(ctl){
- ctl.setDisabled(!ctl.disabled);
- });
- }
- },{
- text: 'Reset Form',
- cls: 'x-icon-btn',
- iconCls: 'x-icon-btn-reset',
- handler: function(){
- Ext.getCmp('form-widgets').getForm().reset();
+
+ items: [
+ {
+ xtype: 'label',
+ text : 'Plain Label'
+ },
+ {
+ fieldLabel: 'TextField',
+ xtype : 'textfield',
+ name : 'someField',
+ emptyText : 'Enter a value'
+ },
+ {
+ fieldLabel: 'ComboBox',
+ xtype: 'combo',
+ store: ['Foo', 'Bar']
+ },
+ {
+ fieldLabel: 'DateField',
+ xtype : 'datefield',
+ name : 'date'
+ },
+ {
+ fieldLabel: 'TimeField',
+ name: 'time',
+ xtype: 'timefield'
+ },
+ {
+ fieldLabel: 'NumberField',
+ xtype : 'numberfield',
+ name : 'number',
+ emptyText : '(This field is optional)',
+ allowBlank: true
+ },
+ {
+ fieldLabel: 'TextArea',
+ xtype : 'textareafield',
+ name : 'message',
+ cls : 'x-form-valid',
+ value : 'This field is hard-coded to have the "valid" style (it will require some code changes to add/remove this style dynamically)'
+ },
+ {
+ fieldLabel: 'Checkboxes',
+ xtype: 'checkboxgroup',
+ columns: [100,100],
+ items: [{boxLabel: 'Foo', checked: true},{boxLabel: 'Bar'}]
+ },
+ {
+ fieldLabel: 'Radios',
+ xtype: 'radiogroup',
+ columns: [100,100],
+ items: [{boxLabel: 'Foo', checked: true, name: 'radios'},{boxLabel: 'Bar', name: 'radios'}]
+ },
+ {
+ hideLabel : true,
+ id : 'htmleditor',
+ xtype : 'htmleditor',
+ name : 'html',
+ enableColors: false,
+ value : 'Mouse over toolbar for tooltips.<br /><br />The HTMLEditor IFrame requires a refresh between a stylesheet switch to get accurate colors.',
+ height : 110
+ },
+ {
+ xtype : 'fieldset',
+ title : 'Plain Fieldset'
+ },
+ {
+ xtype : 'fieldset',
+ title : 'Collapsible Fieldset',
+ collapsible: true
+ },
+ {
+ xtype : 'fieldset',
+ title : 'Checkbox Fieldset',
+ checkboxToggle: true