Условие внутри Ext JS 4.1 GroupHeaderTpl

Мне нужно изменить groupHeaderTpl на значение groupingField. В моем случае я группирую через логическое поле. Как я могу это сделать? Я пробовал варианты, которые я добавил ниже, но не смог достичь своей цели.

Я буду рад, если кто-то может мне помочь? Спасибо, я продвигаюсь.

groupHeaderTpl: '{name}=="true" ? Shared : Your own'

groupHeaderTpl: '[{name}=="true" ? Shared : Your own]'

grid grouping extjs4 extjs4.1
person talha06    schedule 26.07.2012    source источник

Ответы (2)


arrow_upward
3
arrow_downward

Если приведенный ниже ответ вам не поможет, вот метод, который вы можете использовать для отладки:

Добавьте на свою страницу функцию отладки «objectToString»:

function ObjectToString(object) {
    var string;
    var name;

    for (name in object) {
        if (typeof object[name] !== 'function') {
            string += "{\"" + name + "\": \"" + object[name] + "\"}<br />";
        }
    }

    return string;
}

Затем используйте эту функцию, чтобы вывести атрибуты в объекте values.rows[0], чтобы вы могли видеть, доступны ли нужные столбцы/значения для теста:

var groupingFeature = Ext.create('Ext.grid.feature.Grouping',{
groupHeaderTpl: 'Debug: {[ObjectToString( values.rows[0] ) ]}',
    hideGroupedHeader: true
});

Когда это используется для отладки приведенного ниже примера, вы можете получить этот вывод отладки:

Пример вывода отладки

Итак, из этого вы можете видеть, что установка свойства «id» столбца, по которому я группирую, делает имя столбца доступным в массиве values.rows, чтобы я мог проверить его значение.

Опять же, надеюсь, что эта техника и приведенный ниже оригинальный образец помогут.

==== Исходный пример ниже перед отладкой кода ====

Вот пример, немного измененный из примера группировки сетки Sencha. (См. сайт сенчи, пример группировки сетки).

var groupingFeature = Ext.create('Ext.grid.feature.Grouping',{
groupHeaderTpl: 'Cuisine: {[ values.rows[0].cuisine == "American" ? "North American" : values.rows[0].cuisine ]}',
    hideGroupedHeader: true
});

var grid = Ext.create('Ext.grid.Panel', {
    renderTo: Ext.getBody(),
    collapsible: true,
    iconCls: 'icon-grid',
    frame: true,
    store: Restaurants,
    width: 600,
    height: 400,
    title: 'Restaurants',
    resizable: true,
    features: [groupingFeature],
    columns: [{
        text: 'Name',
        flex: 1,
        dataIndex: 'name'
    },{
        text: 'Cuisine',
        id: 'cuisine',    // NOTE: you must assign an id here
        flex: 1,
        dataIndex: 'cuisine'
    }],
    fbar  : ['->', {
        text:'Clear Grouping',
        iconCls: 'icon-clear-group',
        handler : function(){
            groupingFeature.disable();
        }
    }]
});

Следует помнить следующее:

  1. Установите атрибут «id» в определениях столбцов, иначе вы не сможете ссылаться на эти столбцы в groupHeaderTpl.
  2. Используйте {[ ... ]} в groupHeaderTpl, чтобы запустить произвольный javascript для выполнения ваших проверок.
  3. Используйте value.rows[0].FIELDNAME, чтобы извлечь нужное значение столбца из первой строки в группе.

Я надеюсь, что это поможет вам.

person JohnHarp    schedule 23.08.2012
comment
Я думаю, что мы не можем использовать values.row[n].field для проверки операторов. Потому что значение поля всегда меняется. Функция группировки дает нам значение поля группировки по переменной {name}. Все, что нам нужно, это создать действующий tpl для его проверки. Я пробовал этот groupHeaderTpl: '{name} ? "Shared Documents" : "Your Documents"', но он вообще не работал.. - person talha06; 24.08.2012
comment
Обратите внимание, что все строки в группе будут иметь одинаковое значение для values.row[n].field, если они сгруппированы по полю, поэтому можно использовать values.row[0].field для поля, на котором они сгруппированы. Причина, по которой вы хотите использовать values.row[n].field вместо {name}, заключается в том, что в скобках {[ ... ]} {name} недоступно. И вам нужны скобки {[ ... ]}, чтобы иметь возможность использовать такие тесты, как if и ? тернарный оператор. - person JohnHarp; 24.08.2012
comment
shared - это мое поле группировки, которое является логическим полем. Я делал это раньше: groupHeaderTpl: '{[values.rows[0].shared ? "Shared Documents" : "Your Documents"]}'' Но это тоже не сработало. Всегда отображаются ваши документы. Также я пробовал сравнение строк, которое тоже не сработало. - person talha06; 24.08.2012
comment
Один из возможных источников проблем — вы установили атрибут id общего столбца? Если вы не установите идентификатор столбца, он получит сгенерированный идентификатор, и вы не сможете получить доступ к его значению через values[0].shared. См. приведенный выше пример кода, в котором для столбца, сгруппированного по столбцу с dataIndex, идентификатор кухни также установлен как кухня, поэтому он будет доступен как values[0].cuisine в шаблоне заголовка группы. - person JohnHarp; 25.08.2012

arrow_upward
1
arrow_downward

Вы можете попробовать следующее:

groupHeaderTpl: '{[values.groupValue ? "Shared" : "Your own"]}'

Это работает для меня с Ext JS 4.2 (хотя я не проверял это с 4.1, документация также описывает groupValue).

ХТН

person ps84    schedule 28.09.2013