Sencha Touch NestedList with Spring MVC integration

Sencha Touch’s NestedList component is very handy when it comes to show hierarchical data with some relation. We usually use NestedList when we have data in a child-parent relationship as a tree, where you have a node and many leafs associate to that node. Each leaf itself is a node which has many leafs associate to it.

I am using my previous Movie classes and categories them as MovieGenre. Based on each genre, user will select one and it will show the entire movie list associate to that Genre. User can tap to any movie list item and it will be shown with Movie Details, which is a last leaf in the hierarchy.

Note: This article is a part of my Sencha Touch posts that I was doing for a while and if you miss the earlier posts then I recommend you to go thought them before you proceed with this post.

Sencha Touch List integration with Spring MVC framework

Sencha Touch List with ‘Load More’ plugin

First step is to create a Movie java class which is not more then a POJO.

Next is a MovieDatabase java class which we used to hold few Movie objects.

And now most important class is ItemVO. This class is used to create a hierarchy between movie objects.

Create a MovieService class which helps in showing Movie objects in hierarchy.

And last is our Spring Controller which will take the request from ExtJS store and return the Movie List.

Here we end with Java part and let me quickly show you what you need to create a NestedList in Sencha Touch.

First of all, create a Model like below.

Next, create a store which has the reference of Model in it and define proxy. Please note the proxy url is same as spring controller @RequestMapping value. Also observe that our store is extending Ext.data.TreeStore instead of Ext.data.Store.

Now, create Ext.dataview.NestedList which has the store reference and a listener to leafitemtap event. Pay attention to detailCard : true snippet. If its true then after clicking on last node in the tree, it shows a Ext.Container with last leaf details.

Output:

On initial launch you will see below…

Click on any of the Movie genre and it will load all the movies available on genre.

Now select any movie and you will see its details in a detailCard container like below.

I hope you enjoy the post. Happy coding 🙂

About the Author

has written 68 posts.

I Love Coding, Analyzing, Designing and doing it the right way. I am obsessed about learn anything new daily and sharing what I have learn each Day. This Blog is journey of my Zeal, going through step by step to the mountain of desire to become prefect. Google Wanna Hire me ?

Copyright © 2017 http://www.techzoo.org. All rights reserved.
Proudly powered by WordPress. Developed by 7Tech Solutions