docs/source/Checkable.html

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