Blog Archive

ExtJs 4 Grid RowBody feature - Display additional information

RowBody feature in the Grid is useful when you have data that you want to display below the grid row. Say for example you have a list of orders and would like to display the customer information or special comments etc. RowBody feature is hidden unless you override getAdditionalData method. When you use the RowBody feature it will add a new table row with table data and a div to place the data. Here are some screen shots ...

RowBody Grid feature in ExtJs 4
RowBody Grid feature in ExtJs 4

Application starting point - index.html

    <title>ExtJs 4 Grid RowBody feature Example </title>

    <link rel="stylesheet" type="text/css" href="extjs/resources/css/ext-all.css">
    <link rel="stylesheet" type="text/css" href="extjs/ux/css/CheckHeader.css">
    <style type="text/css">
    .x-grid-rowbody {
            margin: 5px 0px 10px 20px;
    .x-grid-row .x-grid-cell {
            border-width: 0px 0;
    .bg-snow td{ 
            background:#eee9e9 !important; 
            border-width: 1px 1px 1px 1px;
    <script type="text/javascript" src="extjs/ext-all-debug.js"></script>
    <script type="text/javascript" src="app.js"></script>


ExtJs application file - app.js

    enabled: true 


    name: 'MyApp',
    appFolder: 'app',
    controllers: [

    launch: function() {
        Ext.create('Ext.container.Viewport', {
            items: [
                    xtype: 'countryList',

Grid layout with RowBody feature - CountryList.js

Ext.define('MyApp.view.CountryList' ,{
    extend: 'Ext.grid.Panel',
    alias : 'widget.countryList',
    title : 'List of Countries with RowBody Feature',
    store : 'Countries',
    loadMask: true,
    height: 400,
    width: 600,
    margin: '10 0 0 10',
    viewConfig: {
        getRowClass: function(record, rowIndex, rowParams, store) {
            if(!record) return '';
            return (rowIndex % 2) ? 'bg-snow' : this.rowBodyCls;
    features: [
        Ext.create('Ext.grid.feature.RowBody', {
            getAdditionalData : function(data, rowIndex, record, orig) {
                var headerCt = this.view.headerCt;
                var colspan = headerCt.getColumnCount();
                return {
                    rowBody : '<b>Continent:</b> ' + record.get('continent') +
                    ' <b>Region:</b>&nbsp;' + record.get('region') +
                    '<br/>Some bla bla bla for record on row number ' + rowIndex,
                    rowBodyCls : (rowIndex % 2) ? 'bg-snow' : this.rowBodyCls,
                    rowBodyColspan : colspan

    initComponent: function() {
        this.columns = [
            {header: 'Country Code', dataIndex: 'code',  flex: 1},
            {header: 'Name', dataIndex: 'name', flex: 2},
            {header: 'Life Expectancy', dataIndex: 'lifeExpectancy', flex: 1},
            {header: 'GNP', dataIndex: 'gnp', flex: 1}



  1. Excellent blog post. I would like to express thank you for motivating and useful information and I like your point of analysis. Thank you! I love to read this type of material good and attractive information I take from it. Thank you for posting such a fine article.Backed by a latest infrastructural set up, Bus back panel advertising in Pune are providing a best quality affirmed cluster of Bus Panel Ad in the business sector. Gifted experts check these administrations on different procurement's of value with a specific end goal to give surrender unfenced at customer end.

  2. Great. I think it is the trend of the future when everything is connected. This technology is an important part of controlling everything connected. I will share with everyone about this issue.

  3. Hi,
    Thank you so mush. Can you help me in expanding/collapsing extra rows when we click on main row