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

<html>
<head>
    <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;
        }
    </style>
    <script type="text/javascript" src="extjs/ext-all-debug.js"></script>
    <script type="text/javascript" src="app.js"></script>

</head>
<body></body>
</html>

ExtJs application file - app.js

Ext.Loader.setConfig({ 
    enabled: true 
    });

Ext.require([
             'Ext.data.*',
             'Ext.grid.*',
         ]);

Ext.application({
   
    name: 'MyApp',
    appFolder: 'app',
    controllers: [
                  'Countries'
              ],

    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}
        ];
   
        this.callParent(arguments);
    }

  
});

No comments:

Post a Comment

NO JUNK, Please try to keep this clean and related to the topic at hand.
Comments are for users to ask questions, collaborate or improve on existing.