Upgrade to ExtJS 4.0.2 - Released 06/09/2011
[extjs.git] / 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="../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-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. Defaults to true.
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 </pre>
170 </body>
171 </html>