Over a million developers have joined DZone.

Populating an ExtJS DataGrid + RowExpander using Spring MVC 3

DZone's Guide to

Populating an ExtJS DataGrid + RowExpander using Spring MVC 3

· Java Zone
Free Resource

Managing a MongoDB deployment? Take a load off and live migrate to MongoDB Atlas, the official automated service, with little to no downtime.

This tutorial will walk through how to implement an ExtJS DataGrid with RowExpander plugin using Spring MVC Framework version 3 in the server side.

Sometimes you need to show more information than fits within the grid, as an expansion of the record/row. ExtJS DataGrid component provides a plugin called RowExpander, which does exactly what its name says and I just described before.

It is very simple to use.

Let’s say you want to show information about some books. The following class represents your data (it is a POJO):

public class Book {

private int id;
private String title;
private String publisher;
private String ISBN10;
private String ISBN13;
private String link;
private String description;

But you do not want to show all the attributes within the grid. You just want to show the book title and the publisher, and if the user wants to know more about that book, he/she has to expand the row. First, let’s declare a JSON store to get data from server. You can configure the store normally, as all the data is going to be a column in the datagrid.

var store = new Ext.data.Store({
proxy: new Ext.data.HttpProxy({
url: 'getBooks.action'
reader: new Ext.data.JsonReader({
[{name: 'id'},
{name: 'title'},
{name: 'publisher'},
{name: 'isbn10'},
{name: 'isbn13'},
{name: 'link'},
{name: 'description'},

And a method in the server to retrieve the data:

public class BookController {

private BookService bookService;

* Get all the books from "database" to display on
* ExtJS data grid
* @return JSON object
@RequestMapping(value="getBooks.action", method = RequestMethod.GET)
public @ResponseBody Map<String,? extends Object> view() {

List<Book> books = bookService.getBooks();

Map<String,Object> modelMap = new HashMap<String,Object>();
modelMap.put("books", books);

return modelMap;

public void setBookService(BookService bookService) {
this.bookService = bookService;

To learn more about Spring 3 annotations and how to retrieve data from server in JSON data format, please read: http://blog.springsource.com/2010/01/25/ajax-simplifications-in-spring-3-0/

Let’s declare the datagrid:

var gridBooks = new Ext.grid.GridPanel({
store: store,
cm: new Ext.grid.ColumnModel({
defaults: {
sortable: true,
width: 200
columns: [
{header: "Title", dataIndex: 'title'},
{header: "Publisher", dataIndex: 'publisher'}
width: 430,
height: 270,
plugins: expander,
title: 'ExtJS Books',
renderTo: 'gridBooks'

You need to declare the rowExpander plugin as a column (first one – line  9), just like you need to do when you use ColumnModel (checkbox), and you also need to declare it as a plugin (line 16).

And now, let’s take a look how to declare the plugin:

var expander = new Ext.ux.grid.RowExpander({
tpl : new Ext.Template(
'<br><p><b>ISBN10:</b> {isbn10}</p><br>',
'<p><b>ISBN13:</b> {isbn13}</p><br>',
'<p><b>Link:</b> <a href="{link}" target="_blank">{link}</a></p><br>',
'<p><b>Description:</b> {description}</p>'

Let you imagination flow and create the expansion you want using HTML or anything Ext.Template enables you to do!

Don’t forget to import RowExpander javascript file:

<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Row Expander + Spring</title>

<!-- ExtJS css -->
<link rel="stylesheet" type="text/css" href="/extjs-rowexpander/ext-3.2.1/resources/css/ext-all.css" />

<!-- ExtJS js -->
<script src="/extjs-rowexpander/ext-3.2.1/adapter/ext/ext-base.js"></script>
<script src="/extjs-rowexpander/ext-3.2.1/ext-all.js"></script>

<script type="text/javascript" src="/extjs-rowexpander/ext-3.2.1/examples/ux/RowExpander.js"></script>

<!-- App js -->
<script type="text/javascript" src="/extjs-rowexpander/js/books-grid-row-expander.js"></script>
<div id="gridBooks" align="center"></div>

You can download the complete project from my GitHub repository: http://github.com/loiane/extjs-rowexpander

From http://loianegroner.com/2010/05/populating-an-extjs-datagrid-rowexpander-using-spring-mvc-3/

MongoDB Atlas is the easiest way to run the fastest-growing database for modern applications — no installation, setup, or configuration required. Easily live migrate an existing workload or start with 512MB of storage for free.


Opinions expressed by DZone contributors are their own.


Dev Resources & Solutions Straight to Your Inbox

Thanks for subscribing!

Awesome! Check your inbox to verify your email so you can start receiving the latest in tech news and resources.


{{ parent.title || parent.header.title}}

{{ parent.tldr }}

{{ parent.urlSource.name }}