Question

基于新创建的Sencha Touch 2应用程序，因为它是学习here。然后我想添加我的嵌套列表 - 分层菜单树，发现无关紧要 - 我的商店内联或我的商店从json读取 - 没有显示在选项卡'菜单'内。怎么了？

重要文件/代码片段：

app.js中的MVC部分：

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

view.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 - 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 - 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
                }
            ]
        }
    ]
}

Answer 1

您的商店在什么时候装满了？你不应该在商店里使用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);

空嵌套列表显示

1 个答案: