Upgrade to ExtJS 4.0.1 - Released 05/18/2011
[extjs.git] / docs / source / CellModel.html
diff --git a/docs/source/CellModel.html b/docs/source/CellModel.html
new file mode 100644 (file)
index 0000000..8f9ec42
--- /dev/null
@@ -0,0 +1,240 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
+  <title>The source code</title>
+  <link href="../prettify/prettify.css" type="text/css" rel="stylesheet" />
+  <script type="text/javascript" src="../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-selection-CellModel'>/**
+</span> * @class Ext.selection.CellModel
+ * @extends Ext.selection.Model
+ * @private
+ */
+Ext.define('Ext.selection.CellModel', {
+    extend: 'Ext.selection.Model',
+    alias: 'selection.cellmodel',
+    requires: ['Ext.util.KeyNav'],
+    
+<span id='Ext-selection-CellModel-cfg-enableKeyNav'>    /**
+</span>     * @cfg {Boolean} enableKeyNav
+     * Turns on/off keyboard navigation within the grid. Defaults to true.
+     */
+    enableKeyNav: true,
+    
+<span id='Ext-selection-CellModel-cfg-preventWrap'>    /**
+</span>     * @cfg {Boolean} preventWrap
+     * Set this configuration to true to prevent wrapping around of selection as
+     * a user navigates to the first or last column. Defaults to false.
+     */
+    preventWrap: false,
+
+    constructor: function(){
+        this.addEvents(
+<span id='Ext-selection-CellModel-event-deselect'>            /**
+</span>             * @event deselect
+             * Fired after a cell is deselected
+             * @param {Ext.selection.CellModel} this
+             * @param {Ext.data.Model} record The record of the deselected cell
+             * @param {Number} row The row index deselected
+             * @param {Number} column The column index deselected
+             */
+            'deselect',
+            
+<span id='Ext-selection-CellModel-event-select'>            /**
+</span>             * @event select
+             * Fired after a cell is selected
+             * @param {Ext.selection.CellModel} this
+             * @param {Ext.data.Model} record The record of the selected cell
+             * @param {Number} row The row index selected
+             * @param {Number} column The column index selected
+             */
+            'select'
+        );
+        this.callParent(arguments);    
+    },
+
+    bindComponent: function(view) {
+        var me = this;
+        me.primaryView = view;
+        me.views = me.views || [];
+        me.views.push(view);
+        me.bind(view.getStore(), true);
+
+        view.on({
+            cellmousedown: me.onMouseDown,
+            refresh: me.onViewRefresh,
+            scope: me
+        });
+
+        if (me.enableKeyNav) {
+            me.initKeyNav(view);
+        }
+    },
+
+    initKeyNav: function(view) {
+        var me = this;
+        
+        if (!view.rendered) {
+            view.on('render', Ext.Function.bind(me.initKeyNav, me, [view], 0), me, {single: true});
+            return;
+        }
+
+        view.el.set({
+            tabIndex: -1
+        });
+
+        // view.el has tabIndex -1 to allow for
+        // keyboard events to be passed to it.
+        me.keyNav = Ext.create('Ext.util.KeyNav', view.el, {
+            up: me.onKeyUp,
+            down: me.onKeyDown,
+            right: me.onKeyRight,
+            left: me.onKeyLeft,
+            tab: me.onKeyTab,
+            scope: me
+        });
+    },
+    
+    getHeaderCt: function() {
+        return this.primaryView.headerCt;
+    },
+
+    onKeyUp: function(e, t) {
+        this.move('up', e);
+    },
+
+    onKeyDown: function(e, t) {
+        this.move('down', e);
+    },
+
+    onKeyLeft: function(e, t) {
+        this.move('left', e);
+    },
+    
+    onKeyRight: function(e, t) {
+        this.move('right', e);
+    },
+    
+    move: function(dir, e) {
+        var me = this,
+            pos = me.primaryView.walkCells(me.getCurrentPosition(), dir, e, me.preventWrap);
+        if (pos) {
+            me.setCurrentPosition(pos);
+        }
+        return pos;
+    },
+
+<span id='Ext-selection-CellModel-method-getCurrentPosition'>    /**
+</span>     * Returns the current position in the format {row: row, column: column}
+     */
+    getCurrentPosition: function() {
+        return this.position;
+    },
+    
+<span id='Ext-selection-CellModel-method-setCurrentPosition'>    /**
+</span>     * Sets the current position
+     * @param {Object} position The position to set.
+     */
+    setCurrentPosition: function(pos) {
+        var me = this;
+        
+        if (me.position) {
+            me.onCellDeselect(me.position);
+        }
+        if (pos) {
+            me.onCellSelect(pos);
+        }
+        me.position = pos;
+    },
+
+<span id='Ext-selection-CellModel-method-onMouseDown'>    /**
+</span>     * Set the current position based on where the user clicks.
+     * @private
+     */
+    onMouseDown: function(view, cell, cellIndex, record, row, rowIndex, e) {
+        this.setCurrentPosition({
+            row: rowIndex,
+            column: cellIndex
+        });
+    },
+
+    // notify the view that the cell has been selected to update the ui
+    // appropriately and bring the cell into focus
+    onCellSelect: function(position) {
+        var me = this,
+            store = me.view.getStore(),
+            record = store.getAt(position.row);
+
+        me.doSelect(record);
+        me.primaryView.onCellSelect(position);
+        // TODO: Remove temporary cellFocus call here.
+        me.primaryView.onCellFocus(position);
+        me.fireEvent('select', me, record, position.row, position.column);
+    },
+
+    // notify view that the cell has been deselected to update the ui
+    // appropriately
+    onCellDeselect: function(position) {
+        var me = this,
+            store = me.view.getStore(),
+            record = store.getAt(position.row);
+
+        me.doDeselect(record);
+        me.primaryView.onCellDeselect(position);
+        me.fireEvent('deselect', me, record, position.row, position.column);
+    },
+
+    onKeyTab: function(e, t) {
+        var me = this,
+            direction = e.shiftKey ? 'left' : 'right',
+            editingPlugin = me.view.editingPlugin,
+            position = me.move(direction, e);
+
+        if (editingPlugin &amp;&amp; position &amp;&amp; me.wasEditing) {
+            editingPlugin.startEditByPosition(position);
+        }
+        delete me.wasEditing;
+    },
+
+    onEditorTab: function(editingPlugin, e) {
+        var me = this,
+            direction = e.shiftKey ? 'left' : 'right',
+            position  = me.move(direction, e);
+
+        if (position) {
+            editingPlugin.startEditByPosition(position);
+            me.wasEditing = true;
+        }
+    },
+
+    refresh: function() {
+        var pos = this.getCurrentPosition();
+        if (pos) {
+            this.onCellSelect(pos);
+        }
+    },
+
+    onViewRefresh: function() {
+        var pos = this.getCurrentPosition();
+        if (pos) {
+            this.onCellDeselect(pos);
+            this.setCurrentPosition(null);
+        }
+    },
+
+    selectByPosition: function(position) {
+        this.setCurrentPosition(position);
+    }
+});</pre>
+</body>
+</html>