5

我正在尝试用容器上的列表编写简单的视图，但我遇到了一些问题。首先，当我尝试这样做时，列表是不可见的：

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

但是当它这样写时：

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

有用。

问题是，当我使用扩展navigation.View 编写它时，我在顶部有两个工具栏，我找不到禁用第二个工具栏（由列表添加）的解决方案。

完整代码：

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 属性。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 回答