Upgrade to ExtJS 4.0.1 - Released 05/18/2011
[extjs.git] / examples / simple-widgets / editor.js
index 91e7641..573bda3 100644 (file)
-/*!
- * 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
+Ext.require([
+    'Ext.Editor',
+    'Ext.form.Panel',
+    'Ext.form.field.ComboBox',
+    'Ext.form.field.Date',
+    'Ext.data.Store',
+    'Ext.data.proxy.Ajax',
+    'Ext.data.reader.Json',
+    'Ext.data.writer.Json'
+]);
+
+Ext.onReady(function(){
+    Ext.create('Ext.form.Panel', {
+        renderTo: 'container',
+        width: 700,
+        height: 400,
+        title: 'User Details',
+        defaultType: 'textfield',
+        bodyStyle: 'padding: 10px;',
+        labelWidth: 90,
+        items: [{
+            fieldLabel: 'First Name',
+            name: 'firstname'
+        }, {
+            fieldLabel: 'Middle Name',
+            name: 'middlename'
+        }, {
+            fieldLabel: 'Last Name',
+            name: 'lastname'
+        }, {
+            xtype: 'datefield',
+            name: 'dob',
+            fieldLabel: 'D.O.B'
+        }],
+        listeners: {
+            afterrender: function(form){
+                var cfg = {
+                    shadow: false,
+                    completeOnEnter: true,
+                    cancelOnEsc: true,
+                    updateEl: true,
+                    ignoreNoChange: true
+                }, height = form.child('textfield').getHeight();
+
+                var labelEditor = Ext.create('Ext.Editor', Ext.apply({
+                    width: 100,
+                    height: height,
+                    offsets: [0, 2],
+                    alignment: 'l-l',
+                    listeners: {
+                        beforecomplete: function(ed, value){
+                            if (value.charAt(value.length - 1) != ':') {
+                                ed.setValue(ed.getValue() + ':');
+                            }
+                            return true;
+                        }
+                    },
+                    field: {
+                        name: 'labelfield',
+                        allowBlank: false,
+                        xtype: 'textfield',
+                        width: 90,
+                        selectOnFocus: true
+                    }
+                }, cfg));
+                form.body.on('dblclick', function(e, t){
+                    labelEditor.startEdit(t);
+                    // Manually focus, since clicking on the label will focus the text field
+                    labelEditor.field.focus(50, true);
+                }, null, {
+                    delegate: 'label.x-form-item-label'
+                });
+
+                var titleEditor = Ext.create('Ext.Editor', Ext.apply({
+                    alignment: 'bl-bl?',
+                    offsets: [0, 10],
+                    field: {
+                        width: 130,
+                        xtype: 'combo',
+                        editable: false,
+                        forceSelection: true,
+                        queryMode: 'local',
+                        displayField: 'text',
+                        valueField: 'text',
+                        store: {
+                            fields: ['text'],
+                            data: [{
+                                text: 'User Details'
+                            },{
+                                text: 'Developer Detail'
+                            },{
+                                text: 'Manager Details'
+                            }]
+                        }
+                    }
+                }, cfg));
+
+                form.header.titleCmp.textEl.on('dblclick', function(e, t){
+                    titleEditor.startEdit(t);
+                });
+            }
+        }
+    });
+});