<!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.plugin.BufferedRenderer 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'],
|
<span id='Ext-grid-Panel-cfg-viewType'> viewType: 'gridview',
|
</span>
|
<span id='Ext-grid-Panel-property-lockable'> lockable: false,
|
</span>
|
<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-beforereconfigure'> /**
|
</span> * @event beforereconfigure
|
* Fires before a reconfigure to enable modification of incoming Store and columns.
|
* @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
|
* @param {Ext.data.Store} oldStore The store that will be replaced
|
* @param {Ext.grid.column.Column[]} The column headers that will be replaced.
|
*/
|
|
<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
|
* @param {Ext.data.Store} oldStore The store that was replaced
|
* @param {Ext.grid.column.Column[]} The column headers that were replaced.
|
*/
|
|
<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>
|