Blog Archive

ExtJs 4 Grid RowExpander - Expand and Collapse all rows on button click

RowExpander plugin adds the ability to have a Column with a plus and minus sign in a grid which enables a second row body than can expands or contract. By default the Row will expand or collapse if
  • selectRowOnExpand: clicked on the expander icon
  • expandOnDblClick: double clicked on the Row
  • expandOnEnter: Enter key is pressed on the selected Row


ExtJs 4 Grid RowExpander example - Expand All and Collapse All
ExtJs 4 Grid RowExpander example - Expand All and Collapse All

You can set each of the properties to true or false based on your requirement. In this example we are going to get our grid data from MySQL database using Java Servlet Ajax request. We will display some of the information on the grid row and then map the rest of the information on the Row body using the Grid plugin Ext.ux.RowExpander. Also we will add two buttons to the grid toolbar that will allow us to expand all or collapse all rows in the Grid.


ExtJs 4 Grid RowExpander example - Expand All and Collapse All

Application starting point - index.html

<html>
<head>
    <title>ExtJs 4 Grid Row Expander 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 0px 10px;
        }
    </style>
    <script type="text/javascript" src="extjs/ext-all-debug.js"></script>
    <script type="text/javascript" src="app.js"></script>

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

Application JavaScript file - app.js

Ext.Loader.setPath('Ext.ux', 'extjs/ux');

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

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

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

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

Model for the country data - Country.js

Ext.define('MyApp.model.Country', {
    extend: 'Ext.data.Model',
    fields: [
             'code',
             'name',
             'continent',
             'region',
             'lifeExpectancy',
             'gnp'
             ]
});

Store for the Grid data - Countries.js

Ext.define('MyApp.store.Countries', {
    extend: 'Ext.data.Store',
    model: 'MyApp.model.Country',
    autoLoad: true,
   
    proxy: {
        type: 'ajax',
        url: 'CountryServlet',
        reader: {
            type: 'json',
            totalProperty: 'totalCount',
            root: 'countries',
            successProperty: 'success'
        },
     }
});

Grid view source code - CountryList.js

Ext.define('MyApp.view.CountryList' ,{
    extend: 'Ext.grid.Panel',
    alias : 'widget.countryList',
    title : 'List of Countries with Row Expander',
    store : 'Countries',
    loadMask: true,
    height: 300,
    width: 600,
    margin: '10 0 0 10',
    dockedItems: [{
        xtype: 'toolbar',
        dock: 'bottom',
        items: [
                {
                    xtype : 'button',
                    text: 'Expand all Rows',
                    action: 'expand'
                },
                { 
                    xtype: 'tbseparator' 
                },
                {
                    xtype : 'button',
                    text: 'Collapse all Rows',
                    action: 'collapse'
                },
        ]
    }],
   
    plugins: [{
        ptype: 'rowexpander',
        rowBodyTpl : [
            '<b>Continent:</b> {continent}  <b>Region:</b> {region}'
        ]
    }],

    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);
    }

  
});

Application controller - Countries.js

Ext.define('MyApp.controller.Countries', {
            extend : 'Ext.app.Controller',

            //define the stores
            stores : ['Countries'],
            //define the models
            models : ['Country'],
            //define the views
            views : ['CountryList'],
           
            init : function() {
                this.control({
                   
                    'viewport > panel' : {
                        render : this.onPanelRendered
                    },
                    'countryList button[action=expand]' : {
                        click : this.onExpandAllRows   
                    },
                    'countryList button[action=collapse]' : {
                        click : this.onCollapseAllRows   
                    }
                   
                });
            },

            onPanelRendered : function() {
                //just a console log to show when the panel si rendered
                console.log('The panel was rendered');
            },
           
            onExpandAllRows : function(button) {
                console.log('Now going to expand all Rows in this Grid');
                var grid = button.up('panel');
                var store = grid.getStore();
                var expander = grid.plugins[0];
                for(var i = 0; i < store.getCount(); i++) {
                    var record = store.getAt(i);
                    if(!expander.recordsExpanded[record.internalId]){
                        expander.toggleRow(i);
                    }   
                }


            },
           
            onCollapseAllRows : function(button) {
                console.log('Now going to collapse all Rows in this Grid');
                var grid = button.up('panel');
                var store = grid.getStore();
                var expander = grid.plugins[0];
                for(var i = 0; i < store.getCount(); i++) {
                    var record = store.getAt(i);
                    if(expander.recordsExpanded[record.internalId]){
                        expander.toggleRow(i);
                    }   
                }

            }
    });

Eclipse Project Explorer view


ExtJs 4 Grid RowExpander example - Expand All and Collapse All

Country Servlet Sample JSON data Response


ExtJs 4 Grid RowExpander example - Expand All and Collapse All

11 comments :

  1. Hi,

    nice post!!

    Can you help me out to place Grid inside a grid(Nested grid)..


    Thanks in advance

    ReplyDelete
  2. If you need Nested Grid, it's better to use a Tree Grid. See this example

    ExtJs Tree with Column Headers

    ReplyDelete
  3. This comment has been removed by the author.

    ReplyDelete
  4. Charan Tej: Here is an example of nested grid:

    Hope this will help you:

    http://jsfiddle.net/slimjack/XFGBM

    ReplyDelete
  5. This is an awesome post and helped me alot. Thanks for posting!

    ReplyDelete
  6. The sop marketing management is very helpful in programming for your project. This is the best way to enhance the knowledge you have.

    ReplyDelete