Question

我需要将groupHeaderTpl更改为groupingField值。在我的例子中，我通过布尔字段进行分组。我怎样才能做到这一点？我尝试了下面添加的变体，但无法实现我的目标。

如果有人可以帮助我，我会很高兴吗？谢谢我的进步。

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

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

Answer 1

如果以下答案对您没有帮助，可以使用以下技术进行调试：

在页面中引入调试函数“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
});

当这用于调试下面的示例时，您可以获得此调试输出：

Example of debugging output

因此，通过设置我正在分组的列的“id”属性，您可以看到，这使得列名称在values.rows数组中可用，因此我可以测试其值。

再次，希望这项技术和以下原始样本有所帮助。

====调试代码之前的原始示例====

这是从Sencha网格分组示例略微修改的示例。（见sencha site, grid grouping example）。

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

要记住的事情是：

在列定义中设置“id”属性，否则您将无法在groupHeaderTpl中引用这些列
使用groupHeaderTpl中的{[...]}运行一些任意的javascript来执行检查
使用value.rows [0] .FIELDNAME从组中的第一行中提取所需的列值

我希望能帮助你。

Answer 2

您可能想尝试以下方法：

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

这适用于我使用Ext JS 4.2（虽然我没有用4.1验证它，documentation也描述了groupValue）。

HTH

Ext JS 4.1 GroupHeaderTpl中的条件

2 个答案: