docs/source/CellModel.html

   1 <!DOCTYPE html>
   2 <html>
   3 <head>
   4   <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
   5   <title>The source code</title>
   6   <link href="../resources/prettify/prettify.css" type="text/css" rel="stylesheet" />
   7   <script type="text/javascript" src="../resources/prettify/prettify.js"></script>
   8   <style type="text/css">
   9     .highlight { display: block; background-color: #ddd; }
  10   </style>
  11   <script type="text/javascript">
  12     function highlight() {
  13       document.getElementById(location.hash.replace(/#/, "")).className = "highlight";
  14     }
  15   </script>
  16 </head>
  17 <body onload="prettyPrint(); highlight();">
  18   <pre class="prettyprint lang-js"><span id='Ext-selection-CellModel'>/**
  19 </span> * @class Ext.selection.CellModel
  20  * @extends Ext.selection.Model
  21  */
  22 Ext.define('Ext.selection.CellModel', {
  23     extend: 'Ext.selection.Model',
  24     alias: 'selection.cellmodel',
  25     requires: ['Ext.util.KeyNav'],
  26
  27 <span id='Ext-selection-CellModel-cfg-enableKeyNav'>    /**
  28 </span>     * @cfg {Boolean} enableKeyNav
  29      * Turns on/off keyboard navigation within the grid.
  30      */
  31     enableKeyNav: true,
  32
  33 <span id='Ext-selection-CellModel-cfg-preventWrap'>    /**
  34 </span>     * @cfg {Boolean} preventWrap
  35      * Set this configuration to true to prevent wrapping around of selection as
  36      * a user navigates to the first or last column.
  37      */
  38     preventWrap: false,
  39
  40     constructor: function(){
  41         this.addEvents(
  42 <span id='Ext-selection-CellModel-event-deselect'>            /**
  43 </span>             * @event deselect
  44              * Fired after a cell is deselected
  45              * @param {Ext.selection.CellModel} this
  46              * @param {Ext.data.Model} record The record of the deselected cell
  47              * @param {Number} row The row index deselected
  48              * @param {Number} column The column index deselected
  49              */
  50             'deselect',
  51
  52 <span id='Ext-selection-CellModel-event-select'>            /**
  53 </span>             * @event select
  54              * Fired after a cell is selected
  55              * @param {Ext.selection.CellModel} this
  56              * @param {Ext.data.Model} record The record of the selected cell
  57              * @param {Number} row The row index selected
  58              * @param {Number} column The column index selected
  59              */
  60             'select'
  61         );
  62         this.callParent(arguments);
  63     },
  64
  65     bindComponent: function(view) {
  66         var me = this;
  67         me.primaryView = view;
  68         me.views = me.views || [];
  69         me.views.push(view);
  70         me.bind(view.getStore(), true);
  71
  72         view.on({
  73             cellmousedown: me.onMouseDown,
  74             refresh: me.onViewRefresh,
  75             scope: me
  76         });
  77
  78         if (me.enableKeyNav) {
  79             me.initKeyNav(view);
  80         }
  81     },
  82
  83     initKeyNav: function(view) {
  84         var me = this;
  85
  86         if (!view.rendered) {
  87             view.on('render', Ext.Function.bind(me.initKeyNav, me, [view], 0), me, {single: true});
  88             return;
  89         }
  90
  91         view.el.set({
  92             tabIndex: -1
  93         });
  94
  95         // view.el has tabIndex -1 to allow for
  96         // keyboard events to be passed to it.
  97         me.keyNav = Ext.create('Ext.util.KeyNav', view.el, {
  98             up: me.onKeyUp,
  99             down: me.onKeyDown,
 100             right: me.onKeyRight,
 101             left: me.onKeyLeft,
 102             tab: me.onKeyTab,
 103             scope: me
 104         });
 105     },
 106
 107     getHeaderCt: function() {
 108         return this.primaryView.headerCt;
 109     },
 110
 111     onKeyUp: function(e, t) {
 112         this.move('up', e);
 113     },
 114
 115     onKeyDown: function(e, t) {
 116         this.move('down', e);
 117     },
 118
 119     onKeyLeft: function(e, t) {
 120         this.move('left', e);
 121     },
 122
 123     onKeyRight: function(e, t) {
 124         this.move('right', e);
 125     },
 126
 127     move: function(dir, e) {
 128         var me = this,
 129             pos = me.primaryView.walkCells(me.getCurrentPosition(), dir, e, me.preventWrap);
 130         if (pos) {
 131             me.setCurrentPosition(pos);
 132         }
 133         return pos;
 134     },
 135
 136 <span id='Ext-selection-CellModel-method-getCurrentPosition'>    /**
 137 </span>     * Returns the current position in the format {row: row, column: column}
 138      */
 139     getCurrentPosition: function() {
 140         return this.position;
 141     },
 142
 143 <span id='Ext-selection-CellModel-method-setCurrentPosition'>    /**
 144 </span>     * Sets the current position
 145      * @param {Object} position The position to set.
 146      */
 147     setCurrentPosition: function(pos) {
 148         var me = this;
 149
 150         if (me.position) {
 151             me.onCellDeselect(me.position);
 152         }
 153         if (pos) {
 154             me.onCellSelect(pos);
 155         }
 156         me.position = pos;
 157     },
 158
 159 <span id='Ext-selection-CellModel-method-onMouseDown'>    /**
 160 </span>     * Set the current position based on where the user clicks.
 161      * @private
 162      */
 163     onMouseDown: function(view, cell, cellIndex, record, row, rowIndex, e) {
 164         this.setCurrentPosition({
 165             row: rowIndex,
 166             column: cellIndex
 167         });
 168     },
 169
 170     // notify the view that the cell has been selected to update the ui
 171     // appropriately and bring the cell into focus
 172     onCellSelect: function(position) {
 173         var me = this,
 174             store = me.view.getStore(),
 175             record = store.getAt(position.row);
 176
 177         me.doSelect(record);
 178         me.primaryView.onCellSelect(position);
 179         // TODO: Remove temporary cellFocus call here.
 180         me.primaryView.onCellFocus(position);
 181         me.fireEvent('select', me, record, position.row, position.column);
 182     },
 183
 184     // notify view that the cell has been deselected to update the ui
 185     // appropriately
 186     onCellDeselect: function(position) {
 187         var me = this,
 188             store = me.view.getStore(),
 189             record = store.getAt(position.row);
 190
 191         me.doDeselect(record);
 192         me.primaryView.onCellDeselect(position);
 193         me.fireEvent('deselect', me, record, position.row, position.column);
 194     },
 195
 196     onKeyTab: function(e, t) {
 197         var me = this,
 198             direction = e.shiftKey ? 'left' : 'right',
 199             editingPlugin = me.view.editingPlugin,
 200             position = me.move(direction, e);
 201
 202         if (editingPlugin &amp;&amp; position &amp;&amp; me.wasEditing) {
 203             editingPlugin.startEditByPosition(position);
 204         }
 205         delete me.wasEditing;
 206     },
 207
 208     onEditorTab: function(editingPlugin, e) {
 209         var me = this,
 210             direction = e.shiftKey ? 'left' : 'right',
 211             position  = me.move(direction, e);
 212
 213         if (position) {
 214             editingPlugin.startEditByPosition(position);
 215             me.wasEditing = true;
 216         }
 217     },
 218
 219     refresh: function() {
 220         var pos = this.getCurrentPosition();
 221         if (pos) {
 222             this.onCellSelect(pos);
 223         }
 224     },
 225
 226     onViewRefresh: function() {
 227         var pos = this.getCurrentPosition();
 228         if (pos) {
 229             this.onCellDeselect(pos);
 230             this.setCurrentPosition(null);
 231         }
 232     },
 233
 234     selectByPosition: function(position) {
 235         this.setCurrentPosition(position);
 236     }
 237 });</pre>
 238 </body>
 239 </html>