examples/simple-widgets/editor.js

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