Question

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

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

请帮忙！

Answer 1

您需要为容器提供布局，并为列表指定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'
                        }
                    }
                }
            }   
        ]
    }
});

Sencha Touch 2列表在容器中是不可见的

1 个答案: