Grid won't display vertical scrollbar

[jeotte]

I've been reading around and have seen many other similar posts, but I'm still not getting it.

I have a gridpanel on a window, and there are no horizontal scrollbars. Everything I've read says the containing panel needs to have 'layout: fit', and I tried that in my fiddle, but it still doesn't work. Please take a look at the fiddle and tell me what I'm missing.

https://fiddle.sencha.com/#view/editor&fiddle/2l45

Here's the code if that's easier to look at:

        var mygrid = new Ext.grid.GridPanel({
            id: 'searchUsers-grid',
            margin: 10,
            autoScroll: true,
            store: mystore,
            columns: [
                    {
                        text: 'login',
                        flex: 1,
                        sortable: true,
                        dataIndex: 'userLogin'
                    }, {
                        text: 'fname',
                        flex: 1,
                        sortable: true,
                        dataIndex: 'firstName'
                    }, {
                        text: 'lname',
                        flex: 1,
                        sortable: true,
                        dataIndex: 'lastName'
                    }
                ]
        });


        // Create the modal window
        Ext.define('Admin.SearchADUsers', {
            extend: 'Ext.window.Window',
            id: 'searchADUsers',
            alias: 'widget.SearchADUsers',
            autoShow: true,
            width: 350,
            height: 300,
            closable:false,
            draggable:false,
            resizable:false,
            modal: true,
            initComponent: function () {
                var me = this;
                Ext.applyIf(me, {
                    title: "search ad",
                    layout: 'fit',


                    items: [{
                            xtype: 'panel',
                            /*layout: {
                                type: 'vbox',
                                align: 'stretch'
                            },*/
                            layout: 'fit',
                            items: [mygrid]
                        }]
                });
                me.callParent(arguments);
            }
        });

[rafalw]

Hi,

I think you need to add layout for window in config not in initComponent.
Then it should works.

Ext.define('Admin.SearchADUsers', {
extend: 'Ext.window.Window',
id: 'searchADUsers',
alias: 'widget.SearchADUsers',
autoShow: true,
width: 350,
height: 300,
closable:false,
draggable:false,
resizable:false,
layout: 'fit',
modal: true,
initComponent: function () {
var me = this;
Ext.applyIf(me, {
title: "search ad",
// layout: 'fit',


items: [{
xtype: 'panel',
/*layout: {
type: 'vbox',
align: 'stretch'
},*/
layout: 'fit',
items: [mygrid]
}]
});
me.callParent(arguments);
}
});

[jeotte]

Wow. That worked. I don't fully understand why...guess I need to read up on it! Thank you so much for the help!