Ext JS 4.1中的条件GroupHeaderTpl

我需要将groupHeaderTpl更改为groupingField值。在我的情况下，我通过布尔字段进行分组。我该怎么做？我尝试了下面添加的变体，但无法实现我的目标。Ext JS 4.1中的条件GroupHeaderTpl

如果有人能帮助我，我会很开心吗？谢谢我前进。

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

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

来源

2012-07-26 talha06

如果下面的回答也帮不了你，这里是你可以用它来调试的技术：

在你的页面介绍调试功能“的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 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从组中的第一行中提取所需列值

我希望能帮到你。

来源

2012-08-23 18:45:57 JohnHarp

我认为我们不能使用'values.row [n] .field'来测试语句。因为字段值总是变化..分组功能通过'{name}'变量给我们分组字段值。我们所需要的是创建一个有效的tpl来测试它。我试过这个'groupHeaderTpl：'{name}？ “共享文档”：“您的文档”“，但它根本不起作用。 – talha06 2012-08-23 20:03:26

请注意，如果组中的所有行按“字段”分组，value.row [n] .field将具有相同的值，因此它*可以使用values.row [0] .field作为他们被分组。您想使用values.row [n] .field而不是{name}的原因是在{[...]}括号内，{name}不可用。而且，您需要{[...]}括号才能够使用if和“？”等测试。三元运算符。 – JohnHarp 2012-08-23 20:28:53

'shared'是我的分组字段，它是一个布尔字段。我之前完成了这个工作：'groupHeaderTpl：'{[values.rows [0] .shared？ “共享文档”：“您的文档”]}'''但是这并不起作用。它总是呈现“您的文档”。此外，我尝试过的字符串比较也没有奏效.. – talha06 2012-08-24 06:45:47

你可能想尝试以下操作：

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

这对我的作品与Ext JS的4.2（虽然我还没有与4.1证实此事，该documentation还介绍groupValue）。

HTH

来源

2013-09-28 21:10:07 ps84

Ext JS 4.1中的条件GroupHeaderTpl

回答

相关问题