NestedList Duplicating Items At the Root Level

[oddz]

The nested list seems to be duplicating items at the root level. The problem does not seem to persist to any levels other than the root.

app.js

Ext.define('Classifieds.model.Category',{
    extend: 'Ext.data.Model',
    fields: [
             {name: 'id' , type: 'int'},
             {name: 'title' , type: 'string',mapping: 'fileName'},
    ]
});

Ext.define('Classifieds.store.Categories',{
    extend: 'Ext.data.TreeStore',
    model: 'Classifieds.model.Category',
    requires: ['Classifieds.model.Category'],
    autoLoad: true,
    proxy: {
        type: 'ajax',
        root: {},
        url: 'categories.json',
    }
});

Ext.define('Classifieds.view.Categories',{
    extend: 'Ext.dataview.NestedList',
    xtype: 'categories',
    requires: ['Classifieds.store.Categories'],    
    config: {
        store: Ext.create('Classifieds.store.Categories'),
        title: 'Categories',
        displayField: 'title',
    }
});

Ext.application({
    name: 'Classifieds',
  
    launch: function() {
        
        Ext.widget('categories',{    
            fullscreen: true
        });
        
    }
});

categories.json

{
  "children":[
    {
      "cls":"file",
      "fileName":"Ajax.js",
      "id":"./Ajax.js",
      "leaf":true
    },
    {
      "cls":"folder",
      "fileName":"form",
      "id":"./form",
      "children": [
        {
          "fileName":"Panel.js",
          "id":"form\/Panel.js",
          "leaf":true,
          "cls":"file"
        },
        {
          "fileName":"Field",
          "id":"field\/Field",
          "cls":"folder",
          "children": [
            {
              "fileName":"Number.js",
              "id":"field\/Number.js",
              "leaf":true,
              "cls":"file"
            },
            {
              "fileName":"Text.js",
              "id":"field\/Text.js",
              "leaf":true,
              "cls":"file"
            }
          ]
        }
      ]
    },
    {
      "cls":"folder",
      "fileName":"util",
      "id":"./util",
      "children": [
        {
          "fileName":"TapRepeater.js",
          "id":"util\/TapRepeater.js",
          "leaf":true,
          "cls":"file"
        }
      ]
    }
  ],
  "text":"."
}

Screen shot 2011-11-05 at 5.10.54 PM.jpg

[Jamie Avins]

Thank you for the report, looks like an issue with the store events.

[oddz]

That would make sense considering I have run into store load event handlers being called multiple times upon loading a store. The only work around at this time seems to be manually passing a callback to the load or loadPage methods. In which case the callback is only called once.

[oddz]

After countless hours debugging this myself all I can say is:

do not forget to define root as an empty object literal on the TreeStore definition!!!.

huh...

Ext.define('Classifieds.store.Categories',{
    extend: 'Ext.data.TreeStore',
    model: 'Classifieds.model.Category',
    requires: ['Classifieds.model.Category'],
    autoLoad: false,
    root: {}, // CORRECT!!!
    proxy: {
        type: 'ajax',
        // root: [], just stupid why I defined it here...
        url: 'service/categories3.json'
    }
});

[oddz]

This can be closed unless you guys want to implement some type of stupidity exception… lol

[Jamie Avins]

It still shouldn't force you to have that empty object configuration, we feel it should handle the issue better.

[TommyMaintz]

All the issues related to root etc in TreeStore's have been greatly improved as part of the data package cleanup which will be in the next release. Specifying or not specifying an empty root should not break anything and in my testing, it won't cause issues in the future. Thanks for all the time and effort you have put into debugging these issues and providing us with helpful feedback.

[groovydude]

Yep. Had the same issue with duplicate roots and the empty object did the trick! But I agree it seems more like a hack than a sensible config setting.