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

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.