0

我需要将 groupHeaderTpl 更改为 groupingField 值。就我而言，我通过一个布尔字段进行分组。我怎样才能做到这一点？

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

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

2 回答 2

3

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

在你的页面中引入一个调试函数“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 网格分组示例稍微修改的示例。（参见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 从组中的第一行中提取您想要的列值

我希望这对你有帮助。

于 2012-08-23T18:45:57.330 回答
1

您可能想尝试以下方法：

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

这适用于我的 Ext JS 4.2（虽然我还没有用 4.1 验证它，但文档也描述了 groupValue）。

高温高压

于 2013-09-28T21:10:07.507 回答