extjs/examples/kitchensink/classic/samples/view/grid/Spreadsheet.js

   1 /**
   2  * Demonstrates the Spreadsheet selection model.
   3  *
   4  * Supported features:
   5  *
   6  *  - Single / Range / Multiple individual row selection.
   7  *  - Single / Range cell selection.
   8  *  - Column selection by click selecting column headers.
   9  *  - Select / deselect all by clicking in the top-left, header.
  10  *  - Adds row number column to enable row selection.
  11  *  - Selection extensibility using a drag gesture. Configured in this case to be up or down.
  12  *
  13  * Copy/paste to system clipboard using Ctrl+C, Ctrl+X and Ctrl+V.
  14  */
  15 Ext.define('KitchenSink.view.grid.Spreadsheet', {
  16     extend: 'Ext.grid.Panel',
  17     requires: [
  18         'Ext.grid.selection.SpreadsheetModel',
  19         'Ext.grid.plugin.Clipboard',
  20         'KitchenSink.store.grid.MonthlySales'
  21     ],
  22     //<example>
  23     exampleTitle: 'Spreadsheet with locking',
  24     otherContent: [{
  25         type: 'Controller',
  26         path: 'classic/samples/view/grid/SpreadsheetController.js'
  27     },{
  28         type: 'Store',
  29         path: 'classic/samples/store/grid/MonthlySales.js'
  30     },{
  31         type: 'Model',
  32         path: 'classic/samples/model/grid/MonthlySales.js'
  33     }],
  34     //</example>
  35
  36     // There is no asymmetric data, we do not need to go to the expense of synching row heights
  37     syncRowHeight: false,
  38
  39     xtype: 'spreadsheet',
  40     controller: 'spreadsheet',
  41
  42     store: {
  43         type: 'monthlysales'
  44     },
  45     columnLines: true,
  46     height: 400,
  47     width: 750,
  48     title: 'Spreadsheet',
  49     frame: true,
  50
  51     selModel: {
  52         type: 'spreadsheet',
  53         // Disables sorting by header click, though it will be still available via menu
  54         columnSelect: true,
  55         pruneRemoved: false,
  56         extensible: 'y'
  57     },
  58
  59     // Enable CTRL+C/X/V hot-keys to copy/cut/paste to the system clipboard.
  60     plugins: [
  61         'clipboard',
  62         'selectionreplicator'
  63     ],
  64
  65     listeners: {
  66         selectionchange: 'onSelectionChange'
  67     },
  68
  69     tools: [{
  70         type: 'refresh',
  71         handler: 'onRefresh',
  72         tooltip: 'Reload Data'
  73     }],
  74
  75     tbar: [{
  76         xtype: 'component',
  77         html: 'Selectable: '
  78     }, {
  79         text: 'Rows',
  80         enableToggle: true,
  81         toggleHandler: 'toggleRowSelect',
  82         pressed: true
  83     }, {
  84         text: 'Cells',
  85         enableToggle: true,
  86         toggleHandler: 'toggleCellSelect',
  87         pressed: true
  88     }, {
  89         text: 'Columns',
  90         enableToggle: true,
  91         toggleHandler: 'toggleColumnSelect',
  92         pressed: true
  93     }, '->', {
  94         xtype: 'component',
  95         reference: 'status'
  96     }],
  97
  98     columns:[
  99         { text: 'Year', dataIndex: 'year', width: 70, minWidth: 70, locked: true },
 100         { text: 'Jan',  dataIndex: 'jan', width: 100 },
 101         { text: 'Feb',  dataIndex: 'feb', width: 100 },
 102         { text: 'Mar',  dataIndex: 'mar', width: 100 },
 103         { text: 'Apr',  dataIndex: 'apr', width: 100 },
 104         { text: 'May',  dataIndex: 'may', width: 100 },
 105         { text: 'Jun',  dataIndex: 'jun', width: 100 },
 106         { text: 'Jul',  dataIndex: 'jul', width: 100 },
 107         { text: 'Aug',  dataIndex: 'aug', width: 100 },
 108         { text: 'Sep',  dataIndex: 'sep', width: 100 },
 109         { text: 'Oct',  dataIndex: 'oct', width: 100 },
 110         { text: 'Nov',  dataIndex: 'nov', width: 100 },
 111         { text: 'Dec',  dataIndex: 'dec', width: 100 }
 112     ],
 113
 114     viewConfig: {
 115         columnLines: true,
 116         trackOver: false
 117     }
 118 });