Автопрокрутка не работает с макетом vbox - PullRequest
Новая
       26

Автопрокрутка не работает с макетом vbox

3 голосов
/ 28 декабря 2010

Мне нужно выровнять formpanels по центру, поэтому я использовал макет vbox, и после того, как я использовал его, автопрокрутка не работала, как раньше, код такой: 

 Usr.VWPanel = Ext.extend(Ext.Panel, {
        id: null,
        rid: null,
        closable: true,
        autoScroll: true,
        buttonAlign: 'center',
        layout: {
                type:'vbox',
                padding:'5',
                pack:'center',
                align:'center'
        },
        initComponent: function () {
            Ext.apply(this, {
                items: [
                {
                    xtype: 'spacer',
                    height: 16
                },
                {
                    xtype: 'usr.usrform',
                    itemId: 'usr.vwpain.usrformt',
                    width: 600,
                    height: 500
                },
                {
                    xtype:'spacer',
                    height: 16
                },
                {
                    xtype: 'usr.loginform',
                    itemId: 'usr.vwpain.loginform',
                    width: 600
                },
                {
                    xtype: 'spacer',
                    height: 16
                },
                {
                    xtype: 'usr.subsform',
                    itemId: 'usr.vwpain.subsform',
                    width: 600
                }],
...

plz советую.

Ответы [ 3 ]

2 голосов
/ 29 декабря 2010

макет vbox никогда не будет отображать скроллер.

alt text

{
    xtype: 'window',
    title: 'My Window',
    width: 500,
    height: 500,
    layout: 'vbox',
    layoutConfig: {
        pack: 'center',
        align: 'center'
    },
    items: [
        {
            xtype: 'panel',
            title: 'My Panel',
            anchor: '80% 100%',
            height: 300,
            width: 300,
            autoScroll: true,
            items: [
                {
                    xtype: 'panel',
                    html: 'this isform1',
                    height: 100
                },
                {
                    xtype: 'panel',
                    html: 'this isform1',
                    height: 100
                },
                {
                    xtype: 'panel',
                    html: 'this isform1',
                    height: 100
                }
            ]
        }
    ]
}
1 голос
/ 14 октября 2011

в вашем css вы можете установить для Моя панель поля значение {0 auto}, которое будет центрировать Моя панель внутри окна.Это означает, что вам не нужна специальная конфигурация макета для вашего окна.

0 голосов
/ 03 мая 2016

Я добавил слушателя события resize, чтобы получить вертикальную прокрутку, так как для Vbox мы должны предоставить высоту, чтобы получить прокрутку, но когда размер окна изменяется, высота скроллера остается постоянной. 

Ext.define('DataConfigurations', {
extend: 'Ext.form.Panel',
bodyStyle: 'padding:5px 5px;',
listeners: {
resize: {
    fn: function(el) {
        this.setHeight(this.up('window').getHeight()-150);  // 150  is extra for my panel coz of headers so have minus it.
        console.log("new height = " +   this.up('window').getHeight()-150);
    }
}
},
title: "Update Data Configurations",

Надеется, что это поможет.

...