Upgrade to ExtJS 4.0.1 - Released 05/18/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-deselect'>            /**
39 </span>             * @event deselect
40              * Fired after a record is deselected
41              * @param {Ext.selection.DataViewModel} this
42              * @param  {Ext.data.Model} record The deselected record
43              */
44             'deselect',
45             
46 <span id='Ext-selection-DataViewModel-event-select'>            /**
47 </span>             * @event select
48              * Fired after a record is selected
49              * @param {Ext.selection.DataViewModel} this
50              * @param  {Ext.data.Model} record The selected record
51              */
52             'select'
53         );
54         this.callParent(arguments);
55     },
56     
57     bindComponent: function(view) {
58         var me = this,
59             eventListeners = {
60                 refresh: me.refresh,
61                 scope: me
62             };
63
64         me.view = view;
65         me.bind(view.getStore());
66
67         view.on(view.triggerEvent, me.onItemClick, me);
68         view.on(view.triggerCtEvent, me.onContainerClick, me);
69
70         view.on(eventListeners);
71
72         if (me.enableKeyNav) {
73             me.initKeyNav(view);
74         }
75     },
76
77     onItemClick: function(view, record, item, index, e) {
78         this.selectWithEvent(record, e);
79     },
80
81     onContainerClick: function() {
82         if (this.deselectOnContainerClick) {
83             this.deselectAll();
84         }
85     },
86     
87     initKeyNav: function(view) {
88         var me = this;
89         
90         if (!view.rendered) {
91             view.on('render', Ext.Function.bind(me.initKeyNav, me, [view], 0), me, {single: true});
92             return;
93         }
94         
95         view.el.set({
96             tabIndex: -1
97         });
98         me.keyNav = Ext.create('Ext.util.KeyNav', view.el, {
99             down: Ext.pass(me.onNavKey, [1], me),
100             right: Ext.pass(me.onNavKey, [1], me),
101             left: Ext.pass(me.onNavKey, [-1], me),
102             up: Ext.pass(me.onNavKey, [-1], me),
103             scope: me
104         });
105     },
106     
107     onNavKey: function(step) {
108         step = step || 1;
109         var me = this,
110             view = me.view,
111             selected = me.getSelection()[0],
112             numRecords = me.view.store.getCount(),
113             idx;
114                 
115         if (selected) {
116             idx = view.indexOf(view.getNode(selected)) + step;
117         } else {
118             idx = 0;
119         }
120         
121         if (idx &lt; 0) {
122             idx = numRecords - 1;
123         } else if (idx &gt;= numRecords) {
124             idx = 0;
125         }
126         
127         me.select(idx);
128     },
129
130     // Allow the DataView to update the ui
131     onSelectChange: function(record, isSelected, suppressEvent) {
132         var me = this,
133             view = me.view,
134             allowSelect = true;
135         
136         if (isSelected) {
137             if (!suppressEvent) {
138                 allowSelect = me.fireEvent('beforeselect', me, record) !== false;
139             }
140             if (allowSelect) {
141                 view.onItemSelect(record);
142                 if (!suppressEvent) {
143                     me.fireEvent('select', me, record);
144                 }
145             }
146         } else {
147             view.onItemDeselect(record);
148             if (!suppressEvent) {
149                 me.fireEvent('deselect', me, record);
150             }
151         }
152     }
153 });
154 </pre>
155 </body>
156 </html>