examples/simple-widgets/editor.js

   1 /*!
   2  * Ext JS Library 3.1.0
   3  * Copyright(c) 2006-2009 Ext JS, LLC
   4  * licensing@extjs.com
   5  * http://www.extjs.com/license
   6  */
   7 Ext.onReady(function(){\r
   8     var ct = new Ext.form.FormPanel({\r
   9         renderTo: 'container',\r
  10         width: 700,\r
  11         height: 400,\r
  12         title: 'User Details',\r
  13         defaultType: 'textfield',\r
  14         padding: 10,\r
  15         labelWidth: 90,\r
  16         items: [{\r
  17             fieldLabel: 'First Name'\r
  18         }, {\r
  19             fieldLabel: 'Middle Name'\r
  20         }, {\r
  21             fieldLabel: 'Last Name'\r
  22         }, {\r
  23             xtype: 'datefield',\r
  24             fieldLabel: 'D.O.B'\r
  25         }],\r
  26         listeners: {\r
  27             afterrender: function(form){\r
  28                 var cfg = {\r
  29                     shadow: false,\r
  30                     completeOnEnter: true,\r
  31                     cancelOnEsc: true,\r
  32                     updateEl: true,\r
  33                     ignoreNoChange: true\r
  34                 };\r
  35 \r
  36                 var labelEditor = new Ext.Editor(Ext.apply({\r
  37                     alignment: 'l-l',\r
  38                     listeners: {\r
  39                         beforecomplete: function(ed, value){\r
  40                             if(value.charAt(value.length - 1) != ':'){\r
  41                                 ed.setValue(ed.getValue() + ':');\r
  42                             }\r
  43                             return true;\r
  44                         },\r
  45                         complete: function(ed, value, oldValue){\r
  46                             Ext.example.msg('Label Changed', '"{0}" changed to "{1}"', oldValue, value);\r
  47                         }\r
  48                     },\r
  49                     field: {\r
  50                         allowBlank: false,\r
  51                         xtype: 'textfield',\r
  52                         width: 90,\r
  53                         selectOnFocus: true\r
  54                     }\r
  55                 }, cfg));\r
  56                 form.body.on('dblclick', function(e, t){\r
  57                     labelEditor.startEdit(t);\r
  58                 }, null, {\r
  59                     delegate: 'label.x-form-item-label'\r
  60                 });\r
  61 \r
  62                 var titleEditor = new Ext.Editor(Ext.apply({\r
  63                     cls: 'x-small-editor',\r
  64                     alignment: 'bl-bl?',\r
  65                     offsets: [0, 3],\r
  66                     listeners: {\r
  67                         complete: function(ed, value, oldValue){\r
  68                             Ext.example.msg('Title Changed', '"{0}" changed to "{1}"', oldValue, value);\r
  69                         }\r
  70                     },\r
  71                     field: {\r
  72                         width: 110,\r
  73                         triggerAction: 'all',\r
  74                         xtype: 'combo',\r
  75                         editable: false,\r
  76                         forceSelection: true,\r
  77                         store: ['User Details', 'Developer Details', 'Manager Details']\r
  78                     }\r
  79                 }, cfg));\r
  80 \r
  81                 form.header.child('.x-panel-header-text').on('dblclick', function(e, t){\r
  82                     titleEditor.startEdit(t);\r
  83                 });\r
  84             }\r
  85         }\r
  86     });\r
  87 });