Upgrade to ExtJS 3.3.1 - Released 11/30/2010
[extjs.git] / examples / simple-widgets / editor.js
1 /*!
2  * Ext JS Library 3.3.1
3  * Copyright(c) 2006-2010 Sencha Inc.
4  * licensing@sencha.com
5  * http://www.sencha.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 });