/
Grid.html
86 lines (84 loc) · 3.19 KB
/
Grid.html
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
<!DOCTYPE html>
<html>
<head>
<title>Grid 例子</title>
<meta charset="UTF-8">
<link href="http://cdn.sencha.com/ext/gpl/4.2.0/resources/css/ext-all.css" rel="stylesheet"/>
<script src="http://cdn.sencha.com/ext/gpl/4.2.0/ext-all.js"></script>
<script src="container/ContainerOverride.js"></script>
<script src="ux/grid/gridOverride.js"></script>
<script type="application/javascript">
Ext.onReady(function () {
Ext.create('Ext.data.Store', {
storeId: 'simpsonsStore',
fields: ['name', 'email', 'phone'],
data: {'items': [
{ 'name': 'Lisa', "email": "lisa@simpsons.com", "phone": "555-111-1224" },
{ 'name': 'Bart', "email": "bart@simpsons.com", "phone": "555-222-1234" },
{ 'name': 'Homer', "email": "home@simpsons.com", "phone": "555-222-1244" },
{ 'name': 'Marge', "email": "marge@simpsons.com", "phone": "555-222-1254" }
]},
proxy: {
type: 'memory',
reader: {
type: 'json',
root: 'items'
}
}
});
Ext.create('Ext.grid.Panel', {
title: 'Simpsons',
store: Ext.data.StoreManager.lookup('simpsonsStore'),
buttonDisable: {
noSelection: ['Edit', 'Delete', 'Print'],
moreSelections: ['Edit'],
expressions: {
Edit: '$phone == "555-222-1254"'
}
},
selModel: Ext.create('Ext.selection.CheckboxModel', { allowDeselect: true }),
tbar: {
xtype: 'toolbar',
preventItemsBubble: false,
items: [
{
xtype: 'button',
itemId: 'Edit',
text: 'Edit'},
{
xtype: 'button',
name: 'Delete',
text: 'Delete'}
]},
dockedItems: [
{
xtype: 'toolbar',
preventItemsBubble: false,
dock: 'right',
items: [
{
xtype: 'button',
name: 'New',
text: 'New'},
{
xtype: 'button',
itemId: 'Edit',
text: 'Edit'}
]
}
],
columns: [
{ text: 'Name', dataIndex: 'name' },
{ text: 'Email', dataIndex: 'email', flex: 1 },
{ text: 'Phone', dataIndex: 'phone' }
],
height: 200,
width: 400,
renderTo: Ext.getBody()
});
});
</script>
</head>
<body>
</body>
</html>