/*
 * Ext JS Library 2.0 Copyright(c) 2006-2007, Ext JS, LLC. licensing@extjs.com
 * 
 * http://extjs.com/license
 */

Ext.onReady(function() {

			Ext.QuickTips.init();

			// turn on validation errors beside the field globally
			Ext.form.Field.prototype.msgTarget = 'side';

			var bd = Ext.getBody();

			/*
			 * ================ Simple form =======================
			 */
			bd.createChild({
						tag : 'h2',
						html : 'Form 1 - Very Simple'
					});

			var simple = new Ext.FormPanel({
						labelWidth : 75, // label settings here cascade
											// unless overridden
						url : 'save-form.php',
						frame : true,
						title : 'Simple Form',
						bodyStyle : 'padding:5px 5px 0',
						width : 350,
						defaults : {
							width : 230
						},
						defaultType : 'textfield',

						items : [{
									fieldLabel : 'First Name',
									name : 'first',
									allowBlank : false
								}, {
									fieldLabel : 'Last Name',
									name : 'last'
								}, {
									fieldLabel : 'Company',
									name : 'company'
								}, {
									fieldLabel : 'Email',
									name : 'email',
									vtype : 'email'
								}, new Ext.form.TimeField({
											fieldLabel : 'Time',
											name : 'time',
											minValue : '8:00am',
											maxValue : '6:00pm',
											allowBlank : false
										})],

						buttons : [{
									text : 'Save'
								}, {
									text : 'Cancel'
								}]
					});

			simple.render(document.body);

			/*
			 * ================ Form 2 =======================
			 */
			bd.createChild({
						tag : 'h2',
						html : 'Form 2 - Adding fieldsets'
					});

			var fsf = new Ext.FormPanel({
						labelWidth : 75, // label settings here cascade
											// unless overridden
						url : 'save-form.php',
						frame : true,
						title : 'Simple Form with FieldSets',
						bodyStyle : 'padding:5px 5px 0',
						width : 350,

						items : [{

									xtype : 'fieldset',
									checkboxToggle : true,
									title : 'User Information',
									autoHeight : true,
									defaults : {
										width : 210
									},
									defaultType : 'textfield',
									collapsed : true,

									items : [

									{
												fieldLabel : 'First Name',
												name : 'first',
												allowBlank : false
											}, {
												fieldLabel : 'Last Name',
												name : 'last'
											}, {
												fieldLabel : 'Company',
												name : 'company'
											}, {
												fieldLabel : 'Email',
												name : 'email',
												vtype : 'email'
											}

									]
								},

								{
									xtype : 'fieldset',
									title : 'Phone Number',
									collapsible : true,
									autoHeight : true,
									defaults : {
										width : 210
									},
									defaultType : 'textfield',
									collapsed : true,
									items : [{
												fieldLabel : 'Home',
												name : 'home',
												value : '(888) 555-1212'
											}, {
												fieldLabel : 'Business',
												name : 'business'
											}, {
												fieldLabel : 'Mobile',
												name : 'mobile'
											}, {
												fieldLabel : 'Fax',
												name : 'fax'
											}]
								}],

						buttons : [{
									text : 'Save'
								}, {
									text : 'Cancel'
								}]
					});

			fsf.render(document.body);

			/*
			 * ================ Form 3 =======================
			 */

			bd.createChild({
						tag : 'h2',
						html : 'Form 3 - A little more complex'
					});
			var top = new Ext.FormPanel({
						labelAlign : 'top',
						frame : true,
						title : 'Multi Column, Nested Layouts and Anchoring',
						bodyStyle : 'padding:5px 5px 0',
						width : 600,
						items : [

						{

									layout : 'column',

									items : [{
												columnWidth : .5,
												layout : 'form',
												border : false,

												items : [{
															xtype : 'textfield',
															fieldLabel : 'First Name',
															name : 'first',
															anchor : '95%'
														}, {
															xtype : 'textfield',
															fieldLabel : 'Last Name',
															name : 'last',
															anchor : '95%'
														}]
											}, {
												columnWidth : .5,
												layout : 'form',
												items : [{
															xtype : 'textfield',
															fieldLabel : 'Email',
															name : 'email',
															vtype : 'email',
															anchor : '95%'
														}, {
															xtype : 'textfield',
															fieldLabel : 'Company',
															name : 'company',
															anchor : '95%'
														}]
											}]
								},

								{

									xtype : 'htmleditor',
									id : 'bio',
									fieldLabel : 'Biography',
									height : 200,
									anchor : '98%'

								}],

						buttons : [{
									text : 'Save'
								}, {
									text : 'Cancel'
								}]
					});

			top.render(document.body);

			/*
			 * ================ Form 4 =======================
			 */
			bd.createChild({
						tag : 'h2',
						html : 'Form 4 - Forms can be a TabPanel...'
					});

			var tabs = new Ext.FormPanel({
						labelWidth : 75,
						border : false,
						width : 350,

						items : {
							xtype : 'tabpanel',
							activeTab : 0,
							defaults : {
								autoHeight : true,
								bodyStyle : 'padding:10px'
							},
							items : [{
										title : 'Personal Details',
										layout : 'form',
										defaults : {
											width : 230
										},
										defaultType : 'textfield',

										items : [{
													fieldLabel : 'First Name',
													name : 'first',
													allowBlank : false,
													value : 'Jack'
												}, {
													fieldLabel : 'Last Name',
													name : 'last',
													value : 'Slocum'
												}, {
													fieldLabel : 'Company',
													name : 'company',
													value : 'Ext JS'
												}, {
													fieldLabel : 'Email',
													name : 'email',
													vtype : 'email'
												}]
									}

									, {
										title : 'Phone Numbers',
										layout : 'form',
										defaults : {
											width : 230
										},
										defaultType : 'textfield',

										items : [{
													fieldLabel : 'Home',
													name : 'home',
													value : '(888) 555-1212'
												}
										/*
										 * ,{ fieldLabel: 'Business', name:
										 * 'business' },{ fieldLabel: 'Mobile',
										 * name: 'mobile' },{ fieldLabel: 'Fax',
										 * name: 'fax' }
										 */
										]
									}]
						},

						buttons : [{
									text : 'Save'
								}, {
									text : 'Cancel'
								}]
					});

			tabs.render(document.body);

			/*
			 * ================ Form 5 =======================
			 */
			bd.createChild({
						tag : 'h2',
						html : 'Form 5 - ... and forms can contain TabPanel(s)'
					});

			var tab2 = new Ext.FormPanel({
						labelAlign : 'top',
						title : 'Inner Tabs',
						bodyStyle : 'padding:5px',
						width : 600,
						items : [

						{
									layout : 'column',
									border : false,
									items : [{
												columnWidth : .5,
												layout : 'form',
												border : false,
												items : [{
															xtype : 'textfield',
															fieldLabel : 'First Name',
															name : 'first',
															anchor : '95%'
														}, {
															xtype : 'textfield',
															fieldLabel : 'Company',
															name : 'company',
															anchor : '95%'
														}]
											}, {
												columnWidth : .5,
												layout : 'form',
												border : false,
												items : [{
															xtype : 'textfield',
															fieldLabel : 'Last Name',
															name : 'last',
															anchor : '95%'
														}, {
															xtype : 'textfield',
															fieldLabel : 'Email',
															name : 'email',
															vtype : 'email',
															anchor : '95%'
														}]
											}, {
												columnWidth : 1,
												layout : 'form',
												border : false,
												items : [{
															xtype : 'textfield',
															fieldLabel : 'Last Names',
															name : 'lasts',
															anchor : '95%'
														}]
											}]
								}

								, {
									xtype : 'tabpanel',
									plain : true,
									activeTab : 0,
									// height:235,
									// autoHeight:true, //can not be this.
									defaults : {
										autoHeight : true,
										bodyStyle : 'padding:10px'
									},
									// defaults:{bodyStyle:'padding:10px'},
									items : [{
												title : 'Personal Details',
												layout : 'form',
												defaults : {
													width : 230
												},
												defaultType : 'textfield',

												items : [{
															fieldLabel : 'First Name',
															name : 'first',
															allowBlank : false,
															value : 'Jack'
														}, {
															fieldLabel : 'Last Name',
															name : 'last',
															value : 'Slocum'
														}, {
															fieldLabel : 'Company',
															name : 'company',
															value : 'Ext JS'
														}, {
															fieldLabel : 'Email',
															name : 'email',
															vtype : 'email'
														}]
											},

											{
												title : 'Phone Numbers',
												layout : 'form',
												defaults : {
													width : 230
												},
												defaultType : 'textfield',
												items : [{
															fieldLabel : 'Home',
															name : 'home',
															value : '(888) 555-1212'
														}/*
															 * ,{ fieldLabel:
															 * 'Business', name:
															 * 'business' },{
															 * fieldLabel:
															 * 'Mobile', name:
															 * 'mobile' },{
															 * fieldLabel:
															 * 'Fax', name:
															 * 'fax' }
															 */]
											}

											, {
												cls : 'x-plain',
												title : 'Biography',
												layout : 'fit',
												items : {
													xtype : 'htmleditor',
													id : 'bio2',
													fieldLabel : 'Biography'
												}
											}]
								}],

						buttons : [{
									text : 'Save'
								}, {
									text : 'Cancel'
								}]
					});

			tab2.render(document.body);
		});