123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248 |
- <!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>
|