javascript - EXTJS 3：autoHeightとautoWidthをグリッドに設定します

Question

私はEXTJS3を使用していますが、次のようなコードがあります。頭痛の部分は

1. atuo水平スクロールバーをグリッドに配置する方法は？
2. グリッドに最大の高さをキャプチャさせる方法は？自動垂直スクロールバーをグリッドに設定する方法は？

現在、グリッドをフレームと高さに手動で設定する必要があります。

frame: true,
height: 500,

このようにすると、ユーザーがIEサイズを変更すると、水平スクロールバーが消えます。autoHeightとautoWidthを試しましたが、まだ機能しません。

//register this namespace
Ext.namespace('MyPkg.Ui');

//create a class in this namespace
MyPkg.Ui.Report = Ext.extend(Ext.form.FormPanel, {
    allowpaging: true,
    pageSize: 30,

    initComponent: function () {

        var period_start = new Ext.form.DateField({
            id: 'PERIOD_START',
            fieldLabel: 'PERIOD START',
            format: 'm/d/Y',
            allowBlank: true,
            width: 250
        });
        var Store = new Ext.data.DirectStore({           
            autoLoad: false,
            paramsAsHash: false,
            paramOrder: 'PERIOD_START',
            root: 'Report',         
            totalProperty: 'total',
            fields: [
                { name: '_DETAIL_ID', type: 'string' },
                { name: 'RUNID', type: 'string' },   
                ....
            ],
            remoteSort: false,
            listeners: {
                load: function (store, records, opt) {
                    //Grid.setHeight(500);
                    Grid.doLayout();                   
                }
            }
        });

        var pager = new Ext.PagingToolbar({
            store: Store,
            displayInfo: true,
            pageSize: this.pageSize,
            listeners: {
                beforechange: function (paging, params) {
                    var reportStore = Ext.StoreMgr.lookup('Store');
                    reportStore.setBaseParam('start', params.start);
                    reportStore.setBaseParam('limit', this.pageSize);
                    reportStore.setBaseParam('PERIOD_START', period_start.getValue());                  
                }
            }
        });

        var Grid = new Ext.grid.GridPanel({
            store: Store,
            loadMask: true,
            stripeRows: true,
            frame: true,
            height: 500,
            colModel: new Ext.grid.ColumnModel({
                defaults: {
                    width: 120,
                    sortable: true
                },
                columns: [

                {header: '', dataIndex: 'ROW_ID'},
                { header: 'PRICING FEED', dataIndex: 'PRICING_FEED' },
                { header: 'DATAFILE TREE', dataIndex: 'DATAFILE_TREE' },
                { header: 'ADO LIST ID', dataIndex: 'ADO_LIST_ID' },
                { header: 'FEED RUN DATE', dataIndex: 'FEED_RUN_DATE_STR' },
                .....

                ]
            }),
            viewConfig: {
                forceFit: false
            }
        });

        var config = {
            items: [period_start, Grid],
            api: {
                submit: Report.ReadReport
            },
            bbar: pager,
            tbar: [....]
        }; //use the config we defined as the initial config for this class
        Ext.apply(this, Ext.apply(this.initialConfig, config));

        //use this function as the initComponent function
        MyPkg.Ui.Report.superclass.initComponent.call(this);
    }
});

Ext.reg('Report', MyPkg.Ui.Report);