ExtJS отображает RowExpander только при условии - PullRequest
Новая
       45

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

2 голосов
/ 03 февраля 2012

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

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

Заранее спасибо!=)

РЕДАКТИРОВАТЬ: я нашел решение

Как было заявлено 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
});

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

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

Ответы [ 5 ]

3 голосов
/ 04 февраля 2012

Как заявил 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
});

Теперь уловка заключается в том, что для этой конкретной Grid я предпочел не разрешать указывать expandOnEnter и expandOnDblClick, поскольку RowExpander иногда не будет отображаться. Кроме того, CSS-класс ячейки сетки, в которой будет находиться значок «+», называется «x-grid3-td-expander». Это связано с тем, что класс CSS автоматически устанавливается в x-grid3-td- [id-of-column]. Итак, устанавливая id в пустую строку только тогда, когда я не рендерим rowExpander, я также удаляю серый фон ячеек, который не предлагает никакого расширения. Таким образом, нет двойного щелчка, нет ввода, нет значка, нет серого фона. Это действительно так, как будто для столбцов, в которых поле моего хранилища данных пусто (RowExpander) строго не задействован.

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

1 голос
/ 11 ноября 2015

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

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

1 голос
/ 23 октября 2013

Я думаю, что нашел более чистое решение. Дайте мне обратную связь, пожалуйста :) Я расширяю метод 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);
        }

    })
1 голос
/ 03 февраля 2012

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

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 поле в хранилище и рендер + или белыйпространство.

0 голосов
/ 10 сентября 2015

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