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.

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.

1

2

3

4

5

6

7

8

Ext.define("TechZoo.model.Movie",{

extend:"Ext.data.Model",

config:{

fields:[

{name:'text',type:'string'}

]

}

});

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.

1

2

3

4

5

6

7

8

9

10

11

12

13

Ext.define('TechZoo.store.Movie',{

extend:'Ext.data.TreeStore',

storeId:'movieStore',

config:{

model:'TechZoo.model.Movie',

defaultRootProperty:'items',

proxy:{

type:'ajax',

url:'/SenchaTouchTutorials/api/movies/loadmovies.do'

}

}

});

Ext.create('TechZoo.store.Movie');

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.

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

Ext.define('TechZoo.view.MovieList',{

extend:'Ext.dataview.NestedList',

alias:'widget.movielist',

config:{

store:'Movie',

title:'Movies - by Genre',

itemTpl:'<div class="list-item-title">{title}</div>',

displayField:'text',

detailCard:true,

listeners:{

leafitemtap:function(nestedList,list,index,node,record){

varmovie=record.raw.items;

vartpl=newExt.Template(

"<p style='padding:10px;'>Movie ID : {id}</p>",

"<p style='padding:10px;'>Movie Name : {title}</p>",

"<p style='padding:10px;'>Director : {director}</p>",

"<p style='padding:10px;'>Movie Genre : {genre}</p>",

"<p style='padding:10px;'>Year Of Release : {yearOfRelease}</p>",

{compiled:true}

);

vardetailCard=nestedList.getDetailCard();

detailCard.setHtml(tpl.apply(movie));

}

}

}

});

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.

About the Author

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.
GoogleWanna Hire me ?