[ PR4 ] What's wrong with my store ?

**Tchinkatchuk** · 7 Feb 2012, 2:11 AM

Hi all,

I have tried many times and solutions for this but I've always encountered the same issue : "Uncaught TypeError: Object [object Object] has no method 'getRoot" while "Ext.define.updateStore" is executed in all-debug.js

I have attached the zip wtih all files and I've copy paste all my code here. If someone has an idea or could test it, it will really be nice. I'm trying for hours now and gonna be mad

index.html

HTML Code:

<!DOCTYPE html>
<html>
    <head>
        <title>Getting Started</title>
        <link rel="stylesheet" href="../resources/css/sencha-touch.css" type="text/css">
        <script type="text/javascript" src="../sencha-touch-all-debug.js"></script>
        <script type="text/javascript" src="app.js"></script>
    </head>
    <body>
        <!-- hack so window opening works on all devices: http://www.sencha.com/forum/showthread.php?130358-window.open()-from-toolbar-button-opens-window-from-list-item-a-new-tab&p=639938#post639938 -->
        <a href="" target="_blank" id="linker" style="display:none;"></a>
    </body>
</html>

app.js

Code:

Ext.Loader.setConfig({ enabled: true });

//Ext.Loader.setPath('Ext.data.proxy.Kiva', 'lib/KivaProxy.js');');
//Ext.ClassManager.setAlias('Ext.data.proxy.Kiva', 'proxy.kiva');

Ext.application({
    name        : 'Webshop',
    models      : ['Category'],
    views       : ['Main'],
    stores      : ['Categories'],
    controllers : ['Main'],

    launch: function() {
        Ext.create('Webshop.view.Main');
    }
});

app/controller/Main.js

Code:

// Ext.Webshop.Catalog controller
Ext.define('Webshop.controller.Main', {
    extend: 'Ext.app.Controller',

    requires: [
        'Webshop.model.Category',
        'Webshop.store.Categories',
        'Webshop.view.Main'
    ],

    stores: ['Categories'],

    models: ['Category'],

    views: [
        'Main'
    ],

    init: function() {
        this.view = this.getMainView().create();

        this.categoriesStore = this.getCategoriesStore();
        this.categoriesStore.load({
            callback: this.onCategoriesLoad,
            scope: this
        });

        this.callParent(arguments);
    },

    onCategoriesLoad: function() {
        this.view.setStore(this.categoriesStore);
    }
});

app/view/Main.js

Code:

Ext.define('Webshop.view.Main', {
    extend: 'Ext.NestedList',

    config : {
        layout:'fit',
        fullscreen: true,
        displayField: 'text',
        store: null,
        title: 'Catalogue'
    }
});

app/store/Categories.js

Code:

Ext.define('Webshop.store.Categories', {
    extend: 'Ext.data.Store',
    requires: 'Webshop.model.Category',
    config: {
        model: 'Webshop.model.Category',
        autoLoad: false
    },
    root: {}
});

app/model/Category.js

Code:

Ext.define('Webshop.model.Category', {
    extend: 'Ext.data.Model',
    config: {
        fields: ['iItemId', 'text' ],
        proxy: {
            type: 'ajax',
            url: 'catalogcategory.json',
            reader: {
                type: 'json',
                rootProperty: 'items'
            }
        }
    }
});

catalogcategory.json

Code:

{
    "items": [
       {
           "iItemId": 1,
           "text": "Plomberie",
           "image": "plomberie-little.png",
           "items" : [
                {
                    "iItemId": 11,
                    "text": "Plomberie > Outillage",
                    "image": "outillage-little.png",
                    "items" : [{
                                "iItemId": 111,
                                "text": "Plomberie > Outillage",
                                "image": "outillage-little.png",
                                "leaf": true
                    },
                    {
                                "iItemId": 112,
                                "text": "Plomberie > Outillage",
                                "image": "outillage-little.png",
                                "leaf": true
                    }],
                },
                {
                    "iItemId": 12,
                    "text": "Plomberie > Sanitaire",
                    "image": "outillage-little.png",
                    "items" : [{
                                "iItemId": 121,
                                "text": "Plomberie > Outillage",
                                "image": "outillage-little.png",
                                "leaf": true
                    },
                    {
                                "iItemId": 122,
                                "text": "Plomberie > Outillage",
                                "image": "outillage-little.png",
                                "leaf": true
                    }]
                }]
       },
       {
           "iItemId": 2,
           "text": "Outillage",
           "image": "outillage-little.png",
                                "leaf": true
       },
       {
           "iItemId": 3,
           "text": "Sanitaire",
           "image": "sanitaire-little.png",
                                "leaf": true
       },
       {
           "iItemId": 4,
           "text": "Confort thermique",
           "image": "thermique-little.png",
                                "leaf": true
       }
    ]
}

Archive.zip

mitchellsimoens

You should use TreeStore when using NestedList, not a regular Store.

**mitchellsimoens** · 7 Feb 2012, 9:42 AM

You should use TreeStore when using NestedList, not a regular Store.

**Tchinkatchuk** · 7 Feb 2012, 9:58 AM

Thanks !
I am just the stupiest guy on earth.

i have others trouble with 'has no method 'animation'" but I will find.

**Tchinkatchuk** · 7 Feb 2012, 10:11 AM

OK, the animation error came from layout: "fit" that was not permitted here. I've deletd the line and it works great. Thanks.

Thread: [ PR4 ] What's wrong with my store ?

Thread Tools

Search Thread

Display

Answered: [ PR4 ] What's wrong with my store ?

Posting Permissions