如何使用ExtJS Grid製作具有行/集體的表格式結構4.1

Question

我需要使用具有colspan和rowspan功能的ExtJS 4.1網格來實現邏輯。

Answer 1

解決方法一：ExtJS的電網與ROWSPAN/COLSPAN

如果你用一個正常的ExtJS的網格，每個參數值一列，你可以（AB）的使用在某種程度上渲染：

renderer:function(value, meta, record, rowIndex, colIndex, store, view) { 
    var columnManager = view.ownerCt.getColumnManager(), 
     previousRecord = store.getAt(rowIndex-1), 
     nextRecord = store.getAt(rowIndex+1), 
     column = columnManager.getHeaderAtIndex(colIndex), 
     previousColumn = columnManager.getHeaderAtIndex(colIndex-1), 
     nextColumn = columnManager.getHeaderAtIndex(colIndex+1), 
     cellAbove = view.getCell(previousRecord,column), 
     cellBelow = view.getCell(nextRecord,column), 
     cellLeft = view.getCell(record, previousColumn), 
     cellRight = view.getCell(record, nextColumn); 
    ... 
    if(someCondition) { 
     meta.tdAttr='rowSpan=4'; 
    } else if (someOtherCondition /* any of the previous three records has someCondition */) { 
     meta.tdStyle='display:none'; 
    } 
    return value; // Don't forget this, or else your cell is empty! 
}` 

以類似的方式，我曾經實現過一個渲染器，該渲染器合併了具有相同內容的相鄰單元格，因爲我必須替換MSFlexGrid with MergeCells=flexMergeFree。

四個缺點，我知道：

• ，你必須總是顯示正確的金額：無爲您列跨度和行跨度。
• 由於您覆蓋了正常的渲染器，因此無法使用特殊列（numbercolumns，datecolumns，checkcolumns）輕鬆使用它。
• 您的數據必須位於「具有原始值的記錄」格式中，因此當您加載商店時，您必須遍歷樹並生成記錄。
• 將不再在ExtJS6中工作;不知道ExtJS的5

解決方法二：嵌套網格

您可以輕鬆地render a grid into a grid's RowExpander plugin。

plugins: [{ 
    ptype: "rowexpander", 
    rowBodyTpl: ['<div id="SessionInstructionGridRow-{ClientSessionId}" ></div>'] 
    listeners:{ 
     expandbody:function() { 
      var targetId = 'SessionInstructionGridRow-' + record.get('ClientSessionId'); 
      if (Ext.getCmp(targetId + "_grid") == null) { 
       var sessionInstructionGrid = Ext.create('TS.view.client.SessionInstruction', { 
        renderTo: targetId, 
        id: targetId + "_grid" 
       }); 
       rowNode.grid = sessionInstructionGrid; 
       sessionInstructionGrid.getEl().swallowEvent(['mouseover', 'mousedown', 'click', 'dblclick', 'onRowFocus']); 
       sessionInstructionGrid.fireEvent("bind", sessionInstructionGrid, { ClientSessionId: record.get('ClientSessionId') }); 
      } 
     } 
    } 
}], 

主要缺點是它看起來像一個網格內的網格，而不是像rowSpan和colSpan的單個網格;所以它不在你的屏幕截圖附近。但這就是我今天實現顯示包含數組的字段內容的方式。如果你想顯示結構化數據（對象），你也可以將propertygrid渲染到rowExpander中。