Populating an ExtJS DataGrid + RowExpander using Spring MVC 3

May 13, 2010 | By | 8 Comments

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

ExtJS RowExpander Spring3 Loiane 01 Populating an ExtJS DataGrid + RowExpander using Spring MVC 3

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

Happy Coding!

Filed in: ExtJS | Tags: , , , , , , ,

Comments (8)

Links to this Post

  1. extjstutorial.org | May 7, 2011
  1. SmedDawg

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

  2. Malhar

    Nice posts!!!
    The things you implemented, really help us.

  3. rsat

    Is there any way to expand all the rows by default?

  4. Saritha

    Hi

    While trying this example, when I run the url, i am getting  data below

    {“success”:true,”totalCount”:16,”applications”:[{“applYear”:2011,”applicationId”:4,”createDate”:{“date”:29,”day”:3,”hours”:14,”minutes”:44,”month”:5,”nanos”:0,”seconds”:38,”time”:1309373078000,”timezoneOffset”:240,”year”:111},”dob”:{“date”:29,”day”:3,”hours”:14,”minutes”:44,”month”:5,”nanos”:0,”seconds”:38,”time”:1309373078000,”timezoneOffset”:240,”year”:111},”firstName”:”User3″,”lastName”:”LastName”,”middleName”:”MiddleName”,”sex”:”F “},{“applYear”:2012,”applicationId”:24,”createDate”:{“date”:29,”day”:3,”hours”:14,”minutes”:53,”month”:5,”nanos”:0,”seconds”:50,”time”:1309373630000,”timezoneOffset”:240,”year”:111},”dob”:{”

    Am I missing anything.

    Saritha

  5. Saritha

    Hi

    I was wrongly running the url, instead of jsp file which has all extjs scripts, i was calling only view.action from browser.

    now i am getting the gird fine.

    thanks for your imm reply.

    Thanks
    Saritha.

Leave a Reply

Trackback URL | RSS Feed for This Entry