3

我有一个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>'
                            ]
                        }
                    ]
                }
            ]
        }
    ]
}

});
4

2 回答 2

1

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

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

于 2013-02-06T14:47:44.500 回答
0

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

在接受列表高度不是自动计算的事实之前，我为此挣扎了很长一段时间（ST 2.4.1），因此必须手动设置它才能使这种方法起作用。refresh从 store 中触发一个事件和一个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});
        }
    });
于 2015-01-08T17:18:44.420 回答