ExtJs 4 Grid panel not resizing properly on window resizing

Question

I am rendering Grid Panel in a DIV, for both DIV and Grid Panel I have not specified any width so that it should take up all the browser's width available. When browser window is re-sized by user this Grid do not re-size itself as per new width of browser. I have already tried suggestion / solutions I found in below links, but these are not working for me

Stackoverflow post - From this I tried on window re-size solution

ExtJs Plugin - Fit to parent - I also ported this ExtJs 3 plugin to ExtJs 4, but this also didn't helped

Any pointer or help is highly appreciated

Here is code snippet of Grip panel form my project

    Ext4.define('myNameSpace.myGrid', {
    extend: 'Ext4.grid.Panel',
    alias: ['widget.myGrid'],
    constructor: function (config) {
        config = Ext4.apply({}, config || {}, {
            columnLines: true,
            sortableColumns: false,
            enableColumnHide: false,
            enableColumnMove: false,
            enableColumnResize: false,
            forceFit: false,
            viewConfig: {
                enableTextSelection: true,
                stripeRows: false,
                loadMask: false,
                emptyText: '<div class="x-grid-empty"> NO Data present</div>',
                deferEmptyText: true,
                getRowClass: function(record, rowIndex, rowParams, store){
                    return record.data.isExpired ? "expired-transaction" : '';
                }
            },
            columns: {
                defaults: { 
                    height: 30  
                },
                items: [
                    {
                        text: "&#160;",
                        id: "recurringColumnHdr",
                        width: 30,
                        dataIndex: "isRecurring",

                        align: "center"
                    },
                    {
                        text: "From",
                        id: "fromColumnHdr",
                        width: 175,
                        flex: .15,
                        dataIndex: "fromAccountDescription"
                    },
                    {
                        text: "To",
                        id: "toColumnHdr",
                        width: 175,
                        flex: .15,
                        dataIndex: "toAccountDescription"
                    },
                    {
                        text: "Amount",
                        id: "amountColumnHdr",
                        width: 100,
                        dataIndex: "amount",
                        renderer: Ext4.util.Format.usMoney,
                        align: 'right'
                    },
                    {
                        text: "Date",
                        id: "dateColumnHdr",
                        width: 75,
                        dataIndex: "transferDate",
                        align: 'right'

                    },
                    {
                        text: "Repeat",
                        id: "repeatColumnHdr",
                        dataIndex: "frequency",
                        flex:.35,

                    },
                    {
                        text: "Memo",
                        dataIndex: "memo",
                        id: "memoColumnHdr",
                        flex: .35
                    }
                ]
            },
            dockedItems: [{
                xtype: 'toolbar',
                dock: 'bottom',
                height: 30
            }]
        });
        this.callParent([config]);



    }
});

Here is code which I am using to render above grid

 Ext4.create('myNameSpace.myGrid', {
            store: Ext4.create('myGridStore'),
            renderTo: 'transfersGrid',
            id: "transferGridPanel"
        });

Answer 1

在网格配置中使用minWidth，maxWidth，minHeight和maxHeight属性

Answer 2

已解决此问题，其他周围的HTML出现了问题，而不是网格出现了问题