Update NestedList

[jwarren]

Is there a way to update the NestedList with the data from a TreeStore?

I'm trying to create a simple app that uses a NestedList of Topics and Pages. When the page is complete I call a function that updates the TreeStore, marking the page as complete.
I have a template that check to see if the page is complete and adds a check-mark to the left of the page title.

I have been overriding the NestesList with...


Ext.override(Ext.NestedList, {
setRootActive:function(){
var navPnl = this;
var firstList = navPnl.items.getAt(0);
for(i=(navPnl.items.length-1);i >= 1;i--){
navPnl.remove(navPnl.items.getAt(i));
}
navPnl.setActiveItem(firstList);
navPnl.syncToolbar(firstList);
}
});
and calling...

nestedList.store.repopulate(treeStore);
This works except that when I have a sublist selected and I call repopulate, I can't tap on a sublist of the sublist. I have to tap back to the root and then navigate back down the tree.
I also get the following error when I try to tap on a sublist:
Uncaught TypeError: Cannot read property 'treeStore' of null

Here is some more code in-case it contains any clues.


pageComplete: function() {
// currentPage is just a data object that gets set when the NestedList "itemtap" event is fired
if(currentPage)
{
currentPage.complete = true;
// findNode recursively traverses player.Structure to find the object that matches currentPage.pid
var tempNode = this.findNode(player.Structure, currentPage.pid);
tempNode.complete = true;
}
this.nestedList.store.repopulate(player.Structure);
}


Ext.regModel('TOCTree', {
fields: [
{name: 'title', type: 'string'},
{name: 'pid', type: 'string'},
{name: 'complete', type: 'boolean'},
{name: 'animation'},
{name: 'card'}
]
});

player.StructureStore = new Ext.data.TreeStore({
model: 'TOCTree',
autoSave: true,
root: {
items: player.Structure
},
proxy: {
type: 'memory',
reader: {
type: 'tree',
root: 'items'
}
}
});

Ext.data.TreeStore.override({
repopulate: function(newItems) {
var proxy = this.proxy,
reader = proxy.reader,
rootNode = this.getRootNode();

rootNode.attributes[reader.root] = newItems;
this.read({
node: rootNode,
doPreload: true
});
}
});


player.Structure = [ {
title : 'Page 01',
complete : false,
pid : 1,
leaf : true
}, {
title : 'Page 02',
complete : false,
pid : 2,
leaf : true
}, {
title : 'Topic 01',
complete : false,
leaf : false,
items : [ {
title : 'Page 1.1',
complete : false,
pid : 3,
leaf : true
}, {
title : 'Page 1.2',
complete : false,
pid : 4,
leaf : true
}, {
title : 'Page 1.3',
complete : false,
pid : 5,
leaf : true
}, {
title : 'Page 1.4',
complete : false,
pid : 6,
leaf : true
}, {
title : 'Page 1.5',
complete : false,
pid : 7,
leaf : true
}, {
title : 'Sub Topic 02',
complete : false,
leaf : false,
items : [ {
title : 'Page 1.6.1',
complete : false,
pid : 8,
leaf : true
}, {
title : 'Page 1.6.2',
complete : false,
pid : 9,
leaf : true
}, {
title : 'Page 1.6.3',
complete : false,
pid : 10,
leaf : true
}, {
title : 'Page 1.6.4',
complete : false,
pid : 11,
leaf : true
}, {
title : 'Page 1.6.5',
complete : false,
pid : 12,
leaf : true
} ]
} ]
}, {
title : 'Topic 01',
complete : false,
leaf : false,
items : [ {
title : 'Page 1.1',
complete : false,
pid : 13,
leaf : true
}, {
title : 'Page 1.2',
complete : false,
pid : 14,
leaf : true
}, {
title : 'Page 1.3',
complete : false,
pid : 15,
leaf : true
}, {
title : 'Page 1.4',
complete : false,
pid : 16,
leaf : true
}, {
title : 'Page 1.5',
complete : false,
pid : 17,
leaf : true
}, {
title : 'Sub Topic 02',
complete : false,
leaf : false,
items : [ {
title : 'Page 1.6.1',
complete : false,
pid : 18,
leaf : true
}, {
title : 'Page 1.6.2',
complete : false,
pid : 19,
leaf : true
}, {
title : 'Page 1.6.3',
complete : false,
pid : 20,
leaf : true
}, {
title : 'Page 1.6.4',
icon : 'resources/img/page02-11.png',
complete : false,
pid : 21,
leaf : true
}, {
title : 'Page 1.6.5',
complete : false,
pid : 22,
leaf : true
} ]
} ]
} ];

P.S. Sorry for the long post.

[Bunchofstring]

I am looking for a solution to this too. Basically I want my app to build the list with no items in it so if the user switches to that screen, the transition is immediate. Meanwhile, I'd like the list to update as the store becomes populated.

[hulek89]

hi, i'm having the same issue. first thing a variable store must be set before you call initComponent of nested list. if it's empty but has url, it will automatically call remote method from url to get some data. but there's issue with reloading, first thing - clearOnLoad doesn't work properly, cos old elements remain in the tree, also if you try switching treeStore in nested list, it some kindda merges stores, so you have both values...it's wierd. i recommend using something else, but there's not much alternative. i worked it around myself. many luck to you! btw if you find any better solution how get that working properly, pls post below

[steven000]

I'm also meeting the issue. I can add a new item to store of NestedList, but i can't click on this item.

Please help me for this. Thanks in advance

[andresxv]

same here