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

中间件编程

开发平台:

JavaScript

  1. /*!  * Ext JS Library 3.0.0  * Copyright(c) 2006-2009 Ext JS, LLC  * licensing@extjs.com  * http://www.extjs.com/license  */ Ext.ns('Ext.ux.grid');
  2. /**
  3.  * @class Ext.ux.grid.RowExpander
  4.  * @extends Ext.util.Observable
  5.  * Plugin (ptype = 'rowexpander') that adds the ability to have a Column in a grid which enables
  6.  * a second row body which expands/contracts.  The expand/contract behavior is configurable to react
  7.  * on clicking of the column, double click of the row, and/or hitting enter while a row is selected.
  8.  *
  9.  * @ptype rowexpander
  10.  */
  11. Ext.ux.grid.RowExpander = Ext.extend(Ext.util.Observable, {
  12.     /**
  13.      * @cfg {Boolean} expandOnEnter
  14.      * <tt>true</tt> to toggle selected row(s) between expanded/collapsed when the enter
  15.      * key is pressed (defaults to <tt>true</tt>).
  16.      */
  17.     expandOnEnter : true,
  18.     /**
  19.      * @cfg {Boolean} expandOnDblClick
  20.      * <tt>true</tt> to toggle a row between expanded/collapsed when double clicked
  21.      * (defaults to <tt>true</tt>).
  22.      */
  23.     expandOnDblClick : true,
  24.     header : '',
  25.     width : 20,
  26.     sortable : false,
  27.     fixed : true,
  28.     menuDisabled : true,
  29.     dataIndex : '',
  30.     id : 'expander',
  31.     lazyRender : true,
  32.     enableCaching : true,
  33.     constructor: function(config){
  34.         Ext.apply(this, config);
  35.         this.addEvents({
  36.             /**
  37.              * @event beforeexpand
  38.              * Fires before the row expands. Have the listener return false to prevent the row from expanding.
  39.              * @param {Object} this RowExpander object.
  40.              * @param {Object} Ext.data.Record Record for the selected row.
  41.              * @param {Object} body body element for the secondary row.
  42.              * @param {Number} rowIndex The current row index.
  43.              */
  44.             beforeexpand: true,
  45.             /**
  46.              * @event expand
  47.              * Fires after the row expands.
  48.              * @param {Object} this RowExpander object.
  49.              * @param {Object} Ext.data.Record Record for the selected row.
  50.              * @param {Object} body body element for the secondary row.
  51.              * @param {Number} rowIndex The current row index.
  52.              */
  53.             expand: true,
  54.             /**
  55.              * @event beforecollapse
  56.              * Fires before the row collapses. Have the listener return false to prevent the row from collapsing.
  57.              * @param {Object} this RowExpander object.
  58.              * @param {Object} Ext.data.Record Record for the selected row.
  59.              * @param {Object} body body element for the secondary row.
  60.              * @param {Number} rowIndex The current row index.
  61.              */
  62.             beforecollapse: true,
  63.             /**
  64.              * @event collapse
  65.              * Fires after the row collapses.
  66.              * @param {Object} this RowExpander object.
  67.              * @param {Object} Ext.data.Record Record for the selected row.
  68.              * @param {Object} body body element for the secondary row.
  69.              * @param {Number} rowIndex The current row index.
  70.              */
  71.             collapse: true
  72.         });
  73.         Ext.ux.grid.RowExpander.superclass.constructor.call(this);
  74.         if(this.tpl){
  75.             if(typeof this.tpl == 'string'){
  76.                 this.tpl = new Ext.Template(this.tpl);
  77.             }
  78.             this.tpl.compile();
  79.         }
  80.         this.state = {};
  81.         this.bodyContent = {};
  82.     },
  83.     getRowClass : function(record, rowIndex, p, ds){
  84.         p.cols = p.cols-1;
  85.         var content = this.bodyContent[record.id];
  86.         if(!content && !this.lazyRender){
  87.             content = this.getBodyContent(record, rowIndex);
  88.         }
  89.         if(content){
  90.             p.body = content;
  91.         }
  92.         return this.state[record.id] ? 'x-grid3-row-expanded' : 'x-grid3-row-collapsed';
  93.     },
  94.     init : function(grid){
  95.         this.grid = grid;
  96.         var view = grid.getView();
  97.         view.getRowClass = this.getRowClass.createDelegate(this);
  98.         view.enableRowBody = true;
  99.         grid.on('render', this.onRender, this);
  100.         grid.on('destroy', this.onDestroy, this);
  101.     },
  102.     // @private
  103.     onRender: function() {
  104.         var grid = this.grid;
  105.         var mainBody = grid.getView().mainBody;
  106.         mainBody.on('mousedown', this.onMouseDown, this, {delegate: '.x-grid3-row-expander'});
  107.         if (this.expandOnEnter) {
  108.             this.keyNav = new Ext.KeyNav(this.grid.getGridEl(), {
  109.                 'enter' : this.onEnter,
  110.                 scope: this
  111.             });
  112.         }
  113.         if (this.expandOnDblClick) {
  114.             grid.on('rowdblclick', this.onRowDblClick, this);
  115.         }
  116.     },
  117.     
  118.     // @private    
  119.     onDestroy: function() {
  120.         this.keyNav.disable();
  121.         delete this.keyNav;
  122.         var mainBody = this.grid.getView().mainBody;
  123.         mainBody.un('mousedown', this.onMouseDown, this);
  124.     },
  125.     // @private
  126.     onRowDblClick: function(grid, rowIdx, e) {
  127.         this.toggleRow(rowIdx);
  128.     },
  129.     onEnter: function(e) {
  130.         var g = this.grid;
  131.         var sm = g.getSelectionModel();
  132.         var sels = sm.getSelections();
  133.         for (var i = 0, len = sels.length; i < len; i++) {
  134.             var rowIdx = g.getStore().indexOf(sels[i]);
  135.             this.toggleRow(rowIdx);
  136.         }
  137.     },
  138.     getBodyContent : function(record, index){
  139.         if(!this.enableCaching){
  140.             return this.tpl.apply(record.data);
  141.         }
  142.         var content = this.bodyContent[record.id];
  143.         if(!content){
  144.             content = this.tpl.apply(record.data);
  145.             this.bodyContent[record.id] = content;
  146.         }
  147.         return content;
  148.     },
  149.     onMouseDown : function(e, t){
  150.         e.stopEvent();
  151.         var row = e.getTarget('.x-grid3-row');
  152.         this.toggleRow(row);
  153.     },
  154.     renderer : function(v, p, record){
  155.         p.cellAttr = 'rowspan="2"';
  156.         return '<div class="x-grid3-row-expander">&#160;</div>';
  157.     },
  158.     beforeExpand : function(record, body, rowIndex){
  159.         if(this.fireEvent('beforeexpand', this, record, body, rowIndex) !== false){
  160.             if(this.tpl && this.lazyRender){
  161.                 body.innerHTML = this.getBodyContent(record, rowIndex);
  162.             }
  163.             return true;
  164.         }else{
  165.             return false;
  166.         }
  167.     },
  168.     toggleRow : function(row){
  169.         if(typeof row == 'number'){
  170.             row = this.grid.view.getRow(row);
  171.         }
  172.         this[Ext.fly(row).hasClass('x-grid3-row-collapsed') ? 'expandRow' : 'collapseRow'](row);
  173.     },
  174.     expandRow : function(row){
  175.         if(typeof row == 'number'){
  176.             row = this.grid.view.getRow(row);
  177.         }
  178.         var record = this.grid.store.getAt(row.rowIndex);
  179.         var body = Ext.DomQuery.selectNode('tr:nth(2) div.x-grid3-row-body', row);
  180.         if(this.beforeExpand(record, body, row.rowIndex)){
  181.             this.state[record.id] = true;
  182.             Ext.fly(row).replaceClass('x-grid3-row-collapsed', 'x-grid3-row-expanded');
  183.             this.fireEvent('expand', this, record, body, row.rowIndex);
  184.         }
  185.     },
  186.     collapseRow : function(row){
  187.         if(typeof row == 'number'){
  188.             row = this.grid.view.getRow(row);
  189.         }
  190.         var record = this.grid.store.getAt(row.rowIndex);
  191.         var body = Ext.fly(row).child('tr:nth(1) div.x-grid3-row-body', true);
  192.         if(this.fireEvent('beforecollapse', this, record, body, row.rowIndex) !== false){
  193.             this.state[record.id] = false;
  194.             Ext.fly(row).replaceClass('x-grid3-row-expanded', 'x-grid3-row-collapsed');
  195.             this.fireEvent('collapse', this, record, body, row.rowIndex);
  196.         }
  197.     }
  198. });
  199. Ext.preg('rowexpander', Ext.ux.grid.RowExpander);
  200. //backwards compat
  201. Ext.grid.RowExpander = Ext.ux.grid.RowExpander;