在 extjs 中分组（数据在组行的列中）

Question

我有几列的初始数据。一些职位有 ParentID。

数据示例：

|  ID   | ParentID  |   Title   |    Info     |      Date     |
|-------|-----------|-----------|-------------|---------------|
|  101  |    Null   |  Title101 |    text     |   01.01.1990  |
|  102  |    Null   |  Title102 |    text     |   01.01.1990  |
|  103  |    101    |  Title103 |    text     |   01.01.1990  |
|  104  |    101    |  Title104 |    text     |   01.01.1990  |
|  105  |    101    |  Title105 |    text     |   01.01.1990  |
|  106  |    102    |  Title106 |    text     |   01.01.1990  |
|  107  |    Null   |  Title107 |    text     |   01.01.1990  |

我需要通过 ParentID 分组形成一个网格。但是在 sencha docs 分组的情况下，它不会在组行的列中显示数据。我的预期结果需要像这样（数据在组行的列中）

预期结果：

|   Title      |     Info    |   Date        |
|--------------|-------------|---------------|
| - Title101   |    text     |   01.01.1990  |
|     Title103 |    text     |   01.01.1990  |
|     Title104 |    text     |   01.01.1990  |
|     Title105 |    text     |   01.01.1990  |
| - Title102   |    text     |   01.01.1990  |
|     Title106 |    text     |   01.01.1990  |
|   Title1017  |    text     |   01.01.1990  |

在 ext.js 网格中可以吗？

Answer 1

考虑到您想要的预期结果，ExtJs 有一个很好的 treepanel 组件，它以树状结构显示数据。您只需要根据该组件的预期输入来解析您的数据。

{
    xtype: 'treepanel',
    rootVisible: false,
    store: Ext.create('Ext.data.TreeStore', {
        // Store definition here
    }),
    columns: [
         {
            xtype: 'treecolumn', // Set this xtype here to display
            text: 'Title',       // data in this column as a tree  
            dataIndex: 'title',
            flex: 1
         }, 
         {
            text: 'Info',
            dataIndex: 'info',
            width: 100  
         },
         {
            text: 'Date',
            dataIndex: 'date',
            width: 100
         }
    ]
}

这是厨房水槽样本中的 example。

在 extjs 中分组（数据在组行的列中）

Grouping in extjs (with data in columns of group row)

javascript

extjs

extjs6