Question

我正在尝试为左侧面板添加一个滚动条，标题为'Foo Parameters'，用于以下页面。

enter image description here

以下是我的代码。

Ext.define('FOO.view.FooView', {
    extend: 'Ext.container.Viewport',
    alias: 'widget.pnlview',

    layout: 'fit',
    renderTo: Ext.getBody(),

    constructor: function(config) {
        this.items = [
            {
                xtype: 'panel',
                title: 'Foo Viewer',
                frame: true,
                layout: {
                    type: 'vbox',
                    align: 'stretch',
                    pack: 'start'
                },
                items: [
                    {
                        xtype: 'panel',
                        frame: true,
                        minHeight: 450,
                        flex: 7,
                        layout: {
                            type: 'hbox',
                            align: 'stretch',
                            pack: 'start'
                        },
                        autoScroll:  true,
                        items: [
                            {
                                xtype: 'panel',
                                flex: 1,
                                layout: 'accordion',
                                layoutConfig: {
                                    titleCollapse: false,
                                    activeOnTop: true
                                },
                                items: [
                                    {
                                        xtype: 'pnlform',
                                        title: 'Foo Parameters'
                                    },
                                    {
                                        title: 'Query Menu',
                                        xtype: 'querygrid'
                                    },
        /*                            {
                                        title: 'Drilldown Filters',
                                        xtype: 'filtergrid'
                                    }*/
                                ]
                            },
                            {
                                xtype: 'panel',
                                flex: 4,
                                layout: 'accordion',
                                layoutConfig: {
                                    titleCollapse: false,
                                    activeOnTop: true
                                },
                                items: [
                                    {
                                        title: 'Table Goodness',
                                        id: 'pnlgrid',
                                        xtype: 'pnlgrid'
                                    },
                                    {
                                        title: 'Graphmaster 3000',
                                        xtype: 'panel',
                                        frame: true,
                                        y_axis: 'net_pnl',
                                        layout: 'fit',
                                        items: {
                                            xtype: 'pnlchart'
                                        }
                                    }
                                ]
                            }
                        ]
                    },
                    {
                        xtype: 'statsgrid',
                        region: 'south',
                        height: 54,
                        minWidth: 600
                    }
                ]
            }
        ];

        this.callParent(arguments);
    }
});

我看了一篇类似的帖子here;但是，我想知道如何手动设置左面板的宽度。在左侧面板上实现滚动条的最佳方法是什么？

Answer 1

Sencha Fiddle screen shoot

Ext.application({
    name : 'Fiddle',
    launch : function() {

        Ext.create('Ext.Viewport', {
            layout: 'fit',
            renderTo: Ext.getBody(),
            items: [{
                    xtype: 'panel',
                    title: 'Foo Viewer',
                    frame: true,
                    layout: {
                        type: 'vbox',
                        align: 'stretch',
                        pack: 'start'
                    },
                    items: [{
                            xtype: 'panel',
                            frame: true,
                            minHeight: 450,
                            flex: 7,
                            layout: {
                                type: 'hbox',
                                align: 'stretch',
                                pack: 'start'
                            },
                            autoScroll:  true,
                            items: [{
                                    xtype: 'panel',
                                    flex: 1,
                                    layout: 'accordion',
                                    layoutConfig: {
                                        titleCollapse: false,
                                        activeOnTop: true
                                    },
                                    items: [{
                                            xtype: 'panel',
                                            title: 'Foo Parameters',
                                            autoScroll: true,
                                        items:[{
                                            xtype: 'panel',
                                            title: 'Controls panel',
                                            height:1000,
                                            margin:5
                                        }]
                                        }, {
                                            title: 'Query Menu',
                                            xtype: 'panel'
                                        }]
                                }, {
                                    xtype: 'panel',
                                    flex: 4,
                                    layout: 'accordion',
                                    layoutConfig: {
                                        titleCollapse: false,
                                        activeOnTop: true
                                    },
                                    items: [{
                                            title: 'Table Goodness',
                                            id: 'pnlgrid',
                                            xtype: 'panel'
                                        }, {
                                            title: 'Graphmaster 3000',
                                            xtype: 'panel',
                                            frame: true,
                                            y_axis: 'net_pnl',
                                            layout: 'fit',
                                            items: {
                                                xtype: 'panel'
                                            }
                                        }]
                                }]
                        }, {
                            xtype: 'panel',
                            region: 'south',
                            height: 54,
                            minWidth: 600
                        }]
                }]
        });

    }
});

Answer 2

您可以使用autoScroll：true属性为左侧面板应用滚动.Autoscroll对视口不起作用，它适用于面板。所以滚动你可以使用喜欢 xtype：'pnlform'，标题：'Foo参数'， autoScroll：true

文档链接： http://docs.sencha.com/extjs/4.2.1/#!/api/Ext.panel.Panel-cfg-autoScroll

Answer 3

修复您尝试添加滚动条的子面板的父面板高度，然后将autoScroll：true提供给那个父面板...

Ext.onReady(function () {
        Ext.create('Ext.panel.Panel', {
            //title: 'Parent',
            height: 200,
            autoScroll: true,
            width: 700,
            id: 'Parent',
            renderTo: Ext.getBody(),
            items: [{
                xtype: 'panel',
                title: 'Child',
                height: 1000,                
                items: [{
                    xtype: 'button',
                    text: 'Please Scroll me....',
                    listeners: {
                        click: {
                            fn: function () {
                                Ext.getCmp('Parent').scrollBy(500, 500, true);
                            }
                        }
                    }
                }]

            }]
        })
    });

为左侧面板添加滚动条，用于Javascript的Ext.container.Viewport

3 个答案: