Loiane Groner, Brazilian, works as a Java/ Sencha evangelist. She has 7+ years of experience in web development. She is the ESJUG (Espirito Santo Java Users Group) and CampinasJUG (Campinas Java Users Group) leader and coordinator. Loiane is passionate about technology and programming. Also author of ExtJS 4 First Look book. Loiane is a DZone MVB and is not an employee of DZone and has posted 42 posts at DZone. You can read more from them at their website. View Full User Profile

Populating an ExtJS DataGrid + RowExpander using Spring MVC 3

06.10.2010
| 14527 views |
  • submit to reddit

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({
root:'books'
},
[{name: 'id'},
{name: 'title'},
{name: 'publisher'},
{name: 'isbn10'},
{name: 'isbn13'},
{name: 'link'},
{name: 'description'},
])
});

And a method in the server to retrieve the data:

@Controller
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;
}

@Autowired
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: [
expander,
{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:

<html>
<head>
<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>
</head>
<body>
<br>
<div id="gridBooks" align="center"></div>
</body>
</html>

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/

Published at DZone with permission of Loiane Groner, author and DZone MVB.

(Note: Opinions expressed in this article and its replies are the opinions of their respective authors and not those of DZone, Inc.)

Tags:

Comments

Young Jiandong replied on Mon, 2010/06/14 - 9:35am

i use jetty embed to run ,it show follow info:

No mapping found for HTTP request with URI [/we/getBooks.action] in DispatcherServlet with name 'extjs-rowexpander'

'we' is  context name that i defined in code:

        Server server = new Server();
        SocketConnector connector = new SocketConnector();
        connector.setMaxIdleTime(1000 * 60 * 60);
        connector.setSoLingerTime(-1);
        connector.setPort(8081);
        server.setConnectors(new Connector[] { connector });

        WebAppContext appContext = new WebAppContext();
        appContext.setServer(server);
        appContext.setContextPath("/we");
        appContext.setWar("WebContent/");
 

Michael Eric replied on Wed, 2012/09/26 - 3:41pm

Great article, have you thought about an expand all and collapse all rows option?

linux archive 

Raj Dzone replied on Fri, 2013/05/03 - 5:29am

tried out this example and its working fine.i have a problem when i append

<font size ="+"\""+6+"\""> tag  to description.

the description gets overlapped.


Attached the screenshot.


Comment viewing options

Select your preferred way to display the comments and click "Save settings" to activate your changes.