Question

我需要Viewport的水平和垂直滚动条。使用下面的代码，我得到一个垂直滚动条。我尝试了多种方法来获得包含scroll.autoScroll:true，scrollable:true的横条，但它不起作用。

var bbb = [{
        region: 'north',
        border: false,
        maxHeight: 60,
        //width : 250,
        //margin: '0 0 5 0', //top, right, bottom, left
        //padding: '0 2 5 2', //top, right, bottom, left                    
        layout: 'anchor',
        items: [{
            xtype: 'container',
            id: 'rendererHeader',
            border: false,
            height: 35,
            scrollable: false,
            style: 'background-color: #E6E6E6', //border:1px solid #70BF73;
            padding: '0', //top, right, bottom, left
            layout: {
                type: 'hbox',
                pack: 'start',
                //align: 'stretch',
            },
            items: [{
                    xtype: 'displayfield',
                    id: 'dspdashboardname',
                    itemid: 'dspdashboardname',
                    //text: 'DashBoard',
                    value: '',
                    fieldStyle: "font-size:large;color:#000000;text-overflow:ellipsis;font-family:tahoma",
                    margin: '5 5 5 5', //top, right, bottom, left                           
                },

                {
                    xtype: 'tbfill'
                },
                {
                    xtype: 'combobox',
                    id: 'permitteddashboard',
                    itemid: 'permitteddashboard',
                    margin: '7 2 3 2', //top, right, bottom, left
                    queryMode: 'local',
                    typeAhead: true,
                    grow: true,
                    forceSelection: true,
                    editable: true,
                    valueField: 'DashBoardID',
                    displayField: 'DashBoardName',
                    value: '',
                    width: 200,
                    height: 20
                },
                {
                    xtype: 'image',
                    id: 'rdr_icondbrdrpersonalize',
                    itemid: 'rdr_icondbrdrpersonalize',
                    src: './resource/icons/filter.png',
                    title: 'Personalize Filters',
                    height: 25,
                    width: 25,
                    margin: '6 2 5 2', //top, right, bottom, left
                    mode: 'image'
                },
                {
                    xtype: 'image',
                    id: 'rdr_icondbrdrmanagedashboard',
                    itemid: 'rdr_icondbrdrmanagedashboard',
                    src: './resource/icons/dashboard.png',
                    title: 'Manage DashBoard',
                    height: 25,
                    width: 25,
                    margin: '6 5 5 2', //top, right, bottom, left
                    mode: 'image'
                }
            ]
        }]
    },
    // Renderer Panel
    {
        region: 'center',
        id: 'dashboardcenterrigionpanel',
        layout: 'anchor',
        border: false,

        style: 'background-color: #E6E6E6', //border:1px solid #70BF73;
        defaults: {

        },
        items: [

            {
                xtype: 'container',
                //anchor:'100% 10%',    
                maxHeight: 30,
                border: true,
                id: 'dashboardfilterpanel',
                layout: 'hbox',
                padding: '5 5 5 5', //top, right, bottom, left
                //margin: '0 6 0 6', //top, right, bottom, left
                //style: 'border:1px solid #C8C8C8;',
                style: 'border-left:solid #C8C8C8 25px;', //border-right:solid #C8C8C8 5px;
                defaults: {
                    //padding: '0 5 0 5', //top, right, bottom, left
                    //margin: '25 10 5 10' //top, right, bottom, left   
                }
            }

        ]
    }
];
var viewport = Ext.create('Ext.container.Viewport', {
    layout: 'fit',
    alias: 'topContainer',
    id: 'dbrendererviewport',
    itemId: 'dbrendererviewport',

    height: winHeight,
    width: winWidth,
    padding: 0,
    //style:"background-color:lightgrey;",
    items: {
        xtype: 'container', // viewport can't scroll, so you need an extra container
        //style: 'overflow-x: scroll;overflow-y: scroll',
        style: 'overflow:auto',
        layout: 'anchor',

        items: eval(Ext.encode(bbb))
        //layout: 'border',
        //height: '100%',
        //width: '100%',


    }
});

Answer 1

http://docs.sencha.com/extjs/6.0.2/classic/Ext.container.Viewport.html

视口不提供滚动，因此视口中的子面板应根据需要使用可滚动配置进行滚动。

Extjs没有获得视口滚动

1 个答案: