Прокрутка макета extjs внутри vbox

У меня проблема с добавлением полосы прокрутки в сетку, которая находится внутри контейнера vbox. Я не могу задать высоту напрямую, потому что я ее не знаю. В этом контейнере vbox также есть «другой контент» с неопределенной высотой, поэтому я не могу использовать ни «высоту», ни «гибкость». Мне нужно, чтобы сетка заполнила все оставшееся пространство на странице, и если строк будет больше, чем она может поместиться, мне нужно добавить полосу прокрутки в эту сетку. Это самая важная часть кода:

{
layout: {
    type: 'vbox',
    align: 'stretch'
}, 
items:[
    {
        title: 'center'
    },{
        html: 'another content'
    },{
        xtype: 'grid',
        autoScroll: true, // <-- this is not working
        columns: [
            { text: 'User', dataIndex: 'userId' }
        ],
        store: new Ext.data.Store({
            model: 'Ext.data.Record',
            fields: [
                { name: 'userId', type: 'string' }
            ],
            data: ( function(){
                var res = []
                for(var i=0; i<1000; i++){
                    res.push({ userId: 'User'+i});
                }
                return res;
            })()
        })

    }
]
}

Я пробовал много вариантов, но безуспешно. Я также подготовил несколько скриптов для большинства логических решений (но прокрутка там все равно не работает):
https://fiddle.sencha.com/#fiddle/fmo
https://fiddle.sencha.com/#fiddle/fmp

Любая помощь будет хорошей.


javascript layout extjs extjs5 sencha-touch
person msangel    schedule 30.12.2014    source источник
comment
возможно, хорошим решением будет создать панель с прокруткой и полностью нажать сетку на этой панели, но я тоже не знаю, как это сделать   -  person msangel    schedule 30.12.2014
comment
также вместо vbox можно было использовать anchor, тоже самое(и переключение не дало результатов)   -  person msangel    schedule 30.12.2014

Ответы (1)


arrow_upward
5
arrow_downward

Просто удалите autoScroll: true и замените его на flex: 1.

https://fiddle.sencha.com/#fiddle/fms

Ext.application({
    name : 'Fiddle',

    launch : function() {
        Ext.create('Ext.container.Viewport', {          
            renderTo: Ext.getBody(),
            layout: {
                        type: 'border'
            },
            items: [
                {
                    width: '100%',
                    region: 'north',
                    items: [{
                        title: 'north'
                    },{
                        html: 'another content'
                    }]
                }, 
                {
                    region: 'center',
                    layout: 'fit',
                    items: [{
                        layout: {
                            type: 'vbox',
                            align: 'stretch'
                        }, 
                        items:[
                            {
                                title: 'center'
                            },{
                                html: 'another content'
                            },{
                                xtype: 'grid',
                                flex: 1,
                                columns: [
                                    { text: 'User', dataIndex: 'userId' }
                                ],
                                store: new Ext.data.Store({
                                    model: 'Ext.data.Record',
                                    fields: [
                                        { name: 'userId', type: 'string' }
                                    ],
                                    data: ( function(){
                                        var res = []
                                        for(var i=0; i<1000; i++){
                                            res.push({ userId: 'User'+i});
                                        }
                                        return res;
                                    })()
                                })

                            }
                        ]
                    }
                    ]
                }]
        });
    }
});
person Colin Ramsay    schedule 30.12.2014
comment
хорошо, очень хорошо, работает, как и ожидалось, в скрипке, но не работает в моем проекте... следовательно, это ответ на этот вопрос. но я буду искать разницу между моей скрипкой и реальным проектом... отмечу как ответ позже. - person msangel; 30.12.2014
comment
Я нашел разницу и решил проблему. Проблема заключалась в том, что этот мой vbox контейнер находится в другом vbox контейнере, но там неправильные flex настройки. Поэтому я указываю flex: 1 для всех узлов вложенности, ведущих к сетке. Большое спасибо! - person msangel; 30.12.2014