如何在Extjs网格中将2组分组为1组?

时间:2017-12-05 13:18:25

标签: javascript extjs extjs5

我有这个网格,并希望根据状态将2个组分组为单个组。基本上我想把" Cheched-In" "准备MA" 放在一个组中。非常感谢您的帮助!

以下是工作代码: FIDDLE

Ext.create('Ext.grid.Panel', {
title: 'Employees',
store: store,
 columns: [
  { text: 'Box', dataIndex: 'box', width: 50 },
  { text: 'Name', dataIndex: 'name', flex: 2 },
  { text: 'Status', dataIndex: 'status', flex: 1 }
],
features: [{ftype:'grouping'}],
renderTo: Ext.getBody()
});

1 个答案:

答案 0 :(得分:0)

你可以尝试使用不同的字段进行分组,试试这个

function addGroupField(data) {
  return data.map(function(row) {
    return {
      box: row.box,
      name: row.name,
      status: row.status,
      groupedStatus: [
        'Checked-In',
        'Ready for MA'
      ].indexOf(row.status) > -1 ? 'Checked-In & Ready for MA' : row.status,
    }
  });
}

var data = addGroupField([
  { box: '', name: 'Brady, Marsha',status: 'Checked-In' },
  { box: 'MA', name: 'Dwight, Schrute', status: 'With MA' },
  { box: 'MA', name: 'Jim, Halpert', status: 'With MA' },
  { box: 'MA', name: 'Mike, Brown', status: 'With MA' },
  { box: 'MA', name: 'Steve, Smith', status: 'With MA' },
  { box: 'MA', name: 'Lori, Morrison', status: 'With MA' },
  { box: 'MA', name: 'Mary, Loson', status: 'With MA' },
  { box: 'MA', name: 'Junior, Meloni', status: 'With MA' },
  { box: 'MA', name: 'Jim, Halpert', status: 'With MA' },
  { box: '', name: 'Kevin, Malone', status: 'Checked-In' },
  { box: '', name: 'Angela, Martin', status: 'Checked-In' },
  { box: '2', name: 'Jim, Halpert', status: 'Ready for MA' },
  { box: '2', name: 'Kevin, Malone', status: 'Ready for MA' },
  { box: '2', name: 'Angela, Martin', status: 'Ready for MA' }
]);

var store = Ext.create('Ext.data.Store', {
  fields: ['name', 'seniority', 'department'],
  groupField: 'groupedStatus',
  data: data
});

Ext.onReady(function() {
  Ext.create('Ext.grid.Panel', {
    title: 'Employees',
    store: store,
    columns: [
      { text: 'Box', dataIndex: 'box', width: 50 },
      { text: 'Name', dataIndex: 'name', flex: 2 },
      { text: 'Status', dataIndex: 'status', flex: 1 }
    ],
    features: [{ftype:'grouping'}],
    renderTo: Ext.getBody()
  });
});