docs/source/DataViewModel.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-DataViewModel'>/**
  19 </span> * @class Ext.selection.DataViewModel
  20  * @ignore
  21  */
  22 Ext.define('Ext.selection.DataViewModel', {
  23     extend: 'Ext.selection.Model',
  24
  25     requires: ['Ext.util.KeyNav'],
  26
  27     deselectOnContainerClick: true,
  28
  29 <span id='Ext-selection-DataViewModel-cfg-enableKeyNav'>    /**
  30 </span>     * @cfg {Boolean} enableKeyNav
  31      *
  32      * Turns on/off keyboard navigation within the DataView.
  33      */
  34     enableKeyNav: true,
  35
  36     constructor: function(cfg){
  37         this.addEvents(
  38 <span id='Ext-selection-DataViewModel-event-beforedeselect'>            /**
  39 </span>             * @event beforedeselect
  40              * Fired before a record is deselected. If any listener returns false, the
  41              * deselection is cancelled.
  42              * @param {Ext.selection.DataViewModel} this
  43              * @param {Ext.data.Model} record The deselected record
  44              */
  45             'beforedeselect',
  46
  47 <span id='Ext-selection-DataViewModel-event-beforeselect'>            /**
  48 </span>             * @event beforeselect
  49              * Fired before a record is selected. If any listener returns false, the
  50              * selection is cancelled.
  51              * @param {Ext.selection.DataViewModel} this
  52              * @param {Ext.data.Model} record The selected record
  53              */
  54             'beforeselect',
  55
  56 <span id='Ext-selection-DataViewModel-event-deselect'>            /**
  57 </span>             * @event deselect
  58              * Fired after a record is deselected
  59              * @param {Ext.selection.DataViewModel} this
  60              * @param  {Ext.data.Model} record The deselected record
  61              */
  62             'deselect',
  63
  64 <span id='Ext-selection-DataViewModel-event-select'>            /**
  65 </span>             * @event select
  66              * Fired after a record is selected
  67              * @param {Ext.selection.DataViewModel} this
  68              * @param  {Ext.data.Model} record The selected record
  69              */
  70             'select'
  71         );
  72         this.callParent(arguments);
  73     },
  74
  75     bindComponent: function(view) {
  76         var me = this,
  77             eventListeners = {
  78                 refresh: me.refresh,
  79                 scope: me
  80             };
  81
  82         me.view = view;
  83         me.bind(view.getStore());
  84
  85         view.on(view.triggerEvent, me.onItemClick, me);
  86         view.on(view.triggerCtEvent, me.onContainerClick, me);
  87
  88         view.on(eventListeners);
  89
  90         if (me.enableKeyNav) {
  91             me.initKeyNav(view);
  92         }
  93     },
  94
  95     onItemClick: function(view, record, item, index, e) {
  96         this.selectWithEvent(record, e);
  97     },
  98
  99     onContainerClick: function() {
 100         if (this.deselectOnContainerClick) {
 101             this.deselectAll();
 102         }
 103     },
 104
 105     initKeyNav: function(view) {
 106         var me = this;
 107
 108         if (!view.rendered) {
 109             view.on('render', Ext.Function.bind(me.initKeyNav, me, [view], 0), me, {single: true});
 110             return;
 111         }
 112
 113         view.el.set({
 114             tabIndex: -1
 115         });
 116         me.keyNav = Ext.create('Ext.util.KeyNav', view.el, {
 117             down: Ext.pass(me.onNavKey, [1], me),
 118             right: Ext.pass(me.onNavKey, [1], me),
 119             left: Ext.pass(me.onNavKey, [-1], me),
 120             up: Ext.pass(me.onNavKey, [-1], me),
 121             scope: me
 122         });
 123     },
 124
 125     onNavKey: function(step) {
 126         step = step || 1;
 127         var me = this,
 128             view = me.view,
 129             selected = me.getSelection()[0],
 130             numRecords = me.view.store.getCount(),
 131             idx;
 132
 133         if (selected) {
 134             idx = view.indexOf(view.getNode(selected)) + step;
 135         } else {
 136             idx = 0;
 137         }
 138
 139         if (idx &lt; 0) {
 140             idx = numRecords - 1;
 141         } else if (idx &gt;= numRecords) {
 142             idx = 0;
 143         }
 144
 145         me.select(idx);
 146     },
 147
 148     // Allow the DataView to update the ui
 149     onSelectChange: function(record, isSelected, suppressEvent, commitFn) {
 150         var me = this,
 151             view = me.view,
 152             eventName = isSelected ? 'select' : 'deselect';
 153
 154         if ((suppressEvent || me.fireEvent('before' + eventName, me, record)) !== false &amp;&amp;
 155                 commitFn() !== false) {
 156
 157             if (isSelected) {
 158                 view.onItemSelect(record);
 159             } else {
 160                 view.onItemDeselect(record);
 161             }
 162
 163             if (!suppressEvent) {
 164                 me.fireEvent(eventName, me, record);
 165             }
 166         }
 167     },
 168
 169     destroy: function(){
 170         Ext.destroy(this.keyNav);
 171         this.callParent();
 172     }
 173 });
 174 </pre>
 175 </body>
 176 </html>