CODEWITHSUNDEEP
javascriptextjsextjs6
Dmitry
Dmitry

Reputation: 315

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

I have initial data with several columns. Some of positions have ParentID.

Example of data:

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

I need to form a grid with grouping by ParentID. But it the case of grouping in sencha docs it doesn't show data in columns of group's row. My expected result need to be like this (with data in columns of group row)

Expected result:

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

Does it possible in ext.js grid?

Upvotes: 0

Views: 1355

Answers (1)

NAmorim
NAmorim

Reputation: 706

Considering the expected result that you want, ExtJs has a nice treepanel component that displays data in a tree like structure. You just need to parse your data accordingly to the expected input for this component.

{
    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
         }
    ]
}

Here's an example from the Kitchen Sink samples.

Upvotes: 1

Related Questions