Upgrade to ExtJS 3.1.1 - Released 02/08/2010
[extjs.git] / examples / image-organizer / imgorg / Checkable.js
1 /*!
2  * Ext JS Library 3.1.1
3  * Copyright(c) 2006-2010 Ext JS, LLC
4  * licensing@extjs.com
5  * http://www.extjs.com/license
6  */
7
8 Ext.ns('Ext.ux.MultiCombo');
9 /**
10  * Checkable
11  * @plugin
12  */
13 Ext.ux.MultiCombo.Checkable = function(cfg) {
14         Ext.apply(this, cfg);
15 };
16 Ext.ux.MultiCombo.Checkable.prototype = {
17         /**
18          * @cfg {String} checkSelector DomQuery config for locating checkbox
19          */
20         checkSelector: 'input[type=checkbox]',
21         /**
22          * @cfg {String} itemSelector The itemSelector used with Combo's internal DataView [x-combo-list]
23          */
24         itemSelector : 'x-combo-list',
25         /**
26          * @cfg {String} cls
27          */
28         cls: 'combo-checkable',
29         /**
30          * @cfg {String} selectAllText The "SELECT ALL" phrase [Select All]
31          */
32         selectAllText: 'Select All',
33         /**
34          * @cfg {String} clearAllText the text to display for "clear all" link
35          */
36         clearAllText : 'clear all',
37
38         /**
39          * @cfg {String} separatorHtml arbitrary html rendered after Checkable controls.  Can be used to add an
40          * html separator markup.
41          */
42         separatorHtml : '',
43
44         // private {Boolean} checked
45         checked : null,
46
47         init : function(combo) {
48                 this.combo = combo;
49                 var checkable = this;
50                 var id = Ext.id();
51                 var cls = combo.itemSelector || this.itemSelector;
52
53                 if (!combo.tpl) {
54                         combo.tpl =['<tpl for=".">','<div class="'+cls+'-item">{'+combo.displayField+'}</div>','</tpl>']       .  join('');
55                 }
56                 combo.tpl = [
57                         '<div class="plugin ' + this.cls + '">',
58                                 '<span class="' + this.cls + '-select-all">',
59                                         '<input id="'+id+'" type="checkbox" />&nbsp;<label>'+this.selectAllText+'</label>',
60                                 '</span>',
61                                 '&nbsp;<span class="'+this.cls+'-clear-all">(<a href="#">' + this.clearAllText + '</a>)</span>',
62                         '</div>',
63                         this.separatorHtml
64                 ].join('') + combo.tpl.replace(new RegExp('({'+combo.displayField+'})'), "<input type=\"checkbox\" <tpl if=\"values._checked\">checked</tpl> />&nbsp;<label>$1</label>");
65
66                 combo.on('initview', function(c, dv) {
67                         dv.on('containerclick', this.onContainerClick.createDelegate(this));
68                         dv.on('selectionchange', this.onSelectionChange.createDelegate(this));
69                         dv.el.on('mouseover', this.onViewOver, this);
70                 },this);
71                 combo.on('select', this.onSelect.createDelegate(this));
72         },
73
74     onViewOver : function(ev, node){
75                 var target = ev.getTarget('.' + this.cls, 5);
76                 if (target) {
77                         this.combo.clearHighlight();
78                         Ext.fly(target).addClass(this.combo.highlightClass);
79                 }
80         if(this.inKeyMode){ // prevent key nav and mouse over conflicts
81             return;
82         }
83         return;
84     },
85
86         onSelect : function(rec, index) {
87                 // anything?
88         },
89
90         /**
91          * getCheckbox
92          * @return {DomNode}
93          */
94         getCheckbox : function() {
95                 return this.combo.view.el.child('.'+this.cls+' '+this.checkSelector, true);
96         },
97
98         /**
99          * onSelectChange Fired by MultiCombo
100          * @param {Object} dv
101          * @param {Object} rs
102          */
103         onSelectionChange : function(dv, rs) {
104                 this.checked = (rs.length > 0 && rs.length == this.combo.store.getCount()) ? true : false;
105                 this.getCheckbox().checked = this.checked;
106
107                 var selector = this.checkSelector;
108                 setTimeout(function() {
109                         dv.el.select(dv.itemSelector + ' ' + selector).each(function(f) {
110                                 f.dom.checked = false;
111                         });
112                         dv.el.select('.' + dv.selectedClass + ' ' + selector).each(function(f) {
113                                 f.dom.checked = true;
114                         });
115                 },1);
116         },
117
118         /**
119          * selectNext Called by MultiCombo.  use this to apply hover-class to this row.
120          * @param {Object} sender
121          */
122         selectNext: function(sender) {
123                 sender.view.el.child('.' + this.cls).addClass(sender.highlightClass);
124         },
125
126         /**
127          * selectPrev Called by MultiCombo, use this to apply hover class to row.
128          * @param {Object} sender
129          */
130         selectPrev : function(sender) {
131                 sender.view.el.child('.' + this.cls).addClass(sender.highlightClass);
132         },
133
134         /**
135          * onEnter Called by MultiCombo
136          * @param {Object} sender
137          */
138         onEnter : function(sender) {
139                 this.setChecked(!this.checked);
140         },
141
142         /**
143          * onContainerClick Fired by MultiCombo
144          * @param {Object} dv
145          * @param {Object} ev
146          */
147         onContainerClick : function(dv, ev) {
148                 var btnClearAll = ev.getTarget('.'+this.cls+'-clear-all');
149                 if (btnClearAll) {
150                         this.clearAll();
151                 }
152                 else {
153                         this.setChecked(!this.checked);
154                 }
155                 return false;
156         },
157
158         // private selectAll
159         selectAll : function() {
160                 var value = [];
161                 this.combo.store.each(function(r) { value.push(r.data[this.combo.valueField]); },this);
162                 this.combo.setValue(value);
163                 this.combo.selectByValue(this.combo.getValue());
164                 this.combo.focus();
165         },
166
167         // private clearAll
168         clearAll : function() {
169                 this.combo.updateValue([]);
170                 this.combo.selectByValue([]);
171                 this.combo.view.clearSelections();
172                 this.combo.focus();
173         this.combo.fireEvent('clearall', this.combo);
174         },
175
176         /**
177          * setChecked
178          * @param {Object} v
179          */
180         setChecked : function(v) {
181                 if (v == this.checked) {
182                         return;
183                 }
184                 this.checked = v;
185                 this.getCheckbox().checked = this.checked;
186                 if (this.checked == true) {
187                         this.selectAll();
188                 }
189                 else {
190                         this.clearAll();
191                 }
192         }
193 }