1. #1
    Sencha User
    Join Date
    Apr 2012
    Posts
    4
    Answers
    1
    Vote Rating
    0
    dewit is on a distinguished road

      0  

    Default Answered: nested list update with js object

    Answered: nested list update with js object


    I currently have a treestore and nested list that loads correctly.
    Code:
    {
                xtype : 'nestedlist',
                docked : 'left',
                width : '17%',
                id : 'reportList',
                store : Ext.create('Ext.data.TreeStore', {
                    model : 'TouchWidget.model.Item',
                    defaultRootProperty : 'items',
                    data : fixedData
                }),
                scrollable : true
            }
    I'm still unsure of the difference between setting it to data or root of the treestore as both will load correctly.

    For updating, I'm modifying fixedData, which is rather short and simple:
    Code:
    var fixedData = {
        text: 'Data',
        items : [{
            text : 'example'
            items: [
                   {
                   text: 'inner example 1',
                   value: 'inner value 1'
            },{
                   text: 'inner example 1',
                   value: 'inner value 1'
            }]
        },{
            text : 'example2',
            items: []
        }]
    Not the real data I'm using, but the point is that there is a nested list to the data, and it correctly shows up correctly on page load. Now when I modify the data doing something such as
    Code:
    fixedData.items[1].items = [];
    fixedData.items[1].items.push({text: 'some data', value: 'some value'});
    I'm doing this as I need to add the data to some level below the top, as well as be able to clear just that portion.
    I can then call

    Code:
    Ext.getCmp('reportList').getStore().applyData(fixedData);
    That works successfully, but it modifies fixedData as a result, removing the 'items' properties completely for the 2nd level.
    Code:
    var fixedData = {
        text: 'Data',
        items : [{
            text : 'example'
        },{
             text : 'example2'
        }]
    The above is what is printed out in console. This means I have to essentially re-create the data object every time I set the data because it's wiped clean.

    Now, I can work around this by cloning fixedData before using getStore().applyData(), but that doesn't seem appropriate. Using Store.load() doesn't seem to be an option because I'm trying to update from a javascript object, not an external source. Is there any way for the store to handle this situation without cloning for every update?

  2. Further searching and experimenting has finally revealed the answer.

    Working with data within a store is to be done using getById() and getAt(), which return Models that apparently implement NodeInterface. Add data via appendChild, and the rest is self explanatory from there. The id value can be overridden in your data to make navigating the tree easier.

    To achieve what I was trying to above:
    Code:
    Ext.getCmp('reportList').getStore().getById('myId').removeAll();
    Ext.getCmp('reportList').getStore().getById('myId').appendChild([{value: 'something'}, {value: 'other thing'}]
    Drilling further into the store is just as simple:
    Code:
    Ext.getCmp('myNestedListId').getStore().getById('myFirstLevelId').getById('mySecondLevelId').getById('myThirdLevelId')
    I've seen a number of other people with the same issue, and possibly the easiest way to remedy this is to update documentation of Model to explicitly call out NodeInterface. Currently, the word 'node' does not appear anywhere on the Model page, nor in getById().

  3. #2
    Sencha User
    Join Date
    Apr 2012
    Posts
    4
    Answers
    1
    Vote Rating
    0
    dewit is on a distinguished road

      0  

    Default


    Further searching and experimenting has finally revealed the answer.

    Working with data within a store is to be done using getById() and getAt(), which return Models that apparently implement NodeInterface. Add data via appendChild, and the rest is self explanatory from there. The id value can be overridden in your data to make navigating the tree easier.

    To achieve what I was trying to above:
    Code:
    Ext.getCmp('reportList').getStore().getById('myId').removeAll();
    Ext.getCmp('reportList').getStore().getById('myId').appendChild([{value: 'something'}, {value: 'other thing'}]
    Drilling further into the store is just as simple:
    Code:
    Ext.getCmp('myNestedListId').getStore().getById('myFirstLevelId').getById('mySecondLevelId').getById('myThirdLevelId')
    I've seen a number of other people with the same issue, and possibly the easiest way to remedy this is to update documentation of Model to explicitly call out NodeInterface. Currently, the word 'node' does not appear anywhere on the Model page, nor in getById().