RowExpander.js
上传用户:ouhalaa
上传日期:2016-03-17
资源大小:10210k
文件大小:4k
源码类别:

Web服务器

开发平台:

Java

  1. /*
  2.  * Ext JS Library 2.2
  3.  * Copyright(c) 2006-2008, Ext JS, LLC.
  4.  * licensing@extjs.com
  5.  * 
  6.  * http://extjs.com/license
  7.  */
  8. Ext.grid.RowExpander = function(config){
  9.     Ext.apply(this, config);
  10.     this.addEvents({
  11.         beforeexpand : true,
  12.         expand: true,
  13.         beforecollapse: true,
  14.         collapse: true
  15.     });
  16.     Ext.grid.RowExpander.superclass.constructor.call(this);
  17.     if(this.tpl){
  18.         if(typeof this.tpl == 'string'){
  19.             this.tpl = new Ext.Template(this.tpl);
  20.         }
  21.         this.tpl.compile();
  22.     }
  23.     this.state = {};
  24.     this.bodyContent = {};
  25. };
  26. Ext.extend(Ext.grid.RowExpander, Ext.util.Observable, {
  27.     header: "",
  28.     width: 20,
  29.     sortable: false,
  30.     fixed:true,
  31.     menuDisabled:true,
  32.     dataIndex: '',
  33.     id: 'expander',
  34.     lazyRender : true,
  35.     enableCaching: true,
  36.     getRowClass : function(record, rowIndex, p, ds){
  37.         p.cols = p.cols-1;
  38.         var content = this.bodyContent[record.id];
  39.         if(!content && !this.lazyRender){
  40.             content = this.getBodyContent(record, rowIndex);
  41.         }
  42.         if(content){
  43.             p.body = content;
  44.         }
  45.         return this.state[record.id] ? 'x-grid3-row-expanded' : 'x-grid3-row-collapsed';
  46.     },
  47.     init : function(grid){
  48.         this.grid = grid;
  49.         var view = grid.getView();
  50.         view.getRowClass = this.getRowClass.createDelegate(this);
  51.         view.enableRowBody = true;
  52.         grid.on('render', function(){
  53.             view.mainBody.on('mousedown', this.onMouseDown, this);
  54.         }, this);
  55.     },
  56.     getBodyContent : function(record, index){
  57.         if(!this.enableCaching){
  58.             return this.tpl.apply(record.data);
  59.         }
  60.         var content = this.bodyContent[record.id];
  61.         if(!content){
  62.             content = this.tpl.apply(record.data);
  63.             this.bodyContent[record.id] = content;
  64.         }
  65.         return content;
  66.     },
  67.     onMouseDown : function(e, t){
  68.         if(t.className == 'x-grid3-row-expander'){
  69.             e.stopEvent();
  70.             var row = e.getTarget('.x-grid3-row');
  71.             this.toggleRow(row);
  72.         }
  73.     },
  74.     renderer : function(v, p, record){
  75.         p.cellAttr = 'rowspan="2"';
  76.         return '<div class="x-grid3-row-expander">&#160;</div>';
  77.     },
  78.     beforeExpand : function(record, body, rowIndex){
  79.         if(this.fireEvent('beforeexpand', this, record, body, rowIndex) !== false){
  80.             if(this.tpl && this.lazyRender){
  81.                 body.innerHTML = this.getBodyContent(record, rowIndex);
  82.             }
  83.             return true;
  84.         }else{
  85.             return false;
  86.         }
  87.     },
  88.     toggleRow : function(row){
  89.         if(typeof row == 'number'){
  90.             row = this.grid.view.getRow(row);
  91.         }
  92.         this[Ext.fly(row).hasClass('x-grid3-row-collapsed') ? 'expandRow' : 'collapseRow'](row);
  93.     },
  94.     expandRow : function(row){
  95.         if(typeof row == 'number'){
  96.             row = this.grid.view.getRow(row);
  97.         }
  98.         var record = this.grid.store.getAt(row.rowIndex);
  99.         var body = Ext.DomQuery.selectNode('tr:nth(2) div.x-grid3-row-body', row);
  100.         if(this.beforeExpand(record, body, row.rowIndex)){
  101.             this.state[record.id] = true;
  102.             Ext.fly(row).replaceClass('x-grid3-row-collapsed', 'x-grid3-row-expanded');
  103.             this.fireEvent('expand', this, record, body, row.rowIndex);
  104.         }
  105.     },
  106.     collapseRow : function(row){
  107.         if(typeof row == 'number'){
  108.             row = this.grid.view.getRow(row);
  109.         }
  110.         var record = this.grid.store.getAt(row.rowIndex);
  111.         var body = Ext.fly(row).child('tr:nth(1) div.x-grid3-row-body', true);
  112.         if(this.fireEvent('beforecollapse', this, record, body, row.rowIndex) !== false){
  113.             this.state[record.id] = false;
  114.             Ext.fly(row).replaceClass('x-grid3-row-expanded', 'x-grid3-row-collapsed');
  115.             this.fireEvent('collapse', this, record, body, row.rowIndex);
  116.         }
  117.     }
  118. });