jwarren
26 Jan 2011, 4:00 PM
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.
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.