examples/simple-widgets/editor.js

   1 Ext.require([
   2     'Ext.Editor',
   3     'Ext.form.Panel',
   4     'Ext.form.field.ComboBox',
   5     'Ext.form.field.Date',
   6     'Ext.data.Store',
   7     'Ext.data.proxy.Ajax',
   8     'Ext.data.reader.Json',
   9     'Ext.data.writer.Json'
  10 ]);
  11
  12 Ext.onReady(function(){
  13     Ext.create('Ext.form.Panel', {
  14         renderTo: 'container',
  15         width: 700,
  16         height: 400,
  17         title: 'User Details',
  18         defaultType: 'textfield',
  19         bodyStyle: 'padding: 10px;',
  20         labelWidth: 90,
  21         items: [{
  22             fieldLabel: 'First Name',
  23             name: 'firstname'
  24         }, {
  25             fieldLabel: 'Middle Name',
  26             name: 'middlename'
  27         }, {
  28             fieldLabel: 'Last Name',
  29             name: 'lastname'
  30         }, {
  31             xtype: 'datefield',
  32             name: 'dob',
  33             fieldLabel: 'D.O.B'
  34         }],
  35         listeners: {
  36             afterrender: function(form){
  37                 var cfg = {
  38                     shadow: false,
  39                     completeOnEnter: true,
  40                     cancelOnEsc: true,
  41                     updateEl: true,
  42                     ignoreNoChange: true
  43                 }, height = form.child('textfield').getHeight();
  44
  45                 var labelEditor = Ext.create('Ext.Editor', Ext.apply({
  46                     width: 100,
  47                     height: height,
  48                     offsets: [0, 2],
  49                     alignment: 'l-l',
  50                     listeners: {
  51                         beforecomplete: function(ed, value){
  52                             if (value.charAt(value.length - 1) != ':') {
  53                                 ed.setValue(ed.getValue() + ':');
  54                             }
  55                             return true;
  56                         }
  57                     },
  58                     field: {
  59                         name: 'labelfield',
  60                         allowBlank: false,
  61                         xtype: 'textfield',
  62                         width: 90,
  63                         selectOnFocus: true
  64                     }
  65                 }, cfg));
  66                 form.body.on('dblclick', function(e, t){
  67                     labelEditor.startEdit(t);
  68                     // Manually focus, since clicking on the label will focus the text field
  69                     labelEditor.field.focus(50, true);
  70                 }, null, {
  71                     delegate: 'label.x-form-item-label'
  72                 });
  73
  74                 var titleEditor = Ext.create('Ext.Editor', Ext.apply({
  75                     alignment: 'bl-bl?',
  76                     offsets: [0, 10],
  77                     field: {
  78                         width: 130,
  79                         xtype: 'combo',
  80                         editable: false,
  81                         forceSelection: true,
  82                         queryMode: 'local',
  83                         displayField: 'text',
  84                         valueField: 'text',
  85                         store: {
  86                             fields: ['text'],
  87                             data: [{
  88                                 text: 'User Details'
  89                             },{
  90                                 text: 'Developer Detail'
  91                             },{
  92                                 text: 'Manager Details'
  93                             }]
  94                         }
  95                     }
  96                 }, cfg));
  97
  98                 form.header.titleCmp.textEl.on('dblclick', function(e, t){
  99                     titleEditor.startEdit(t);
 100                 });
 101             }
 102         }
 103     });
 104 });