0

我正在尝试在 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}' 
});
4

2 回答 2

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

使用 Store 定义具有列表的面板：

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

});
于 2012-10-10T23:12:43.960 回答
0

  1. 标题栏显示两次，因为您使用的是 Ext.navigation.View，默认情况下有标题栏。您正在项目中添加一个标题栏。

  2. 现在在一个项目中定义 store 和 itemtpl，在 config. 您可以单独定义商店并在商店中提及商店的 id。

    items : [{ xtype : 'list', store: '商店 id 放在这里，itemTpl: '{title}' }]

于 2012-10-11T06:39:14.930 回答