Question

我在DIV中渲染Grid Panel，对于DIV和Grid Panel我都没有指定任何宽度，因此它应该占用浏览器的所有可用宽度。当用户重新调整浏览器窗口大小时，此网格不会根据浏览器的新宽度重新调整大小。我已经尝试过在下面的链接中找到的建议/解决方案，但这些对我不起作用

Stackoverflow post - 从此我尝试了窗口重新调整大小的解决方案

ExtJs Plugin - Fit to parent - 我还将这个ExtJs 3插件移植到ExtJs 4，但这也没有帮助

非常感谢任何指针或帮助

以下是我项目的Grip面板的代码片段

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



    }
});

以下是我用于在网格上方呈现的代码

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

Answer 1

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

Answer 2

修复此问题，其他周围的HTML存在问题，而不是网格

ExtJs 4 Grid面板在窗口大小调整时没有正确调整大小

2 个答案: