--- /dev/null
+/*!
+ * Ext JS Library 3.1.0
+ * Copyright(c) 2006-2009 Ext JS, LLC
+ * licensing@extjs.com
+ * http://www.extjs.com/license
+ */
+Ext.onReady(function(){\r
+ var ct = new Ext.form.FormPanel({\r
+ renderTo: 'container',\r
+ width: 700,\r
+ height: 400,\r
+ title: 'User Details',\r
+ defaultType: 'textfield',\r
+ padding: 10,\r
+ labelWidth: 90,\r
+ items: [{\r
+ fieldLabel: 'First Name'\r
+ }, {\r
+ fieldLabel: 'Middle Name'\r
+ }, {\r
+ fieldLabel: 'Last Name'\r
+ }, {\r
+ xtype: 'datefield',\r
+ fieldLabel: 'D.O.B'\r
+ }],\r
+ listeners: {\r
+ afterrender: function(form){\r
+ var cfg = {\r
+ shadow: false,\r
+ completeOnEnter: true,\r
+ cancelOnEsc: true,\r
+ updateEl: true,\r
+ ignoreNoChange: true\r
+ };\r
+\r
+ var labelEditor = new Ext.Editor(Ext.apply({\r
+ alignment: 'l-l',\r
+ listeners: {\r
+ beforecomplete: function(ed, value){\r
+ if(value.charAt(value.length - 1) != ':'){\r
+ ed.setValue(ed.getValue() + ':');\r
+ }\r
+ return true;\r
+ },\r
+ complete: function(ed, value, oldValue){\r
+ Ext.example.msg('Label Changed', '"{0}" changed to "{1}"', oldValue, value);\r
+ }\r
+ },\r
+ field: {\r
+ allowBlank: false,\r
+ xtype: 'textfield',\r
+ width: 90,\r
+ selectOnFocus: true\r
+ }\r
+ }, cfg));\r
+ form.body.on('dblclick', function(e, t){\r
+ labelEditor.startEdit(t);\r
+ }, null, {\r
+ delegate: 'label.x-form-item-label'\r
+ });\r
+\r
+ var titleEditor = new Ext.Editor(Ext.apply({\r
+ cls: 'x-small-editor',\r
+ alignment: 'bl-bl?',\r
+ offsets: [0, 3],\r
+ listeners: {\r
+ complete: function(ed, value, oldValue){\r
+ Ext.example.msg('Title Changed', '"{0}" changed to "{1}"', oldValue, value);\r
+ }\r
+ },\r
+ field: {\r
+ width: 110,\r
+ triggerAction: 'all',\r
+ xtype: 'combo',\r
+ editable: false,\r
+ forceSelection: true,\r
+ store: ['User Details', 'Developer Details', 'Manager Details']\r
+ }\r
+ }, cfg));\r
+\r
+ form.header.child('.x-panel-header-text').on('dblclick', function(e, t){\r
+ titleEditor.startEdit(t);\r
+ });\r
+ }\r
+ }\r
+ });\r
+});
\ No newline at end of file