Question

我在list中有一个fieldset，但它不会显示。我怎样才能让它显示出来。我可以放一个高度，但这使它成为一个可滚动的盒子，不是很好。

Ext.define('MyApp.view.MyPanel', {
extend: 'Ext.Panel',

config: {
    layout: {
        type: 'fit'
    },
    items: [
        {
            xtype: 'formpanel',
            items: [
                {
                    xtype: 'fieldset',
                    title: 'Date',
                    items: [

                        {
                            xtype: 'datepickerfield',
                            label: 'Date',
                            placeHolder: 'dd/mm/yyyy',
                            dateFormat: 'd/n/Y',
                            picker: {
                                yearFrom: 2013
                            }
                        }
                    ]
                },
                {
                    xtype: 'fieldset',
                    layout: {
                        type: 'fit'
                    },
                    title: 'Available times:',
                    items: [
                        {
                            xtype: 'list',
                            store: {
                            fields: ['name','id'],
                            data: [
                                {name: '10:15',id:1},
                                {name: '13:15',id:2},
                                {name: '17:35',id:3},
                            ]
                        },
                        itemTpl: [
                            '<div>{name}</div>'
                            ]
                        }
                    ]
                }
            ]
        }
    ]
}

});

Answer 1

尝试将height: 'auto'和scrollable: false添加到您的列表

演示： http://www.senchafiddle.com/#yyCVE#GNEuj#1aEQr#9eCak#oi6dM

Answer 2

我认为我的要求是相似的：显示两个列表的完整内容，每个列表位于一个字段集中，该列表位于另一个顶级容器（添加到Viewport中）内。我想要的是让顶级容器处理滚动而列表根本不滚动。

在接受列表高度未自动计算的事实之前，我已经用了很长时间（ST 2.4.1）进行了摔跤，所以必须手动设置才能使这种方法起作用。将商店中的refresh事件和refresh侦听器发送到手动设置列表高度的列表是一种优雅的解决方案。

这是一个Sencha Fiddle演示：https://fiddle.sencha.com/#fiddle/g1n

演示代码本身：

   Ext.Viewport.add({
        xtype: 'container',
        // Using 'vbox' here will break the lists since that
        // is a proportional layout...
        layout: 'default',
        scrollable: true,
        fullscreen: true,
        items: [{
            xtype: 'titlebar',
            docked: 'top',
            title: 'Titlebar'
        }, {
            xtype: 'fieldset',
            title: 'List A',
            layout: 'fit',
            items: [{
                xtype: 'list',
                itemId: 'lista',
                // This is the default row height - don't use
                // magic numbers in shipping code...
                height: 42,
                scrollable: false,
                itemTpl: '{message}',
                store: {
                    fields: ['message'],
                    listeners: {
                        addrecords: function(store) {
                            store.fireEvent('refresh', store);
                        }
                    }
                },
                // Reset the list height when the underlying data
                // store triggers a 'refresh' event...
                listeners: {
                    refresh: function(list) {
                        list.setHeight(list.getItemHeight() * 
                            list.container.getInnerItems().length);
                    }
                }
            }]
        }, {
            xtype: 'fieldset',
            title: 'List B',
            layout: 'fit',
            items: [{
                xtype: 'list',
                itemId: 'listb',
                // This is the default row height - don't use
                // magic numbers in shipping code...
                height: 42,
                scrollable: false,
                itemTpl: '{message}',
                store: {
                    fields: ['message'],
                    listeners: {
                        addrecords: function(store) {
                            store.fireEvent('refresh', store);
                        }
                    }
                },
                // Reset the list height when the underlying data
                // store triggers a 'refresh' event...
                listeners: {
                    refresh: function(list) {
                        list.setHeight(list.getItemHeight() * 
                            list.container.getInnerItems().length);
                    }
                }
            }]
        }]
    });

    // Add a bunch of items to the lists...
    Ext.ComponentQuery.query('list').forEach(function(list) {
        for(var i = 2; i < 20; i++) {
            list.getStore().add({message: 'line ' + i});
        }
    });

面板内的Sencha touch 2 List无法看到

2 个答案: