Panel3.html
10 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
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>The source code</title>
<link href="../resources/prettify/prettify.css" type="text/css" rel="stylesheet" />
<script type="text/javascript" src="../resources/prettify/prettify.js"></script>
<style type="text/css">
.highlight { display: block; background-color: #ddd; }
</style>
<script type="text/javascript">
function highlight() {
document.getElementById(location.hash.replace(/#/, "")).className = "highlight";
}
</script>
</head>
<body onload="prettyPrint(); highlight();">
<pre class="prettyprint lang-js"><span id='Ext-grid-Panel'>/**
</span> * @author Aaron Conran
* @docauthor Ed Spencer
*
* Grids are an excellent way of showing large amounts of tabular data on the client side. Essentially a supercharged
* `<table>`, GridPanel makes it easy to fetch, sort and filter large amounts of data.
*
* Grids are composed of two main pieces - a {@link Ext.data.Store Store} full of data and a set of columns to render.
*
* ## Basic GridPanel
*
* @example
* 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'),
* columns: [
* { text: 'Name', dataIndex: 'name' },
* { text: 'Email', dataIndex: 'email', flex: 1 },
* { text: 'Phone', dataIndex: 'phone' }
* ],
* height: 200,
* width: 400,
* renderTo: Ext.getBody()
* });
*
* The code above produces a simple grid with three columns. We specified a Store which will load JSON data inline.
* In most apps we would be placing the grid inside another container and wouldn't need to use the
* {@link #height}, {@link #width} and {@link #renderTo} configurations but they are included here to make it easy to get
* up and running.
*
* The grid we created above will contain a header bar with a title ('Simpsons'), a row of column headers directly underneath
* and finally the grid rows under the headers.
*
* ## Configuring columns
*
* By default, each column is sortable and will toggle between ASC and DESC sorting when you click on its header. Each
* column header is also reorderable by default, and each gains a drop-down menu with options to hide and show columns.
* It's easy to configure each column - here we use the same example as above and just modify the columns config:
*
* columns: [
* {
* text: 'Name',
* dataIndex: 'name',
* sortable: false,
* hideable: false,
* flex: 1
* },
* {
* text: 'Email',
* dataIndex: 'email',
* hidden: true
* },
* {
* text: 'Phone',
* dataIndex: 'phone',
* width: 100
* }
* ]
*
* We turned off sorting and hiding on the 'Name' column so clicking its header now has no effect. We also made the Email
* column hidden by default (it can be shown again by using the menu on any other column). We also set the Phone column to
* a fixed with of 100px and flexed the Name column, which means it takes up all remaining width after the other columns
* have been accounted for. See the {@link Ext.grid.column.Column column docs} for more details.
*
* ## Renderers
*
* As well as customizing columns, it's easy to alter the rendering of individual cells using renderers. A renderer is
* tied to a particular column and is passed the value that would be rendered into each cell in that column. For example,
* we could define a renderer function for the email column to turn each email address into a mailto link:
*
* columns: [
* {
* text: 'Email',
* dataIndex: 'email',
* renderer: function(value) {
* return Ext.String.format('<a href="mailto:{0}">{1}</a>', value, value);
* }
* }
* ]
*
* See the {@link Ext.grid.column.Column column docs} for more information on renderers.
*
* ## Selection Models
*
* Sometimes all you want is to render data onto the screen for viewing, but usually it's necessary to interact with or
* update that data. Grids use a concept called a Selection Model, which is simply a mechanism for selecting some part of
* the data in the grid. The two main types of Selection Model are RowSelectionModel, where entire rows are selected, and
* CellSelectionModel, where individual cells are selected.
*
* Grids use a Row Selection Model by default, but this is easy to customise like so:
*
* Ext.create('Ext.grid.Panel', {
* selType: 'cellmodel',
* store: ...
* });
*
* Specifying the `cellmodel` changes a couple of things. Firstly, clicking on a cell now
* selects just that cell (using a {@link Ext.selection.RowModel rowmodel} will select the entire row), and secondly the
* keyboard navigation will walk from cell to cell instead of row to row. Cell-based selection models are usually used in
* conjunction with editing.
*
* ## Sorting & Filtering
*
* Every grid is attached to a {@link Ext.data.Store Store}, which provides multi-sort and filtering capabilities. It's
* easy to set up a grid to be sorted from the start:
*
* var myGrid = Ext.create('Ext.grid.Panel', {
* store: {
* fields: ['name', 'email', 'phone'],
* sorters: ['name', 'phone']
* },
* columns: [
* { text: 'Name', dataIndex: 'name' },
* { text: 'Email', dataIndex: 'email' }
* ]
* });
*
* Sorting at run time is easily accomplished by simply clicking each column header. If you need to perform sorting on
* more than one field at run time it's easy to do so by adding new sorters to the store:
*
* myGrid.store.sort([
* { property: 'name', direction: 'ASC' },
* { property: 'email', direction: 'DESC' }
* ]);
*
* See {@link Ext.data.Store} for examples of filtering.
*
* ## State saving
*
* When configured {@link #stateful}, grids save their column state (order and width) encapsulated within the default
* Panel state of changed width and height and collapsed/expanded state.
*
* Each {@link #columns column} of the grid may be configured with a {@link Ext.grid.column.Column#stateId stateId} which
* identifies that column locally within the grid.
*
* ## Plugins and Features
*
* Grid supports addition of extra functionality through features and plugins:
*
* - {@link Ext.grid.plugin.CellEditing CellEditing} - editing grid contents one cell at a time.
*
* - {@link Ext.grid.plugin.RowEditing RowEditing} - editing grid contents an entire row at a time.
*
* - {@link Ext.grid.plugin.DragDrop DragDrop} - drag-drop reordering of grid rows.
*
* - {@link Ext.toolbar.Paging Paging toolbar} - paging through large sets of data.
*
* - {@link Ext.grid.PagingScroller Infinite scrolling} - another way to handle large sets of data.
*
* - {@link Ext.grid.RowNumberer RowNumberer} - automatically numbered rows.
*
* - {@link Ext.grid.feature.Grouping Grouping} - grouping together rows having the same value in a particular field.
*
* - {@link Ext.grid.feature.Summary Summary} - a summary row at the bottom of a grid.
*
* - {@link Ext.grid.feature.GroupingSummary GroupingSummary} - a summary row at the bottom of each group.
*/
Ext.define('Ext.grid.Panel', {
extend: 'Ext.panel.Table',
requires: ['Ext.grid.View'],
alias: ['widget.gridpanel', 'widget.grid'],
alternateClassName: ['Ext.list.ListView', 'Ext.ListView', 'Ext.grid.GridPanel'],
viewType: 'gridview',
lockable: false,
// Required for the Lockable Mixin. These are the configurations which will be copied to the
// normal and locked sub tablepanels
bothCfgCopy: [
'invalidateScrollerOnRefresh',
'hideHeaders',
'enableColumnHide',
'enableColumnMove',
'enableColumnResize',
'sortableColumns'
],
normalCfgCopy: [
'verticalScroller',
'verticalScrollDock',
'verticalScrollerType',
'scroll'
],
lockedCfgCopy: [],
<span id='Ext-grid-Panel-cfg-rowLines'> /**
</span> * @cfg {Boolean} rowLines False to remove row line styling
*/
rowLines: true
// Columns config is required in Grid
<span id='Ext-grid-Panel-cfg-columns'> /**
</span> * @cfg {Ext.grid.column.Column[]/Object} columns (required)
* @inheritdoc
*/
<span id='Ext-grid-Panel-event-reconfigure'> /**
</span> * @event reconfigure
* Fires after a reconfigure.
* @param {Ext.grid.Panel} this
* @param {Ext.data.Store} store The store that was passed to the {@link #method-reconfigure} method
* @param {Object[]} columns The column configs that were passed to the {@link #method-reconfigure} method
*/
<span id='Ext-grid-Panel-method-reconfigure'> /**
</span> * @method reconfigure
* Reconfigures the grid with a new store/columns. Either the store or the columns can be omitted if you don't wish
* to change them.
* @param {Ext.data.Store} store (Optional) The new store.
* @param {Object[]} columns (Optional) An array of column configs
*/
});</pre>
</body>
</html>