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

私の要件は似ていると思います: 2 つのリストの完全な内容を表示します。それぞれがフィールドセット内にあり、別の最上位コンテナー (ビューポートに追加されます) 内にあります。私が望んでいたのは、最上位のコンテナーがスクロールを処理し、リストがまったくスクロールしないようにすることでした。

リストの高さが自動的に計算されないという事実を受け入れる前に、私はかなり長い間これに取り組みました (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});
        }
    });
于 2015-01-08T17:18:44.420 に答える