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

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/


Opinions expressed by DZone contributors are their own.

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

{{ parent.tldr }}

{{ parent.urlSource.name }}