How to get the Row Headers functionality in ExtJs?

Question

I want to render something like depicted below :

+-----------------+------------+---------------+
|                 |  Column 1  |    Column 2   |
+------------------------------+---------------+
|  Row Header 1   |    ...     |               |
+------------------------------+---------------+
|  Row Header 2   |            |               |
+------------------------------+---------------+
|  Row Header 3   |            |               |
+----------------------------------------------+

I understand the way to achieve the column headers, there are lot of documentation available as well. e.g. http://docs.sencha.com/extjs/4.2.3/extjs-build/examples/build/KitchenSink/ext-theme-neptune/#grouped-header-grid

But I couldn't get the one for having Row Headers. How do I achieve it and render the data corresponding to row and column attributes, say from Jason file?

Alexander Alexander · Accepted Answer · 2014-09-25T12:41:16

So, your grid would have three columns:

columns:[{
    dataIndex:'rowHeader'
},{
    text:'Column 1',
    dataIndex:'column1'
},{
    text:'Column 2',
    dataIndex:'column2'
}]

and load the data from a store with the model fields:['rowHeader','column1','column2']

which would, if it is a JSON store, expect the data to be submitted to him by the server in the format

{success:true,data:[
    {rowHeader:'RowHeader 1',column1:'',column2:''},
    {rowHeader:'RowHeader 2',column1:'',column2:''},
    {rowHeader:'RowHeader 3',column1:'',column2:''}
]}

If you want to display data that comes in other formats than that, e.g. the format often used for sparse matrices:

{rowHeader:'RowHeader 1',columnHeader:'ColumnHeader 1',value:''},
{rowHeader:'RowHeader 2',columnHeader:'ColumnHeader 1',value:''},
{rowHeader:'RowHeader 3',columnHeader:'ColumnHeader 1',value:''},
{rowHeader:'RowHeader 1',columnHeader:'ColumnHeader 2',value:''},
{rowHeader:'RowHeader 2',columnHeader:'ColumnHeader 2',value:''},
{rowHeader:'RowHeader 3',columnHeader:'ColumnHeader 2',value:''},
{rowHeader:'RowHeader 1',columnHeader:'ColumnHeader 3',value:''},
{rowHeader:'RowHeader 2',columnHeader:'ColumnHeader 3',value:''},
{rowHeader:'RowHeader 3',columnHeader:'ColumnHeader 3',value:''}

you will have to manually transform the data into aforementioned format, because ExtJS grid just can't process any format that does not have one record per row.

If you would like to know how to make the RowHeader cells look like headers:

Basically, it comes down to defining a tdCls, and possibly also a renderer, on the column. You may want to have a look at the api docs at http://docs.sencha.com/extjs/4.2.2/#!/api/Ext.grid.column.Column-cfg-tdCls and at http://docs.sencha.com/extjs/4.2.2/#!/api/Ext.grid.column.Column-cfg-renderer

Then, there is the How To Style ExtJS Grid Cells guide at http://skirtlesden.com/articles/styling-extjs-grid-cells

How to get the Row Headers functionality in ExtJs?

2 Answers