PDA

View Full Version : Nested List with disclosure arrows question



martinbroos
15 Jun 2011, 12:56 PM
Hi all,

I have a nested list with disclosure arrows. The disclosure arrows give the user the ability to go deeper in the list and clicking the item will show the details of the item.

But the disclosure buttons have no point when there are no subitems.
Is their a way to not show them when the item is a leaf item?

Leaf items are the last item in my json strin followed by the example of a nested list.

My code :

view file



beheerpaneel.views.PagesIndex = Ext.extend(Ext.NestedList, {
id: 'list',
fullscreen: true,
layout: 'card',
displayField: 'title',
store: beheerpaneel.stores.Pages,
onItemDisclosure: true,
onItemTap: function(subList, subIdx, el, e){

// Clear the selection soon
setTimeout(function(){subList.deselect(subIdx);},500);

//check if disclosure button is being pressed or the list itself
if (e.getTarget().className == 'x-list-disclosure')
{
// Go deeper in nested list -> to subpages
beheerpaneel.views.PagesIndex.superclass.onItemTap.call(this, subList, subIdx, el, e);
}
else{


//Get id of selected item
var selectedItem = subList.getRecord(el);

Ext.dispatch({
controller: beheerpaneel.controllers.Pages,
action: 'detail',
id: selectedItem.data.id,
historyUrl: "pages/detail/"+selectedItem.data.id+"/",
animation: {type:'slide', direction:'up'},
});

}
},
initComponent: function() {

//init view
beheerpaneel.stores.Pages.load();
beheerpaneel.views.PagesIndex.superclass.initComponent.apply(this, arguments);
}
});

eyalfx
15 Jun 2011, 1:27 PM
I think you just need to remove the following line.
onItemDisclosure: true,

martinbroos
15 Jun 2011, 1:34 PM
If i do that all the arrows are gone. I do want to show them when an item is not a leaf, so it shows that you can go deeper in the nested list.

Hopefully it's more clear now :)

Thanks for your answer, do you have idea how i accomplish this?

eyalfx
15 Jun 2011, 1:49 PM
It is clear now, but I don't know how to do it :)
Maybe there's a way to disable/enable it per item?

martinbroos
15 Jun 2011, 11:36 PM
Yeah i think i have to overwrite something while rendering the page but no idea how ... :-?

tomalex0
16 Jun 2011, 12:58 AM
It is better to change tpl of Nestedlist to implement Disclosure like style.

Use below code in nestedlist and Next text only appears only for parent list items


getItemTextTpl: function(recordnode) {
return '<div><div>{name}</div><tpl if="leaf !== true"><div class="next">Next</div></tpl></div>';
},

hemant1
16 Jun 2011, 1:10 AM
sorry for interruption

can you tell me how can i load xml file (data) dynamically to nested list

martinbroos
16 Jun 2011, 1:47 AM
Thnx Tomalex0 that worked perfectly.

It does however break some of the html symantic but i can live with that.
Cause with getItemTextTpl it works within the span of the body list item.


My code:



getItemTextTpl: function(recordnode)
{
return '<div class="item-title">{title}</div><tpl if="leaf !== true"><div class="x-list-disclosure"></div></tpl>';
},


CSS



.item-title {
float: left;
}

.x-list-disclosure{
float: right;
}


generated html :



<div class="x-list-item ">
<div class="x-list-item-body">
<span>
<div class="item-title">title</div>
<div class="x-list-disclosure"></div>
</span>
</div>
</div>


Thanks for this solution

@hemant

Have a look at XML Reader posibilities in de api docs

http://dev.sencha.com/deploy/touch/docs/?class=Ext.data.XmlReader

Never worked with xml in Sencha but doesn't look that different from regular json loading in a nested list.