Results 1 to 5 of 5

Thread: Update NestedList

  1. #1
    Ext JS Premium Member
    Join Date
    Aug 2010
    Posts
    1

    Default Update NestedList

    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...

    Code:
    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...
    Code:
    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.

    Code:
    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);
        }
    Code:
    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
            });
        }
    });
    Code:
    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.

  2. #2

    Default

    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.

  3. #3

    Default same issue

    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

  4. #4
    Sencha User
    Join Date
    Apr 2011
    Location
    Czech
    Posts
    8

    Default

    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

  5. #5
    Sencha User
    Join Date
    Oct 2011
    Posts
    1

    Default Same here

    same here

Similar Threads

  1. Best way to add a new NestedList at the leaf of another NestedList?
    By pwayner in forum Sencha Touch 1.x: Discussion
    Replies: 0
    Last Post: 8 Dec 2010, 6:07 AM
  2. update tab content using Ajax and getComponent().update function
    By jaggybala in forum Ext 2.x: Help & Discussion
    Replies: 5
    Last Post: 22 Oct 2007, 7:58 AM
  3. [SOLVED]Grid RowSelectionModel doesn't update selections on store update
    By MaximGB in forum Ext 1.x: Help & Discussion
    Replies: 3
    Last Post: 11 Jul 2007, 3:41 AM
  4. missing json update demo (cell-grid-update)
    By luc98 in forum Ext 1.x: Help & Discussion
    Replies: 2
    Last Post: 4 May 2007, 7:08 AM

Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •