Come mostrare un valore di campo diverso in un'intestazione di raggruppamento della griglia Ext?

Question

Possiedo un Ext.grid.Panel che vorrei raggruppato in base a un campo, ma per visualizzare un campo diverso nell'intestazione di raggruppamento. Ad esempio, se il mio modello ha campi status_id e status_name, mi piacerebbe raggruppare per status_id, ma mostrare status_name nell'intestazione del gruppo.

Ho giocato con l'opzione groupHeaderTpl ma finora non ho avuto fortuna. Come si può fare?

Answer 1

È possibile eseguire il debug i valori grouperHeaderTpl facendo

groupHeaderTpl:'{[console.log(values)]}' 

In questo modo è possibile osservare tutti i valori posible e selezionare il percorso corretto per ottenere il valore che si sta cercando. In questo caso ciò che devi fare è

groupHeaderTpl: '{[values.rows[0].data.status_name]}' 

Qui potete trovare l'intero esempio

/* Sample Data */ 
var data = [ 
     { "status_id": 1, "status_name": "Pending"}, 
     { "status_id": 2, "status_name": "Ready"}, 
     { "status_id": 3, "status_name": "Processing"}, 
     { "status_id": 4, "status_name": "Unavailable"}, 
     { "status_id": 5, "status_name": "Ready"}, 
     ]; 

/* Model */ 
Ext.define("StatusModel", { 
    extend: 'Ext.data.Model', 
    fields: ['status_id', 'status_name'] 
}); 

/* Store */ 
Ext.create('Ext.data.Store', { 
storeId:'statusStore', 
model: "StatusModel", 
groupField: 'status_id', 
data: data, 
proxy: { 
    type: 'memory', 
    reader: { 
     type: 'json' 
    } 
} 
}); 

/* Grouping Feature */ 
var groupingFeature = Ext.create('Ext.grid.feature.Grouping',{ 
    groupHeaderTpl: '{[values.rows[0].data.status_name]}' 
}); 

/* Grid Panel */ 
Ext.create('Ext.grid.Panel', { 
title: 'Status', 
store: Ext.getStore('statusStore'), 
columns: [ 
    { text: 'Id',  dataIndex: 'status_id' }, 
    { text: 'Name', dataIndex: 'status_name', flex: 1} 
], 
features: [groupingFeature], 
renderTo: Ext.getBody() 
}); 

http://jsfiddle.net/alexrom7/shZLf/1/