Sencha Touch 2 Dynamic Items Array

Question

In the following example, I would like to replace the hard-coded items array with a call to a jsonstore with with same items read dynamically. I have tried referencing the store through xtype but get an error that Object has no method 'getItemId' - please let me know what I am doing wrong and many thanks for your help

Ext.define("MyApp.view.Main", {
    extend: 'Ext.ux.slidenavigation.View',

    requires: [
        'Ext.Container',
        'Ext.MessageBox',
        'Ext.Panel',
        'Ext.Toolbar',
        'Ext.event.publisher.Dom'
    ],

    config: {
        fullscreen: true,
        slideSelector: 'x-toolbar',
        selectSlideDuration: 200,
        list: {
            maxDrag: 400,
            width: 200,
            items: [{
                xtype: 'toolbar',
                docked: 'top',
                ui: 'light',                    
                title: {
                    title: 'Navigation',
                    centered: false,
                    width: 200,
                    left: 0
                }
            }]
        },
        /***************************************************************/
        /* Want to replace this items array with dynamic call to store */
        /***************************************************************/
        items: [{
            title: 'Item 1',
            slideButton: {
                selector: 'toolbar'
            },
            items: [{
                xtype: 'toolbar',
                title: 'Item 1',
                docked: 'top'
            },{
                xtype: 'panel',
                html: '<img src="resources/images/guide.jpg" width="100%" />'
            }]
        },{
            title: 'Item 2',
            slideButton: {
                selector: 'toolbar'
            },
            items: [{
                xtype: 'toolbar',
                title: 'Item 2',
                docked: 'top'
            },{
                xtype: 'panel',
                html: '<img src="resources/images/guide.jpg" width="100%" />'
            }]
        }]
    }

Store sample

Ext.define('MyApp.store.Navigation', {
    extend: 'Ext.data.Store',
    alias: 'widget.navstore',
    requires: [
        'MyApp.model.Navigation'
    ],

    config: {
        model: 'InspectionApp.model.Navigation',
        storeId: 'navStore',
        proxy: {
            type: 'ajax',
            url: '/path/to/navigation.json',
            reader: {
                type: 'json',
                rootProperty: 'items'
            }
        },
        grouper: {
            property: 'group',
            sortProperty: 'groupOrder'
        }
    }
});

json sample

[
    {
        "title": "Item 1",
        "slideButton": "{selector: 'toolbar'}",
        "items": "[{xtype: 'toolbar',title: 'Item 1',docked: 'top'},{xtype: 'panel',html: '<img src='resources/images/guide.jpg' width='100%' />'}]",
        "handler": ""
    },
    {
        "title": "Item 2",
        "slideButton": "{selector: 'toolbar'}",
        "items": "[{xtype: 'toolbar',title: 'Item 2',docked: 'top'},{xtype: 'panel',html: '<img src='resources/images/guide.jpg' width='100%' />'}]",
        "handler": ""
    }
]

Any reason why you didn't just do a Ext.Ajax request and then just MyApp.view.Main.add(loadeditems) them to the items array of the view? — Dawesi
also shouldn't be using the Ext namespace for a ux unless it's bundled with the library, this is considered bad practice. — Dawesi
Thanks for your comments. I will start looking into Ext.Ajax and update my post once I have the answer. If there is any comparable example you can think of please let me know. Thanks! — Arkady
Chris, I believe I have added the Ext.Ajax.request correctly to my view; however, I don't know how to replace the items array with the results of the request. Could you take a look at the edit above and let me know? Thanks again for your help on this! — Arkady

kevinstueber kevinstueber · Accepted Answer · 2012-09-13T14:09:08

Assuming your store is loading correctly, you can get a reference to it by calling

Ext.getStore('navStore')

or by assigning your store to a variable:

var yourStore = Ext.define('MyApp.store.Navigation', {
    extend: 'Ext.data.Store',
    alias: 'widget.navstore',
    requires: [
        'MyApp.model.Navigation'
    ],

    config: {
        model: 'InspectionApp.model.Navigation',
        storeId: 'navStore',
        proxy: {
            type: 'ajax',
            url: '/path/to/navigation.json',
            reader: {
                type: 'json',
                rootProperty: 'items'
            }
        },
        grouper: {
            property: 'group',
            sortProperty: 'groupOrder'
        }
    }
});

To populate the items object I would put it in a container:

{
    xtype: 'container',
    id: 'container_id',
}

then

for (var i = 0; Ext.getStore('navStore').getCount(); ++i){
    var record = Ext.getStore('navStore').getAt(i);
    var myComponent = Ext.create(...
      //make the component you want to add with the data from the record
    );
    Ext.ComponentQuery.query('#container_id')[0].add(myComponent);
}

Sencha Touch 2 Dynamic Items Array

1 Answers