PDA

View Full Version : Make every Nested List item selectable to go to detail page



martinbroos
27 Apr 2011, 1:56 AM
Hi

I'm still noobing around Sencha Touch for a couple of weeks now. What i'm trying to do is to create a menu of three layers deep loaded from a json file.

The problem is how do i make every item selectable / clickable and use onItemDisclosures to go deeper into the nested list? Is this at all possible?

As i understand you can only have 1 leaf element in each structure and this should be the last one in each tree. In my case every item should be clickable and be linked to a detail page where i can get the matching information.

Hopefully someone can get me out of this trouble and maybe show me some sample code or a help on my way. As this is for my graduation project that i'm doing about sencha.

Thanks in advance

happysokki
27 Apr 2011, 5:58 AM
You could extend Ext.NestedList
e.g.


Ext.ns('Ext.ux');
Ext.ux.NestedList = Ext.extend(Ext.NestedList, {
onItemDisclosure: true,
onItemTap: function(subList, subIdx, el, e){
if (e.getTarget().className == 'x-list-disclosure') {
Ext.ux.NestedList.superclass.onItemTap.call(this, subList, subIdx, el, e);
} else {
// do whatever you want
}
}
});

martinbroos
27 Apr 2011, 6:02 AM
At this moment i made a work around by using the normal List. In list one i load the main items when you click on the disclosure button it loads the second list with the subitems.

This method is not ideally cause it reuses a lot of code + i can't get it working to show only the items that belong to that particular main item.

Still any help is welcome on either of the two methods.

martinbroos
28 Apr 2011, 12:44 AM
Thanks HappySokki that did the trick.
Didn't know that you could add custom handlers that easly!

But i do have another problem. It won't go to the next layer when i click on the disclosure button.
this problem existed with the regular list aswell.

It's proberly since i'm using the MVC pattern.

it says : Result of expression 'this.layout.setActiveItem' [undefined] is not a function.

this is my code :


beheerpaneel.views.Nested = Ext.extend(Ext.NestedList, {
layout: 'fit',
title: 'Cars',
displayField: 'text',
store: carStore,
onItemDisclosure: true,
onItemTap: function(subList, subIdx, el, e){
if (e.getTarget().className == 'x-list-disclosure') {
beheerpaneel.views.Nested.superclass.onItemTap.call(this, subList, subIdx, el, e);
} else {
// do whatever you want
}
},
initComponent: function() {
carStore.load();
beheerpaneel.views.Nested.superclass.initComponent.apply(this, arguments);
}
});


i already tried to change the following line:


beheerpaneel.views.Nested.superclass.onItemTap.call(this, subList, subIdx, el, e);

to


beheerpaneel.views.Nested.superclass.onItemTap.call(beheerpaneel.views.viewport, subList, subIdx, el, e);

So it would use the right viewport but then i get a other error :

TypeError: Result of expression 'this.addNextCard' [undefined] is not a function.

Anyone knows how to solve this?

martinbroos
28 Apr 2011, 1:29 AM
SOLVED it by changing the layout to card :


beheerpaneel.views.Nested = Ext.extend(Ext.NestedList, {
layout: 'card',

....

martinbroos
5 May 2011, 4:07 AM
One question has come up last day:

With onItemDisclosure: true every nested list item has a disclosure item.
But is it possible to disable / hide it when the item is a leaf?

Cause the disclosure button won't get any action since their are no underlying items.

jdb
7 Jul 2011, 9:14 AM
Hi, under this approach, how to hide the disclosure icon when reaching the end of the hierarchy?