Question

我使用的是EXTJS 3，我的代码如下。头痛的部分是

如何将atuo水平滚动条放到网格上？
如何让网格捕获最大高度？如何将自动垂直滚动条设置为网格？

目前，我必须手动将Grid设置为Frame和height。

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);

EXTJS 3：将autoHeight和autoWidth设置为grid

0 个答案: