分組標題列大小

Question

我有一個分組標題網格。 網格定義可以在這里找到。

結果看起來像這樣。

我希望所有列的空間相等，包括分組標題內的列。 我究竟做錯了什么？

Answer 1

Ext JS目前不支持此行為。 我有同樣的問題。 這不是一個真正的錯誤，因為源代碼明確指出你不能這樣做，但它似乎是網格的最大缺點之一（緊靠鎖定列）。

我的解決方案是覆蓋4.1.0中的Ext.grid.ColumnLayout＃completeLayout方法。 這是確定子項（列）寬度的位置。 您基本上要做的是獲取網格可用的總寬度（可通過提供的布局/上下文對象獲得）並在所有葉子列上手動轉換flex-> width。 然后，對於每組列，您可以對計算的寬度求和並設置父寬度。 在completeLayout方法中執行此操作意味着它在每個布局期間自動運行，因此您不必在觀看調整大小事件等時進行調整。

有了一個好的調試器和相當的耐心，你可以搞清楚。 我想發布一個代碼示例，但我的解決方案大約有100行，是我工作代碼的一部分。 我仍然可以指出一些警告：

1. 如果您只需要支持2個級別的標題，請不要費心使整個方法遞歸3個級別。 YAGNI。

2. 注意隱藏的列。 我相信有一個錯誤，隱藏的組頭沒有在子列上設置隱藏屬性。 我最常見的一個問題是，顯示一個專欄會以奇怪的方式改變一切。

3. 注意未密封的團體。 我通過使每個柱密封來解決這個問題，但如果能夠自由移動柱是您的要求的一部分，那么您可能需要采取額外的步驟。

老實說，最好的解決方案是在Sencha論壇上將此文件作為功能請求提交，並詢問他們為什么Ext JS庫中仍然不存在這樣一個重要功能。

編輯：發布源代碼到Sencha支持論壇 。

Answer 2

如果您想像其他子列一樣使用子列，例如，您有2列具有固定寬度，並且分組列應該像flex（ 自動寬度 ）的列一樣，您需要編寫一個自己的函數來執行此操作調整大小。

它只有兩行： sencha的例子

說明：您需要向網格添加resize事件偵聽器，並在函數內部調整子列的大小

網格監聽器：

listeners: {
    resize: function(grid) {
        // you need to add and itemId for the sub columns parent
        var subCols = grid.getView().getHeaderCt().child('#sub-cols');
        // 200 = sum of the fixed width of columns
        subCols.setWidth(grid.getWidth() - 200);
    }
}

網格列：

{
    text: 'sub columns',
    itemId: 'sub-cols',
    columns: [{
        text: 'Email',
        dataIndex: 'email',
        flex: 1
     }, {
        text: 'Phone',
        dataIndex: 'phone',
        flex: 1
     }]
}

Answer 3

您試圖將分組列flex設置為小4倍（注釋0.25值），但實際上不應該實際大4倍？

Extjs flex