barra de desplazamiento vertical en ExtJS GridPanel

Question

Estoy trabajando en un proyecto donde tengo un solo GridPanel en una página. El panel puede mostrar cualquier cantidad de filas y tengo el conjunto de propiedades autoHeight, que hace que GridPanel se expanda para ajustarse al número de filas. Ahora quiero una barra de desplazamiento horizontal porque en algunas resoluciones no se muestran todas las columnas (y no puedo reducir el número de columnas).

Si ajustar la autoHeight tengo ninguna barra de desplazamiento horizontal, si no me la puse y establecer una altura fija tengo una barra de desplazamiento horizontal, pero el GridPanel, obviamente, no se ajusta al número de filas ....

¿Hay algo que pueda hacer para arreglar esto? Parece que no puedo encontrar una propiedad que logre el resultado que necesito.

Answer 1

Parece un problema con la configuración del diseño en lugar de las propiedades del objeto.

Intente configurar la propiedad de diseño del contenedor principal para que se ajuste, ¿puede también proporcionar un fragmento de código?

Answer 2

Como dijo Ergo, es más probable que se trate de un problema de diseño: el GridPanel es probablemente más alto que el panel que lo contiene, lo suficientemente alto como para no necesitar una barra de desplazamiento pero no totalmente visible, obviamente. Coloque el GridPanel en un contenedor con un diseño adecuado, es decir, diseño de borde, diseño apropiado o diseño de tarjeta. Obtener gerentes de diseño correctos es generalmente una de las partes más difíciles de ExtJS-Fu.

Answer 3

Mi idea sería establecer autoScroll: true en el panel.Panel que contenía la grilla.

Answer 4

Encontrará que poner un contenedor primario (Panel de Panel Externo o cualquier contenedor realmente) alrededor de su panel de la red para tener éxito. Si codifica la altura, el ancho y el diseño (para "encajar") en el contenedor primario, el elemento secundario (Ext.grid.Panel) se expandirá para ocupar todo el espacio disponible en el contenedor primario.

Ver páginas 80 y 81 de Ext JS 4 Web Application Development Cookbook.

Puede usar la notación de instanciación diferida para 'Ext.grid.Panel'. Significado usar 'cuadrícula' para su hijo contenedor (artículo) xtype propiedad.

Ext.create('Ext.panel.Panel', { 
    title: 'parent container', 
    width: 800, 
    height: 600, 
    layout: 'fit', 
    items: { 
     xtype: 'grid', 
     title: 'child container', 

     ... define your grid here 

    }, 
    renderTo: 'grand parent container' 
}); 

Answer 5

añadiendo

viewConfig = { 
     scroll:false, 
     style:{overflow: 'auto',overflowX: 'hidden'} 
    } 

veces provoca un error con la visualización de 2 barras de desplazamiento. Para evitarlo en mi caso agregué un oyente. Y luego funciona bien

this.on('scrollershow',function(scroller,orientation,eOpts){ 
     if (orientation=='vertical'){ 
      scroller.hide();     
     } 
},this);