0

基于此处了解的新创建的 Sencha Touch 2 应用程序。然后我想添加我的嵌套列表 - 分层菜单树，发现没关系 - 我的商店内联或我的商店从 json 读取 - 选项卡“菜单”内没有显示任何内容。怎么了？

重要文件/代码片段：

app.js 中的 MVC 部分：

// MVC
    views: [
        'Main'
    ],
    models: [
        'MenuItem'
    ],
    stores: [
        'MenuTree'
    ],

视图.Main.js：

Ext.define('MobilePost.view.Main', {
    extend: 'Ext.tab.Panel',
    xtype: 'main',
    requires: [
        'Ext.TitleBar',
        'Ext.data.TreeStore',
        'Ext.dataview.NestedList',
        'Ext.data.proxy.JsonP',
        'MobilePost.store.MenuTree'
    ],

    config: {
        tabBarPosition: 'bottom',

        items: [
            {
                            // From tutorial, working
                title: 'Home',
                iconCls: 'home',
                cls: 'home',
                html: [
                    '<img src="http://staging.sencha.com/img/sencha.png" />',
                    '<h1>Welcome to Sencha Touch</h1>'
                ].join("")
            },
            {
                            // From tutorial, working
                xtype: 'nestedlist',
                title: 'Blog',
                iconCls: 'star',
                displayField: 'title',

                store: {
                    type: 'tree',

                    fields: [
                        'title', 'link', 'author', 'contentSnippet', 'content',
                        { name: 'leaf', defaultValue: true }
                    ],

                    root: {
                        leaf: false
                    },

                    proxy: {
                        type: 'jsonp',
                        url: 'https://ajax.googleapis.com/ajax/services/feed/load?v=1.0&q=http://feeds.feedburner.com/SenchaBlog',
                        reader: {
                            type: 'json',
                            rootProperty: 'responseData.feed.entries'
                        }
                    }
                },

                detailCard: {
                    xtype: 'panel',
                    scrollable: true,
                    styleHtmlContent: true
                },

                listeners: {
                    itemtap: function( nestedList, list, index, element, post ) {
                        this.getDetailCard().setHtml(post.get('content'));
                    }
                }
            },
            {
                            // Mine, not working
                xtype: 'nestedlist',
                title: 'Menu',
                iconCls: 'settings',
                store: 'MenuTree'
            }
        ]
    }
});

模型 - model.MenuItem.js：

Ext.define('MobilePost.model.MenuItem', {
    extend: 'Ext.data.Model',
    config: {
        fields: [ 
            'id',   // Menu item id for events
            'text', // Menu item text 
            { name: 'leaf', defaultValue: false }
        ]
    }
});

商店 - store.MenuTree.js：

Ext.define('MobilePost.store.MenuTree', {
    extend: 'Ext.data.TreeStore',

    requires: [ 'MobilePost.model.MenuItem' ],

    type: 'tree',
    defaultRootProperty: 'items',
    config: {
        model: 'MobilePost.model.MenuItem',
        /*
        // TODO: inline store - uncomment to use
        root: {
            items: [
                {
                    id: 'settings',
                    text: 'Settings',
                    items: [
                        {
                            id: 'shift',
                            text: 'Working shift',
                            leaf: true
                        },
                        {
                            id: 'users',
                            text: 'Users',
                            leaf: true
                        },
                        {
                            id: 'cash',
                            text: 'Cash',
                            leaf: true
                        }
                    ]
                }
            ]
        }*/
        // TODO: JSON store - comment for inline store
        proxy: {
            type: 'ajax',
            url: 'menu.json'
        }
    },
    // TODO: JSON store - comment for inline store
    root: {}
});

JSON - menu.json（有效，通过 jsonlint.com 的检查）：

{
    "items": [
        {
            "id": "settings",
            "text": "Settings",
            "items": [
                {
                    "id": "shift",
                    "text": "Working shift",
                    "leaf": true
                },
                {
                    "id": "users",
                    "text": "Operators",
                    "leaf": true
                },
                {
                    "id": "cash",
                    "text": "Cash",
                    "leaf": true
                }
            ]
        }
    ]
}
4

1 回答 1

0

您的商店在什么时候加载？你不应该autoLoad:true在你的商店使用吗？

此外，如果您不想使用应用程序加载创建和加载商店，您应该在需要时手动创建商店并将其设置为列表

var treeStore = Ext.create('MobilePost.store.MenuTree');
treeStore.load();

并在您的视图中将其用作商店属性

        {
            // Mine, not working
            xtype: 'nestedlist',
            title: 'Menu',
            id: 'myListId',
            iconCls: 'settings',
            store: treeStore
        }

或者如果视图已经创建，则设置商店

Ext.getCmp('myListId').setStore(treeStore);
于 2013-04-17T05:08:25.847 回答