Làm cách nào để hiển thị giá trị của trường khác trong tiêu đề nhóm lưới mở rộng?

Question

Tôi có một Ext.grid.Panel mà tôi muốn nhóm theo một trường, nhưng để hiển thị một trường khác trong tiêu đề nhóm. Ví dụ: nếu mô hình của tôi có các trường status_id và status_name, tôi muốn nhóm theo status_id, nhưng hiển thị số status_name trong tiêu đề nhóm.

Tôi đã chơi xung quanh với tùy chọn groupHeaderTpl nhưng không may mắn cho đến thời điểm này. Điều này có thể giải quyết như thế nào?

Answer 1

Bạn có thể gỡ lỗi các giá trị grouperHeaderTpl bằng cách làm

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

Bằng cách đó bạn có thể quan sát tất cả các giá trị posible và chọn con đường đúng để có được những giá trị mà bạn đang tìm kiếm. Trong trường hợp này những gì bạn cần làm là

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

Ở đây bạn có thể tìm thấy toàn bộ ví dụ

/* 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/