Nested List store config - Wrong store type Sencha Touch 2.1.0-rc1

**suzuki1100nz** · 8 Oct 2012 1:34 PM

REQUIRED INFORMATION

Touch version tested:

Sencha Touch 2.1.0-rc1

Browser versions tested against:

Chrome Version 22.0.1229.79 m
Safari 5.1.7

DOCTYPE tested against:

<!DOCTYPE html>

Description:
Using the nested list store config results in the wrong store object being created.
End up with the following JS error:

Code:

Uncaught TypeError: Object [object Object] has no method 'getRoot'

Steps to reproduce the problem:

See reproducer

The result that was expected:

Store confing should result in a Ext.data.TreeStore being created and therefore the getRoot() method will be defined

The result that occurs instead:

I suspect that the store is being instantiated as the superclass Ext.data.Store instead

Test Case:

Code:

Ext.application({
    name: 'Test',
    viewport: { preventZooming: true },
    launch: function () {


      var data = {
          text: 'Groceries',
          items: [{
              text: 'Drinks',
              items: [{
                  text: 'Water',
                  items: [{
                      text: 'Sparkling',
                      leaf: true
                  }, {
                      text: 'Still',
                      leaf: true
                  }]
              }, {
                  text: 'Coffee',
                  leaf: true
              }, {
                  text: 'Espresso',
                  leaf: true
              }, {
                  text: 'Redbull',
                  leaf: true
              }, {
                  text: 'Coke',
                  leaf: true
              }, {
                  text: 'Diet Coke',
                  leaf: true
              }]
          }, {
              text: 'Fruit',
              items: [{
                  text: 'Bananas',
                  leaf: true
              }, {
                  text: 'Lemon',
                  leaf: true
              }]
          }, {
              text: 'Snacks',
              items: [{
                  text: 'Nuts',
                  leaf: true
              }, {
                  text: 'Pretzels',
                  leaf: true
              }, {
                  text: 'Wasabi Peas',
                  leaf: true
              }]
          }]
      };


      Ext.define('ListItem', {
          extend: 'Ext.data.Model',
          config: {
              fields: [{
                  name: 'text',
                  type: 'string'
              }]
          }
      });


      /*    var store = Ext.create('Ext.data.TreeStore', {
      model: 'ListItem',
      defaultRootProperty: 'items',
      root: data
      });*/


      var nestedList = Ext.create('Ext.NestedList', {
          fullscreen: true,
          title: 'Groceries',
          displayField: 'text',
          //store: store
              store: {
                  model: 'ListItem',
                  defaultRootProperty: 'items',
                  root: data
                            
                }
      });
    }
});

HELPFUL INFORMATION

Additional CSS used: