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

回答

相關問題