View Full Version : Nested List with disclosure arrows question

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

//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);

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

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.views.PagesIndex.superclass.initComponent.apply(this, arguments);

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

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?

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?

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

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>';

16 Jun 2011, 1:10 AM
sorry for interruption

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

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>';


.item-title {
float: left;

float: right;

generated html :

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

Thanks for this solution


Have a look at XML Reader posibilities in de api docs


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