使用ExtJS-3.2在IE11中使用gridPanel高度0

Question

我正在向IE11更新使用ExtJS-3.2的网络应用程序。

我的问题是一系列4个gridPanel，IE11解释了第一个gridPanel，但是当代码指定height:0时，其他3个解释为height:282。

第一个确定的网格面板

        //Here is the "query"
        var datosProductos = [
            <logic:iterate name="consultaMultipleForm" property="listaActivos1" id="productos" indexId="index">
                <c:if test="${index != 0}"> , </c:if>
                [
                    '<bean:write name="productos" property="idTipo" />',
                    '<bean:write name="productos" property="descripcionTipo" />'
                ]
            </logic:iterate>
        ];
        storeProductos = new Ext.data.SimpleStore({
            proxy: dameProxy( 'GIConsultaMultiple.do' ),
            autoLoad: false,
            fields: [
               {name: 'ID'},
               {name: 'nombre'}
            ],
               data: datosProductos
        });
        // I think here is the important part
        gridProductos = new Ext.grid.GridPanel({
            columnWidth:.14,
            store: storeProductos,
            id: 'productosGrid',
            bodyStyle: 'border:1px solid #99BBE8',
            autoScroll : true,
            height: 282,                
            frame: true,
            columns: [
                {id: 'nombreProductoID', header: '<span style="font-size:10px; font-weight:bold"><bean:message key="gestionInventarios.consultaMultiple.resultado.tabla1.cabecera" /></span>',
                    renderer: pintaFilaProducto, width: 20, sortable: true, dataIndex: 'nombre'}
            ],
            stripeRows: true,
            minColumnWidth: 10,
            sm: new Ext.grid.RowSelectionModel({
                singleSelect:true
            }),             
            plain:true,
            border: true,
            loadMask: new Ext.LoadMask( Ext.getBody(), {
                msg:'<bean:message key="generic.label.cargando"/>'
            }),
            style: 'text-align: left;',             
            autoExpandColumn: 'nombreProductoID'
        });
        gridProductos.on('rowdblclick', function(gridProductos, rowIndex, e) {
            consulta_multiple(storeProductos.getAt(rowIndex).data, "0");
        });
        gridProductos.on('rowclick', function(gridProductos, rowIndex, e) {
            ver_detalle(storeProductos.getAt(rowIndex).data.ID, "0");
        });

这是第二个gridPanel（其他的是相同但有其他ID和数据。

            var datosProcesos = [
            <logic:iterate name="consultaMultipleForm" property="listaActivos2" id="procesos" indexId="index">
                <c:if test="${index != 0}"> , </c:if>
                [
                    '<bean:write name="procesos" property="idTipo" />',
                    '<bean:write name="procesos" property="descripcionTipo" />'
                ]
            </logic:iterate>
        ];
        storeProcesos = new Ext.data.SimpleStore({
            proxy: dameProxy( 'GIConsultaMultiple.do' ),
            autoLoad: false,
            fields: [
               {name: 'ID'},
               {name: 'nombre'}
            ],
               data: datosProcesos
        });
        gridProcesos = new Ext.grid.GridPanel({
            columnWidth:.14,
            store: storeProcesos,
            id: 'procesosGrid',
            bodyStyle: 'border:1px solid #99BBE8',
            autoScroll : true,
            height: 282,
            frame: true,
            columns: [
                {id: 'nombreProcesoID', header: '<span style="font-size:10px; font-weight:bold"><bean:message key="gestionInventarios.consultaMultiple.resultado.tabla2.cabecera" /></span>',
                    renderer: pintaFilaProducto, width: 20, sortable: true, dataIndex: 'nombre'}
            ],
            stripeRows: true,
            minColumnWidth: 50,
            sm: new Ext.grid.RowSelectionModel({
                singleSelect:true
            }),
            plain:true,
            border: true,
            loadMask: new Ext.LoadMask( Ext.getBody(), {
                msg:'<bean:message key="generic.label.cargando"/>'
            }),
            style: 'text-align: left;',
            autoExpandColumn: 'nombreProcesoID'
        });
        gridProcesos.on('rowdblclick', function(gridProcesos, rowIndex, e) {
            consulta_multiple(storeProcesos.getAt(rowIndex).data, "1");
        });
        gridProcesos.on('rowclick', function(gridProcesos, rowIndex, e) {
            ver_detalle(storeProcesos.getAt(rowIndex).data.ID, "1");
        });

现在是一个有差异的屏幕。

以下是IE11如何显示网页（错误）：http://i62.tinypic.com/w02amg.png 以下是Chrome展示网络的方式（好）：http://i59.tinypic.com/w2czfr.png

此时我尝试了很多东西（高度：100％隔离区域......但没有任何东西对我有帮助，而且我很丢失）。

如果有人伸出援助之手会永远感激（除了更好地了解ext-JS）

---

的解决！

如果有人有同样的错误，我会解释一下稍作修改

只有我删除了

行

 height: 282,

并在Bodystyle行中添加了新高度

bodyStyle: 'border:1px solid #99BBE8; height: 276px',

完整的代码是：

 gridProcesos = new Ext.grid.GridPanel({
            columnWidth:.14,
            store: storeProcesos,
            id: 'procesosGrid',
            bodyStyle: 'border:1px solid #99BBE8; height: 276px;',
            autoScroll : true,
            frame: true,
            columns: [
                {id: 'nombreProcesoID', header: '<span style="font-size:10px; font-weight:bold"><bean:message key="gestionInventarios.consultaMultiple.resultado.tabla2.cabecera" /></span>',
                    renderer: pintaFilaProducto, width: 20, sortable: true, dataIndex: 'nombre'}
            ],
            stripeRows: true,
            minColumnWidth: 50,
            sm: new Ext.grid.RowSelectionModel({
                singleSelect:true
            }),
            plain:true,
            border: true,
            loadMask: new Ext.LoadMask( Ext.getBody(), {
                msg:'<bean:message key="generic.label.cargando"/>'
            }),
            style: 'text-align: left;',
            autoExpandColumn: 'nombreProcesoID'
        });

现在它完美无缺。