5

コンテナーのリストを使用して単純なビューを作成しようとしていますが、いくつか問題があります。まず、次のようにしようとすると、リストが表示されません。

 Ext.define('App.view.News', {
    extend: 'Ext.Container',

しかし、次のように書くと:

Ext.define('App.view.News', {
    extend: 'Ext.navigation.View',

できます。

問題は、navigation.View の拡張を使用して記述すると、2 つのツールバーが上部に表示され、2 つ目のツールバーを無効にする解決策が見つからないことです (リストによって追加されます)。

完全なコード:

Ext.define('App.view.News', {
    extend: 'Ext.Container', //Ext.navigation.View
    xtype: 'news',
    requires: [
        'Ext.dataview.List',
        'Ext.data.proxy.JsonP',
        'Ext.data.Store'
    ],
    config: {
        style: ' background-color:white;',

        items: 
        [
            {
                xtype: 'toolbar',
                docked: 'top',
                title: 'News',
                minHeight: '60px',
                items: [
                    {
                        ui: 'back',
                        xtype: 'button',
                        id: 'backButton', 
                        text: 'Back',
                    },

                    {
                        minHeight: '60px',
                        right: '5px',
                        html: ['<img src="resources/images/Image.png"/ style="height: 100%; ">',].join(""),
                    },
                ],          
            },

            { 
                xtype: 'list',
                itemTpl: '{title},{author}',
                store: {
                    autoLoad: true,
                    fields : ['title', 'author'],
                    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'
                        }
                    }
                }
            }   
        ]
    }
});

助けてください！

4

1 に答える 1

10

コンテナーにレイアウトを指定し、リストに flex プロパティを指定する必要があります。リストはスクロールするため表示可能な高さがないため、リストではフレックスが重要です。以下のコードにいくつかのプロパティを追加しました。お役に立てれば。

Ext.define('App.view.News', {
    extend: 'Ext.Container', //Ext.navigation.View
    xtype: 'news',
    requires: [
        'Ext.dataview.List',
        'Ext.data.proxy.JsonP',
        'Ext.data.Store'
    ],
    config: {
        style: ' background-color:white;',
        layout: 'vbox', //  add a layout
        items: 
        [
            {
                xtype: 'toolbar',
                docked: 'top',
                title: 'News',
                minHeight: '60px',
                items: [
                    {
                        ui: 'back',
                        xtype: 'button',
                        id: 'backButton', 
                        text: 'Back',
                    },

                    {
                        minHeight: '60px',
                        right: '5px',
                        html: ['<img src="resources/images/Image.png"/ style="height: 100%; ">',].join(""),
                    },
                ],          
            },

            { 
                xtype: 'list',
                itemTpl: '{title},{author}',
                flex: 1,    //  add a flex property
                store: {
                    autoLoad: true,
                    fields : ['title', 'author'],
                    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'
                        }
                    }
                }
            }   
        ]
    }
});
于 2012-07-12T17:46:07.560 に答える