Sencha Touch 2动态项目数组

Question

在下面的示例中，我想用对jsonstore的调用替换硬编码的items数组，并动态读取相同的item。 我尝试通过xtype引用商店，但是得到一个错误，即Object没有方法'getItemId'-请让我知道我做错了，非常感谢您的帮助

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%" />'
            }]
        }]
    }

储存样品

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样本

[
    {
        "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": ""
    }
]

Answer 1

假设您的商店加载正确，您可以通过调用以下内容来获取对该商店的引用

Ext.getStore('navStore')

或通过将商店分配给变量：

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'
        }
    }
});

为了填充items对象，我将其放入容器中：

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

然后

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);
}