Over a million developers have joined DZone.

Populating an ExtJS DataGrid + RowExpander using Spring MVC 3

· Java Zone

Navigate the Maze of the End-User Experience and pick up this APM Essential guide, brought to you in partnership with CA Technologies

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/

Thrive in the application economy with an APM model that is strategic. Be E.P.I.C. with CA APM.  Brought to you in partnership with CA Technologies.


Opinions expressed by DZone contributors are their own.

The best of DZone straight to your inbox.

Please provide a valid email address.

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