app.js
2.82 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
/**
* @example Cell Editing
*
* This grid demonstrates cell editing capabilities.
*/
Ext.require('Ext.data.Store');
Ext.require('Ext.grid.Panel');
Ext.require('Ext.form.field.Text');
Ext.require('Ext.form.field.Date');
Ext.require('Ext.grid.plugin.CellEditing');
Ext.require('Ext.selection.CellModel');
Ext.define('User', {
extend: 'Ext.data.Model',
fields: [
{ name: 'name', type: 'string' },
{ name: 'email', type: 'string' },
{ name: 'phone', type: 'string' },
{ name: 'birthDate', type: 'date' }
]
});
Ext.onReady(function() {
var userStore = Ext.create('Ext.data.Store', {
model: 'User',
data: {
items: [
{ name: 'Lisa', email: 'lisa@simpsons.com', phone: '555-111-1224', birthDate: new Date(1981, 9, 28) },
{ name: 'Bart', email: 'bart@simpsons.com', phone: '555-222-1234', birthDate: new Date(1979, 4, 1) },
{ name: 'Homer', email: 'home@simpsons.com', phone: '555-222-1244', birthDate: new Date(1956, 3, 15) },
{ name: 'Marge', email: 'marge@simpsons.com', phone: '555-222-1254', birthDate: new Date(1954, 10, 1) }
]
},
proxy: {
type: 'memory',
reader: {
type: 'json',
root: 'items'
}
}
});
Ext.create('Ext.grid.Panel', {
renderTo: Ext.getBody(),
store: userStore,
width: 400,
height: 200,
title: 'Application Users',
columns: [
{
text: 'Name',
flex: 1,
hideable: false,
dataIndex: 'name',
editor: {
//use a Ext.form.field.Text as the editor
xtype: 'textfield',
//prevent empty values from being inserted into this field
allowBlank: false
}
},
{
text: 'Email Address',
width: 130,
dataIndex: 'email',
//use a Ext.form.field.Text as the editor
editor: 'textfield'
},
{
text: 'Phone Number',
width: 85,
dataIndex: 'phone'
},
{
text: 'Birth Date',
width: 90,
dataIndex: 'birthDate',
//use a Ext.form.field.Date as the editor
editor: 'datefield',
// format the date using a renderer from the Ext.util.Format class
renderer: Ext.util.Format.dateRenderer('m/d/Y')
}
],
selType: 'cellmodel',
plugins: [
Ext.create('Ext.grid.plugin.CellEditing', {
clicksToEdit: 1
})
]
});
});