Sencha Architect/Touch nested list issue

Question

Hello,

I am working with sencha architect, in a touch 2.4 project. I have a issue dealing with nested list and tree store:

This is my store:

Ext.define('App.store.Tree', {
extend: 'Ext.data.TreeStore',

requires: [
'App.model.Servicios',
'Ext.data.proxy.Ajax',
'Ext.data.reader.Json',
'Ext.data.proxy.LocalStorage'
],


config: {
    model: 'App.model.Servicios',
    storeId: 'Tree',
    defaultRootProperty: 'items',
    proxy: {
        type: 'ajax',
        type: 'localstorage',
        reader: {
            type: 'json'
        }
    }
}

});

(I've tried with every combination of proxys and readers and the error is the same.)

Now this is my model :

    Ext.define('App.model.Servicios', {
    extend: 'Ext.data.Model',


    requires: [
    'Ext.data.Field'
    ],


    config: {
    fields: [
    {
    name: 'categoria',
    type: 'string'
    },
    {
    name: 'nombre',
    type: 'string'
    },
    {
    name: 'ubicacion',
    type: 'string'
    },
    {
    name: 'datos',
    type: 'string'
    }
    ]
    }
    });

This is the container with the nested list:

    Ext.define('App.view.ServiciosContainer', {
    extend: 'Ext.Container',
    alias: 'widget.servicioscontainer',


    requires: [
    'Ext.Toolbar',
    'Ext.Button',
    'Ext.dataview.NestedList'
    ],


    config: {
    height: '100%',
    id: 'ServiciosContainer',
    width: '100%',
    layout: 'fit',
    items: [
    {
    xtype: 'toolbar',
    docked: 'top',
    items: [
    {
    xtype: 'button',
    id: 'serviciosContainerHome',
    iconCls: 'list'
    },
    {
    xtype: 'button',
    id: 'serviciosContainerBorrar',
    iconCls: 'trash'
    },
    {
    xtype: 'button',
    id: 'serviciosContainerAgregar',
    iconCls: 'add'
    }
    ]
    },
    {
    xtype: 'nestedlist',
    id: 'lstServicios',
    displayField: 'nombre',
    store: 'Tree'
    }
    ]
    },


    });

The add button does the following:

var data = {
    items: [
        {
        nombre: '1',
        items: [{
                nombre: '1.1',
                items: [{
                        nombre: '1.1.1 last',
                        leaf: true
                }, {
        nombre: '1.1.2 last',
        leaf: true
        }]
}, {
        nombre: '1.2 last',
        leaf: true
        }]
},
{
        nombre: '2',
        items: [{
                nombre: '2.1 last',
                leaf: true
        }, {
        nombre: '2.2 last',
        leaf: true
        }]
}
]
};



var servicios = Ext.getStore('TreeStore');
servicios.add(data);

This is the error I get when I try to add data to the store:

    TypeError: null is not an object (evaluating 'children.length')

Please Help!!!! I don't know where to look for mistakes as all the examples i've found where identical to mine and they didn't have any problem..

score 0 · Answer 1 · answered Jan 06 '15 at 14:47

I created a demo using ur code ,its works fine.

i have seen lots of un-needed code in ur demo ,Like you have added proxy to the store etc.

But i clearly see a minor mistake you made # See storeId its "Tree" and look at Ext.getStore('TreeStore');

I hope you got my point

Thanks

Sencha Architect/Touch nested list issue

1 Answers1