Question

我正在尝试在Sencha-Touch 2中显示简单数据列表。出于某种原因，它没有显示数据，我无法弄明白。我有两个标题栏：正确的标题是“最近的帖子”，下面是一个空白的标题栏。我不知道为什么会这样。也许这与显示器的其余部分相冲突？

Ext.define('GS.view.NewBlog',{
    extend: 'Ext.navigation.View',
    xtype: 'newblog',
    requires: [
        'Ext.dataview.List',
           'Ext.TitleBar'
    ],

config: {
    title: 'Blog',
    iconCls: 'star',
            items: {
                    docked: 'top',
                    xtype: 'titlebar',
                    title: 'Recent Posts'
            }, // end items
            store: {
                fields: ['title','author'],
                data: [
                    {title: 'This is the first Title', author: 'John Smith'},
                    {title: 'This is the second title', author: 'Jane Doe'}
                ] // end data
            } // end store

    }, // end config
itemTpl: '{title}' 
});

Answer 1

您需要定义商店：

Ext.define('GS.store.Posts', {`

    extend: 'Ext.data.Store',`
    config: {
        data: [
            {
                title: 'This is the first Title',
                author: 'John Smith'
            },
            {
                title: 'This is the second title',
                author: 'Jane Doe'
            }
        ],
        storeId: 'Posts',
        fields: [
            {
                name: 'title'
            },
            {
                name: 'author'
            }
        ]
    }
});

使用商店使用列表定义Panel：

Ext.define('GS.view.NewBlog', {
    extend: 'Ext.Panel',
    alias: 'widget.NewBlog',

    config: {
        layout: {
            type: 'card'
        },
        items: [
            {
                xtype: 'toolbar',
                docked: 'top',
                title: 'Recent Posts'
            },
            {
                xtype: 'list',
                itemTpl: [
                    '<div>{title} - {author}</div>'
                ],
                store: 'Posts'
            }
        ]
    }

});

你的app.js：

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

Ext.application({
    stores: [
        'Posts'
    ],
    views: [
        'NewBlog'
    ],
    name: 'GS',

    launch: function() {

        Ext.create('GS.view.NewBlog', {fullscreen: true});
    }

});

Answer 2

标题栏显示两次，因为您使用的是Ext.navigation.View，默认情况下它具有标题栏。并且您在项目中添加了一个标题栏。
现在在config中的项目内定义store和itemtpl。您可以单独定义商店并提及商店内商店的ID。

项目：[{ xtype：'list'，商店：'商店ID到这里， itemTpl：'{title}' }]

无法获取视图以在Sencha Touch中显示存储数据

2 个答案: