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; }
11 <script type="text/javascript">
12 function highlight() {
13 document.getElementById(location.hash.replace(/#/, "")).className = "highlight";
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
23 Ext.define('Ext.selection.CellModel', {
24 extend: 'Ext.selection.Model',
25 alias: 'selection.cellmodel',
26 requires: ['Ext.util.KeyNav'],
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.
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.
41 constructor: function(){
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
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
63 this.callParent(arguments);
66 bindComponent: function(view) {
68 me.primaryView = view;
69 me.views = me.views || [];
71 me.bind(view.getStore(), true);
74 cellmousedown: me.onMouseDown,
75 refresh: me.onViewRefresh,
79 if (me.enableKeyNav) {
84 initKeyNav: function(view) {
88 view.on('render', Ext.Function.bind(me.initKeyNav, me, [view], 0), me, {single: true});
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, {
101 right: me.onKeyRight,
108 getHeaderCt: function() {
109 return this.primaryView.headerCt;
112 onKeyUp: function(e, t) {
116 onKeyDown: function(e, t) {
117 this.move('down', e);
120 onKeyLeft: function(e, t) {
121 this.move('left', e);
124 onKeyRight: function(e, t) {
125 this.move('right', e);
128 move: function(dir, e) {
130 pos = me.primaryView.walkCells(me.getCurrentPosition(), dir, e, me.preventWrap);
132 me.setCurrentPosition(pos);
137 <span id='Ext-selection-CellModel-method-getCurrentPosition'> /**
138 </span> * Returns the current position in the format {row: row, column: column}
140 getCurrentPosition: function() {
141 return this.position;
144 <span id='Ext-selection-CellModel-method-setCurrentPosition'> /**
145 </span> * Sets the current position
146 * @param {Object} position The position to set.
148 setCurrentPosition: function(pos) {
152 me.onCellDeselect(me.position);
155 me.onCellSelect(pos);
160 <span id='Ext-selection-CellModel-method-onMouseDown'> /**
161 </span> * Set the current position based on where the user clicks.
164 onMouseDown: function(view, cell, cellIndex, record, row, rowIndex, e) {
165 this.setCurrentPosition({
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) {
175 store = me.view.getStore(),
176 record = store.getAt(position.row);
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);
185 // notify view that the cell has been deselected to update the ui
187 onCellDeselect: function(position) {
189 store = me.view.getStore(),
190 record = store.getAt(position.row);
192 me.doDeselect(record);
193 me.primaryView.onCellDeselect(position);
194 me.fireEvent('deselect', me, record, position.row, position.column);
197 onKeyTab: function(e, t) {
199 direction = e.shiftKey ? 'left' : 'right',
200 editingPlugin = me.view.editingPlugin,
201 position = me.move(direction, e);
203 if (editingPlugin && position && me.wasEditing) {
204 editingPlugin.startEditByPosition(position);
206 delete me.wasEditing;
209 onEditorTab: function(editingPlugin, e) {
211 direction = e.shiftKey ? 'left' : 'right',
212 position = me.move(direction, e);
215 editingPlugin.startEditByPosition(position);
216 me.wasEditing = true;
220 refresh: function() {
221 var pos = this.getCurrentPosition();
223 this.onCellSelect(pos);
227 onViewRefresh: function() {
228 var pos = this.getCurrentPosition();
230 this.onCellDeselect(pos);
231 this.setCurrentPosition(null);
235 selectByPosition: function(position) {
236 this.setCurrentPosition(position);