Экран ExtJS RowExpander только при условии

Question

В настоящее время у меня довольно большая сетка, и я успешно использую плагин RowExpander для отображения дополнительной информации о некоторых строках. Моя проблема заключается в том, что не все строки содержат вышеупомянутую дополнительную информацию, и я не хочу, чтобы RowExpander был активным или не показывал значок «+», если запись определенного хранилища данных пуста. Я попытался использовать обычное свойство «renderer» в объекте RowExpander, но это не сработало.

Итак, как вы можете видеть значок и двойной щелчок RowExpander, показанный и активированный, только если поле определенного хранилища данных! = ""?

Заранее благодарен! =)

EDIT: Я нашел решение

как е-цинк заявил, часть раствора (для меня по крайней мере) должен был обеспечить пользовательский визуализатор, который будет проверять мое условное поле. Вот мой 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 и expanOnDblClick с RowExpander не иногда быть оказаны. Кроме того, класс CSS ячейки сетки, который будет содержать значок «+», это «x-grid3-td-expander». Это связано с тем, что класс CSS автоматически устанавливается в x-grid3-td- [id-of-column]. Таким образом, установив id в '' только тогда, когда я не выдаю rowExpander, я также удаляю серый фон не-визуализированных ячеек. Таким образом, нет двойного щелчка, нет ввода, нет значка, нет серого фона. Это действительно так, как если бы не было RowExpander для столбцов, где мое поле хранилища данных пусто (когда мне не нужен RowExpander).

Это сделало трюк для меня. Для кого-то, кто хочет сохранить идентификатор ячейки, или который хочет сохранить двойной щелчок и ввести события, работающие, нет ничего другого, кроме расширения класса, который я предполагаю. Надеюсь, это поможет другим людям застрять в том положении, в котором я был!

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

Это сделало трюк для меня. Для кого-то, кто хочет сохранить идентификатор ячейки, или который хочет сохранить двойной щелчок и ввести события, работающие, нет ничего другого, кроме как продлить класс 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 мне обратную связь пожалуйста :) Выражаю метод toggleRow из RowExpander и если я соответствовать условию, избегают, чтобы переключить 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'; } },

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