Checkable.js
上传用户:shuoshiled
上传日期:2018-01-28
资源大小:10124k
文件大小:5k
源码类别:

中间件编程

开发平台:

JavaScript

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