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