examples/image-organizer/imgorg/Checkable.js

   1 /*!
   2  * Ext JS Library 3.2.1
   3  * Copyright(c) 2006-2010 Ext JS, Inc.
   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 }