<!DOCTYPE html> <html> <head> <title>ExtJs</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <link rel="stylesheet" type="text/css" href="ExtJs/packages/ext-theme-crisp/build/resources/ext-theme-crisp-all.css"> <script type="text/javascript" src="ExtJs/ext-all.js"></script> <script type="text/javascript" src="ExtJs/bootstrap.js"></script> <script type="text/javascript" src="ExtJs/packages/ext-theme-crisp/build/ext-theme-crisp.js"></script> <script type="text/javascript"> Ext.onReady(function() { Ext.QuickTips.init(); Ext.create('Ext.form.Panel', { title: 'Ext.form.FieldSet.Sample', labelWidth: 40, width: 220, frame: true, renderTo: 'form', bodyPadding: 5, items: [{ title: 'ProductInfo', xtype: 'fieldset', collapsible: true, bodyPadding: 5, defaults: { labelSeparator: ': ', labelWidth: 50, width: 160 }, defaultType: 'textfield', items: [{ fieldLabel: 'Site' },{ fieldLabel: 'Price' }] },{ title: 'ProductDesc', xtype: 'fieldset', bodyPadding: 5, checkboxToggle: true, checkboxName: 'description', labelSeparator: ': ', items: [{ fieldLabel: 'Info', labelSeparator: ':', labelWidth: 50, width: 160, xtype: 'textarea' }] }] }); Ext.create('Ext.form.FormPanel', { title: 'Ext.form.FieldContainer.Sample', width: 600, frame: true, renderTo: 'form1', bodyPadding: 5, fieldDefaults: { labelSeparator: ': ', labelWidth: 160, width: 360, msgTarget: 'side' }, defaultType: 'textfield', items: [{ fieldLabel: 'ProductName' },{ xtype: 'fieldcontainer', fieldLabel: 'ProductDate', layout: { type: 'hbox', align: 'middle' }, combineErrors: true, fieldDefaults: { hideLabel: true, allowBlank: false }, defaultType: 'textfield', items: [{ fieldLabel: 'Year', flex: 1, inputId: 'yearId' },{ xtype: 'label', forId: 'yearId', text: 'Year' },{ fieldLabel: 'Month', flex: 1, inputId: 'monthId' },{ xtype: 'label', forId: 'monthId', text: 'Month' },{ fieldLabel: 'Day', flex: 1, inputId: 'dayId' },{ xtype: 'label', forId: 'dayId', text: 'Day' }] },{ fieldLabel: 'SiteSource' }] }); }); </script> </head> <body> <div id='form'></div> <div id='form1'></div> </body> </html>
