0

Sencha-Touch 2 で簡単なデータの一覧を表示したいのですが、なぜかデータが表示されず、わかりません。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

Store を定義する必要があります。

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 を使用して List で 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});
    }

});
于 2012-10-10T23:12:43.960 に答える
0

  1. デフォルトでタイトルバーを持つ Ext.navigation.View を使用しているため、タイトルバーが 2 回表示されます。そして、アイテムにもう 1 つのタイトル バーを追加しています。

  2. config 内の item 内に store と itemtpl を定義します。ストアを個別に定義し、ストア内のストアの ID を指定できます。

    items : [{ xtype : 'list', store: 'ストア ID が入ります, itemTpl: '{title}' }]

于 2012-10-11T06:39:14.930 に答える