ExtJS отображает RowExpander только при условии

Как заявил e-zinc, часть решения (по крайней мере, для меня) состояла в том, чтобы предоставить собственный рендерер, который проверял бы мое условное поле. Вот мой 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, я также удаляю серый фон ячеек, которые не будут предлагать какое-либо расширение. Итак, ни двойного щелчка, ни ввода, ни значка, ни серого фона. Это действительно выглядит так, как будто RowExpander строго не задействован для столбцов, где поле моего хранилища данных пусто (когда я не хочу RowExpander).

Это помогло мне. Для тех, кто хочет сохранить идентификатор ячейки или хочет, чтобы двойной щелчок и ввод событий работали, на мой взгляд, нет ничего другого, кроме расширения класса RowExpander. Конечно, можно также использовать Ext.override(), но тогда все экземпляры RowExpander будут затронуты переопределением.

У меня такая же задача, вот мое решение

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;';
    }
});

Я переопределил метод render, который проверяет поле relatedPageCount в хранилище и визуализирует + или пробел.

Я думаю, что нашел более чистое решение. Дайте мне отзыв, пожалуйста :) Я расширяю метод toggleRow для RowExpander, и если я соответствую условию, избегайте переключения строки. В противном случае стандартный поток продолжается.

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);
        }

    })

Эта версия работает в Ext JS 5 и 6 (классическая версия)

Во-первых, удалить значок +/-, что можно сделать с помощью grid 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; }

Теперь вы отключаете расширение при вводе (конфигурация «expandOnEnter» больше не поддерживается в Ext JS 6) или дважды щелкаете, переопределяя toggleRow, или, если вы не хотите переопределения, вы создаете свой собственный расширитель строк, построенный на существующем плагине:

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); } } });

Я обработал событие 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;
                    }
                }
            }
        });