Ext JS的EditorGridPanel - 如何拆分單元格中顯示多行

Question

在Ext.grid.EditorGridPanel表如何拆分單元格，有兩個或三排？

像下面的圖片

Answer 1

我成功地做到了一種行跨度，而不是行分裂的。海事組織更容易，它看起來像附加圖像上的網格一樣。示例代碼：

var grid = new Ext.grid.EditorGridPanel({ 
    [...], 

    // hook up events 
    initComponent: function() { 
     Ext.grid.GridPanel.prototype.initComponent.call(this); 

     this.getView().on('refresh', this.updateRowSpan, this); 
     this.getView().on('rowupdated', this.updateRowSpan, this); 
    }, 

    onLayout : function(vw, vh) { 
     this.updateRowSpan(); 
    }, 

    // set span on rows 
    updateRowSpan: function() { 
     var columns = this.getColumnModel().config, 
      view = this.getView(), 
      store = this.getStore(), 
      rowCount = store.getCount(), 

      column = columns[0], // put propert column index here 
      dataIndex = column.dataIndex, 

      spanCell = null, 
      spanCount = null; 
      spanValue = null; 

     for (var row = 0; row < rowCount; ++row) { 
      var cell = view.getCell(row, 0), 
       record = store.getAt(row), 
       value = record.get(dataIndex); 

      if (spanValue != value) { 
       if (spanCell !== null) { 
        this.setSpan(Ext.get(spanCell), spanCount); 
       } 

       spanCell = cell; 
       spanCount = 1; 
       spanValue = value; 
      } else { 
       spanCount++; 
      } 
     } 

     if (spanCell !== null) { 
      this.setSpan(Ext.get(spanCell), spanCount); 
     } 
    }, 

    // set actual span on row 
    setSpan: function(cell, count) { 
     var view = this.getView(), 
      innerCell = Ext.get(cell.down('*')), 
      height = cell.getHeight(), 
      width = cell.getWidth(); 

     cell.setStyle('position', 'relative'); 
     if (count == 1) { 
      innerCell.setStyle('position', ''); 
      innerCell.setStyle('height', ''); 
      innerCell.setStyle('height', ''); 
     } else { 
      innerCell.setStyle('position', 'absolute'); 
      innerCell.setStyle('height', (height * count - cell.getPadding('tb') - innerCell.getPadding('tb')) + 'px'); 
      innerCell.setStyle('width', (width - cell.getPadding('lr') - innerCell.getPadding('lr')) + 'px'); 
     } 
    } 
}); 

此代碼通過應用position: absolute和足夠大的尺寸，以低於覆蓋行改變了.x-grid3-cell-inner風格。請注意，您還必須應用一些不透明背景才能使其工作。工作樣本：http://jsfiddle.net/RpxZ5/8/

我第一次寫代碼的Ext JS 4，如果你有興趣，這裏是工作示例：http://jsfiddle.net/wQSQM/3/