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

中间件编程

开发平台:

JavaScript

  1. /*!  * Ext JS Library 3.0.0  * Copyright(c) 2006-2009 Ext JS, LLC  * licensing@extjs.com  * http://www.extjs.com/license  */ /**
  2.  * @class Ext.grid.CheckboxSelectionModel
  3.  * @extends Ext.grid.RowSelectionModel
  4.  * A custom selection model that renders a column of checkboxes that can be toggled to select or deselect rows.
  5.  * @constructor
  6.  * @param {Object} config The configuration options
  7.  */
  8. Ext.grid.CheckboxSelectionModel = Ext.extend(Ext.grid.RowSelectionModel, {
  9.     /**
  10.      * @cfg {Boolean} checkOnly <tt>true</tt> if rows can only be selected by clicking on the
  11.      * checkbox column (defaults to <tt>false</tt>).
  12.      */
  13.     /**
  14.      * @cfg {String} header Any valid text or HTML fragment to display in the header cell for the
  15.      * checkbox column.  Defaults to:<pre><code>
  16.      * '&lt;div class="x-grid3-hd-checker">&#38;#160;&lt;/div>'</tt>
  17.      * </code></pre>
  18.      * The default CSS class of <tt>'x-grid3-hd-checker'</tt> displays a checkbox in the header
  19.      * and provides support for automatic check all/none behavior on header click. This string
  20.      * can be replaced by any valid HTML fragment, including a simple text string (e.g.,
  21.      * <tt>'Select Rows'</tt>), but the automatic check all/none behavior will only work if the
  22.      * <tt>'x-grid3-hd-checker'</tt> class is supplied.
  23.      */
  24.     header: '<div class="x-grid3-hd-checker">&#160;</div>',
  25.     /**
  26.      * @cfg {Number} width The default width in pixels of the checkbox column (defaults to <tt>20</tt>).
  27.      */
  28.     width: 20,
  29.     /**
  30.      * @cfg {Boolean} sortable <tt>true</tt> if the checkbox column is sortable (defaults to
  31.      * <tt>false</tt>).
  32.      */
  33.     sortable: false,
  34.     // private
  35.     menuDisabled:true,
  36.     fixed:true,
  37.     dataIndex: '',
  38.     id: 'checker',
  39.     constructor: function(){
  40.         Ext.grid.CheckboxSelectionModel.superclass.constructor.apply(this, arguments);
  41.         if(this.checkOnly){
  42.             this.handleMouseDown = Ext.emptyFn;
  43.         }
  44.     },
  45.     // private
  46.     initEvents : function(){
  47.         Ext.grid.CheckboxSelectionModel.superclass.initEvents.call(this);
  48.         this.grid.on('render', function(){
  49.             var view = this.grid.getView();
  50.             view.mainBody.on('mousedown', this.onMouseDown, this);
  51.             Ext.fly(view.innerHd).on('mousedown', this.onHdMouseDown, this);
  52.         }, this);
  53.     },
  54.     // private
  55.     onMouseDown : function(e, t){
  56.         if(e.button === 0 && t.className == 'x-grid3-row-checker'){ // Only fire if left-click
  57.             e.stopEvent();
  58.             var row = e.getTarget('.x-grid3-row');
  59.             if(row){
  60.                 var index = row.rowIndex;
  61.                 if(this.isSelected(index)){
  62.                     this.deselectRow(index);
  63.                 }else{
  64.                     this.selectRow(index, true);
  65.                 }
  66.             }
  67.         }
  68.     },
  69.     // private
  70.     onHdMouseDown : function(e, t){
  71.         if(t.className == 'x-grid3-hd-checker'){
  72.             e.stopEvent();
  73.             var hd = Ext.fly(t.parentNode);
  74.             var isChecked = hd.hasClass('x-grid3-hd-checker-on');
  75.             if(isChecked){
  76.                 hd.removeClass('x-grid3-hd-checker-on');
  77.                 this.clearSelections();
  78.             }else{
  79.                 hd.addClass('x-grid3-hd-checker-on');
  80.                 this.selectAll();
  81.             }
  82.         }
  83.     },
  84.     // private
  85.     renderer : function(v, p, record){
  86.         return '<div class="x-grid3-row-checker">&#160;</div>';
  87.     }
  88. });