ExtJS顯示只有條件的RowExpander

Question

我目前有一個相當大的網格，並且正在成功使用RowExpander插件來顯示特定行上的補充信息。我的問題是，並非所有行都包含上述補充信息，我不希望RowExpander處於活動狀態，並且如果特定數據存儲區條目爲空，則不會顯示它爲「+」圖標。我嘗試在RowExpander對象上使用傳統的「渲染器」屬性，但它不起作用。

所以基本上，你怎麼能有RowExpander的圖標和雙擊顯示和激活只有當某個數據存儲的字段！=「」？

在此先感謝！ =）

編輯：我找到了解決辦法

由於電子鋅說，它的解決方案的一部分（至少對我來說）是提供一個自定義的渲染器會檢查我的條件字段。這裏是我的RowExpander：

this.rowExpander = new Ext.ux.grid.RowExpander({ 
    tpl: ... 
    renderer: function(v, p, record) { 
       if (record.get('listeRetourChaqueJour') != "") { 
        p.cellAttr = 'rowspan="2"'; 
        return '<div class="x-grid3-row-expander"></div>'; 
       } else { 
        p.id = ''; 
        return '&#160;'; 
       } 
    }, 
    expandOnEnter: false, 
    expandOnDblClick: false 
}); 

現在，這裏的技巧是，對於這個特殊的網格，我選擇不允許，因爲RowExpander的expandOnEnter和expanOnDblClick有時可能不會被渲染。此外，將包含「+」圖標的網格單元的CSS類是'x-grid3-td-expander'。這是由CSS類自動設置爲x-grid3-td- [id-of-column]引起的。因此，只有當我不渲染rowExpander時，纔將id設置爲「''，同時我也刪除了未渲染單元格的灰色背景。所以，沒有雙擊，沒有輸入，沒有圖標，沒有灰色背景。它真的變得好像沒有任何RowExpander涉及我的數據存儲區域爲空的列（當我不需要RowExpander時）。

這對我來說訣竅。對於希望保留單元ID的用戶，或者希望保持雙擊並輸入事件的人，除了擴展我認爲的類外，沒有別的辦法可做。希望這能幫助其他人堅持我的立場！

Answer 1

正如e-鋅所說，解決方案的一部分（至少對我來說）是提供一個自定義渲染器來檢查我的條件字段。這裏是我的RowExpander：

this.rowExpander = new Ext.ux.grid.RowExpander({ 
    tpl: ... 
    renderer: function(v, p, record) { 
       if (record.get('listeRetourChaqueJour') != "") { 
        p.cellAttr = 'rowspan="2"'; 
        return '<div class="x-grid3-row-expander"></div>'; 
       } else { 
        p.id = ''; 
        return '&#160;'; 
       } 
    }, 
    expandOnEnter: false, 
    expandOnDblClick: false 
}); 

現在，這裏的技巧是，對於這個特殊的網格，我選擇不要讓expandOnEnter和expandOnDblClick特別，因爲RowExpander有時會不會被渲染。此外，將包含「+」圖標的網格單元的CSS類是'x-grid3-td-expander'。這是由CSS類自動設置爲x-grid3-td- [id-of-column]引起的。所以，只有當我沒有渲染rowExpander時，通過將id設置爲空字符串，我也刪除了不會提供任何展開的單元格的灰色背景。所以，沒有雙擊，沒有輸入，沒有圖標，沒有灰色背景。它真的變得好像沒有任何RowExpander涉及我的數據存儲區域爲空的列（當我不需要RowExpander時）。

這對我來說訣竅。對於希望保留單元ID的用戶，或希望保持雙擊並輸入事件的人，除了擴展RowExpander類外，沒有別的辦法可以實現。當然，也可以使用Ext.override（），但是所有的RowExpander實例都會被覆蓋命中。

Answer 2

我也有同樣的任務，還有我的解決方案

var rowExpander = new Ext.ux.grid.RowExpander({ 
    renderer : function(v, p, record){ 
     return record.get('relatedPageCount') > 0 ? '<div class="x-grid3-row-expander">&#160;</div>' : '&#160;'; 
    } 
}); 

我已經覆蓋渲染方法relatedPageCount場店將測試和渲染+或空白。

Answer 3

我想我已經找到一個更清潔solution.Give我一個反饋PLS :) 我延長RowExpander的toggleRow方法，如果我符合條件避免切換row.Otherwise標準流量繼續

Ext.create('customplugins.grid.plugin.ClickRowExpander',{ 
     pluginId : 'rowexpander', 
     rowBodyTpl : new Ext.XTemplate(
       '<p><b>Last Modified By:</b> {usermodify}</p>', 
       '<p><b>User data:</b> {userdata}</p>', 
       '<p><b>Correlation ID:</b> {correlationid}</p>', 
       '<p><b>Description:</b> {descr}</p>' 
     ), 
     toggleRow : function(rowIdx, record) { 
      if(record.get('directory')) return false; 
      customplugins.grid.plugin.ClickRowExpander.prototype.toggleRow.apply(this, arguments); 
     } 

    }) 

Answer 4

我已經處理了beforeExpand事件裏面的聽衆Ext.ux.grid.RowExpander。 beforeexpand方法獲取了整行數據注入。有條件地檢查數據，我們可以返回true或false。如果我們返回false，它將不會展開，否則它會執行。

var expander = new Ext.ux.grid.RowExpander({ 
      tpl: '<div class="ux-row-expander"></div>', 

      listeners: { 

       beforeexpand : function(expander, record, body, rowIndex){ 

        var gpdata = record.data.GROUP_VALUES[1].COLUMN_VALUE 
        if(gpdata == null){ 
         return false; 
        } 
        else{ 
         return true; 
        } 
       } 
      } 
     }); 

Answer 5

This version works in Ext JS 5 and 6 (classic)

的一件事是，除去+/-圖標，可以通過電網viewConfig來完成：

getRowClass: function (record, rowIndex, rowParams, store) { var yourFieldofChoice = record.get('yourFieldofChoice'); if (yourFieldofChoice == null) { return 'hide-row-expander'; } },

定義CSS的隱藏行膨脹：

.hide-row-expander .x-grid-row-expander { visibility: hidden; }

現在你禁用擴大在回車鍵或雙擊通過重寫toggleRow（「expandOnEnter」配置不再在Ext JS中6支持），或者如果你不希望重寫你創建自定義rowexpander建立在現有的插件：

Ext.define('RowExpander', { extend: 'Ext.grid.plugin.RowExpander', alias: 'plugin.myExpander', init: function (grid) { var me = this; me.grid = grid; me.callParent(arguments); }, requiredFields: ['yourFieldofChoice'], hasRequiredFields: function (rec) { var valid = false; Ext.each(this.requiredFields, function (field) { if (!Ext.isEmpty(rec.get(field))) { valid = true; } }); return valid; }, toggleRow: function (rowIdx, record) { var me = this, rec; rec = Ext.isNumeric(rowIdx)? me.view.getStore().getAt(rowIdx) : me.view.getRecord(rowIdx); if (me.hasRequiredFields(rec)) { me.callParent(arguments); } } });