Ext.grid.Panel - Resize/Size and Scroll Bar

[swalker@pintnight.com]

I've been struggling to understand initial size, resizing and the scroll bar based on height. What I'm trying to do is that I want my grid to fill in the space in the browser window with what ever the size is width and height. The initial size seems to be okay. When resizing the browser, the grid does not automatically resize, it says at the original size.

And then there is the scrollbar, I want the scroll to become visible if the amount of data has exceeded the height. The only way that I could do that is by specify 'height: 1000' (you will see below in my code). But, I cannot make assumption on the height since everybody will have a different height for their browser.

My Code:

/*
 * File: app/view/Contacts.js
 *
 */

var searching = {
    ftype: 'searching',
    minChars: 2,
    mode: 'local'
};

Ext.define('Contacts.view.Contacts', {
    extend: 'Ext.grid.Panel',

    renderTo: 'maincontentarea-body',
    id: 'contacts-container',

    title: 'Contacts',
    store: 'Contacts.store.Contacts',

    border: false,

    stateful: true,
    stateId: 'stateGrid',

    layout: {
        type: 'fit'
    },

    // Need this to get the scroll bar to display, but we don't want the height,
    // we want the height to fill in automatically
    height: 1000,

    resizable: true,

    initComponent: function() {
        var me = this;

        Ext.applyIf(me, {
            columns: [
                {
                    xtype: 'gridcolumn',
                    dataIndex: 'firstname',
                    flex: 1,
                    text: 'First Name',
                    sortable: true
                },
                {
                    xtype: 'gridcolumn',
                    dataIndex: 'lastname',
                    flex: 1,
                    text: 'Last Name',
                    sortable: true
                },
                {
                    xtype: 'gridcolumn',
                    dataIndex: 'company',
                    flex: 1,
                    text: 'Company',
                    sortable: true
                },
                {
                    xtype: 'gridcolumn',
                    dataIndex: 'email',
                    flex: 1,
                    text: 'Email',
                    sortable: true
                }
            ],
            listeners: {
                afterrender:function() {
                    console.log( 'afterrender ' +this.getHeight())
                },
                boxready:function() {
                    console.log( 'boxready ' +this.getHeight())
                },
                resize:function() {
                    console.log( 'resize ' +this.getHeight())
                }
            },
            viewConfig: {
                trackOver: false,
                listeners: {
                    itemdblclick: {
                        fn: me.onGridviewItemDblClick,
                        scope: me
                    }
                }
            },
            /*
            plugins: [
                new Ext.ux.grid.Search({
                    iconCls: 'icon-zoom',
                    readonlyIndexes: ['note'],
                    disableIndexes: ['pctChange'],
                    minChars: 2,
                    autoFocus: true
                    //menuStyle: 'radio'
                }), this.rowActions
            ],
            */
            initTopToolbar: function(){
                return Ext.create('Ext.ux.toolbar.GridSearching', {
                    grid            : this,
                    menuPosition    : 'right',
                    menuIconCls        : 'icon-config',
                    inputWidth        : 200,
                    showSelectAll    : false,
                    menuText        : null,
                    menuTip            : 'mooSearch Menu Tip',
                    inputTip        : 'mooSearch Input Tip',
                    disableIndexes    : ['trad_strumento','trad_metodo'],
                    items            : ['->', this.getAddButton()]
                    });
            },
            dockedItems: [
                {
                    xtype: 'toolbar',
                    dock: 'top',
                    items: [
                        {
                            xtype: 'button',
                            text: 'New'
                        },
                        {
                            xtype: 'button',
                            text: 'Edit'
                        },
                        {
                            xtype: 'button',
                            text: 'Delete'
                        }
                    ]
                },
                {
                    xtype: 'pagingtoolbar',
                    dock: 'top',
                    autoShow: true,
                    displayInfo: true,
                    store: 'Contacts.store.Contacts',
                    displayMsg: 'Displaying contacts {0} - {1} of {2}',
                    emptyMsg: "No contacts",
                    /*
                    items: [
                        '-',
                        {
                            text: 'Search',
                            pressed: false,
                            enableToggle: true,
                            toggleHandler: function(btn, pressed) {
                                console.log('...contact search toggleHandler');
                            }
                        }
                    ]
                    */
                }
            ]
        });

        Ext.QuickTips.init();

        me.callParent(arguments);
    },

    onGridviewItemDblClick: function(dataview, record, item, index, e, options) {
        console.log('...onGridviewItemDblClick: internalId: ' + record.internalId);

        var contactForm = new Ext.form.Panel({
            title: 'Contact Detail',
            id: 'contactFormPanel',
            width:425,
            frame:true,
            items: [
                new Ext.form.TextField({
                    id:"firstname",
                    name: "firstname",
                    fieldLabel: 'First Name',
                    anchor: '100%',
                    //width:275,
                    allowBlank:false,
                    readOnly: false,
                    listeners: {
                        afterrender: function(field) {
                            field.focus(false, 250);
                        }
                    }
                }),
                new Ext.form.TextField({
                    id:"lastname",
                    name: "lastname",
                    fieldLabel: 'Last Name',
                    anchor: '100%',
                    allowBlank:false,
                    readOnly: false
                }),
                new Ext.form.TextField({
                    id:"company",
                    name: "company",
                    fieldLabel: 'Company',
                    anchor: '100%',
                    allowBlank:false,
                    readOnly: false
                }),
                new Ext.form.TextField({
                    id:"email",
                    name: "email",
                    fieldLabel: 'Email',
                    anchor: '100%',
                    allowBlank:false,
                    readOnly: false
                })
            ],
            listeners: {
                afterRender: function(form, options) {
                    this.keyNav = Ext.create('Ext.util.KeyNav', this.el, {
                        //enter: handleContactEnterKey,
                        //scope: this
                    });
                }
            },
            dockedItems: [{
                xtype: 'toolbar',
                dock: 'bottom',
                layout: {
                    pack: 'end',
                    type: 'hbox'
                },
                items: [
                {
                    xtype: 'button',
                    id: 'cancelFormButton',
                    text: 'Cancel',
                    listeners: {
                        click: {
                            fn: function(){
                                contactPopup.close();
                            }
                        }
                    }
                },
                {
                    xtype: 'button',
                    id: 'contactFormButton',
                    text: 'Save',
                    listeners: {
                        click: {
                            fn: function(){
                                //handleLogin();
                                contactPopup.close();
                            }
                        }
                    }
                }
                ]
            }]
        });

        var contactPopup = null;

        //create the popup menu on the first click and reuse on subsequent clicks
        if (!contactPopup) {
            contactPopup = new Ext.Window({
                id: "contactDetailWindow",
                layout: "fit",
                draggable: false, //don't allow the window to be drag around the screen
                resizable: false, //don't allow the window to be resize
                closeable: true,
                header: false,
                border: false,
                plain: true,
                modal: true,
                shadow: true,
                width: 350,
                constrain: true,
                items: contactForm
            });
        }

        if (contactPopup.isVisible()) {
            contactPopup.hide();
        }
        else {
            contactPopup.show();
        }
    }
});

[skirtle]

Generally sizes are calculated outside-in. This means that the outermost container has its size determined first (usually a fixed size) and then it sizes its children accordingly. The alternative (only available since 4.1) is to shrink-wrap children. In that scenario the child size is known and the parent container wraps around the child to determine its own size. The width and height don't have to use the same strategy, one could come from the container and the other from the child.

You talk about making the grid fill the browser window but that isn't what you've got in your code. You have a grid inside an Ext window with a fit layout. The window isn't actually required, you could just float the grid, but it probably makes things easier doing it the way you have.

In your case you need to make the Ext window fit the size of the browser window - the size of the grid will then be determined by the layout. That should just need the maximized config:

http://docs.sencha.com/ext-js/4-1/#!...-cfg-maximized