Upgrade to ExtJS 4.0.1 - Released 05/18/2011
[extjs.git] / docs / source / DataViewModel.html
diff --git a/docs/source/DataViewModel.html b/docs/source/DataViewModel.html
new file mode 100644 (file)
index 0000000..0b5e13c
--- /dev/null
@@ -0,0 +1,156 @@
+<!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-DataViewModel'>/**
+</span> * @class Ext.selection.DataViewModel
+ * @ignore
+ */
+Ext.define('Ext.selection.DataViewModel', {
+    extend: 'Ext.selection.Model',
+    
+    requires: ['Ext.util.KeyNav'],
+
+    deselectOnContainerClick: true,
+    
+<span id='Ext-selection-DataViewModel-cfg-enableKeyNav'>    /**
+</span>     * @cfg {Boolean} enableKeyNav
+     * 
+     * Turns on/off keyboard navigation within the DataView. Defaults to true.
+     */
+    enableKeyNav: true,
+    
+    constructor: function(cfg){
+        this.addEvents(
+<span id='Ext-selection-DataViewModel-event-deselect'>            /**
+</span>             * @event deselect
+             * Fired after a record is deselected
+             * @param {Ext.selection.DataViewModel} this
+             * @param  {Ext.data.Model} record The deselected record
+             */
+            'deselect',
+            
+<span id='Ext-selection-DataViewModel-event-select'>            /**
+</span>             * @event select
+             * Fired after a record is selected
+             * @param {Ext.selection.DataViewModel} this
+             * @param  {Ext.data.Model} record The selected record
+             */
+            'select'
+        );
+        this.callParent(arguments);
+    },
+    
+    bindComponent: function(view) {
+        var me = this,
+            eventListeners = {
+                refresh: me.refresh,
+                scope: me
+            };
+
+        me.view = view;
+        me.bind(view.getStore());
+
+        view.on(view.triggerEvent, me.onItemClick, me);
+        view.on(view.triggerCtEvent, me.onContainerClick, me);
+
+        view.on(eventListeners);
+
+        if (me.enableKeyNav) {
+            me.initKeyNav(view);
+        }
+    },
+
+    onItemClick: function(view, record, item, index, e) {
+        this.selectWithEvent(record, e);
+    },
+
+    onContainerClick: function() {
+        if (this.deselectOnContainerClick) {
+            this.deselectAll();
+        }
+    },
+    
+    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
+        });
+        me.keyNav = Ext.create('Ext.util.KeyNav', view.el, {
+            down: Ext.pass(me.onNavKey, [1], me),
+            right: Ext.pass(me.onNavKey, [1], me),
+            left: Ext.pass(me.onNavKey, [-1], me),
+            up: Ext.pass(me.onNavKey, [-1], me),
+            scope: me
+        });
+    },
+    
+    onNavKey: function(step) {
+        step = step || 1;
+        var me = this,
+            view = me.view,
+            selected = me.getSelection()[0],
+            numRecords = me.view.store.getCount(),
+            idx;
+                
+        if (selected) {
+            idx = view.indexOf(view.getNode(selected)) + step;
+        } else {
+            idx = 0;
+        }
+        
+        if (idx &lt; 0) {
+            idx = numRecords - 1;
+        } else if (idx &gt;= numRecords) {
+            idx = 0;
+        }
+        
+        me.select(idx);
+    },
+
+    // Allow the DataView to update the ui
+    onSelectChange: function(record, isSelected, suppressEvent) {
+        var me = this,
+            view = me.view,
+            allowSelect = true;
+        
+        if (isSelected) {
+            if (!suppressEvent) {
+                allowSelect = me.fireEvent('beforeselect', me, record) !== false;
+            }
+            if (allowSelect) {
+                view.onItemSelect(record);
+                if (!suppressEvent) {
+                    me.fireEvent('select', me, record);
+                }
+            }
+        } else {
+            view.onItemDeselect(record);
+            if (!suppressEvent) {
+                me.fireEvent('deselect', me, record);
+            }
+        }
+    }
+});
+</pre>
+</body>
+</html>