extjs4 cómo configurar automáticamente el ancho de la columna de cuadrícula al ancho máximo de los contenidos?

Question

Si crea una cuadrícula sin ancho de columna o atributos flexibles, las columnas tendrán un valor predeterminado de 100px cada una.

Si hace doble clic en un separador de encabezado, la columna a la izquierda automáticamente se expande al tamaño del elemento de datos más grande en esa columna.

¿Hay alguna forma de configurar algunas columnas para que tengan automáticamente ese comportamiento?

Answer 1

forceFit: true en su configuración GridView obligará a las columnas a llenar el espacio restante.

forceFit: Boolean Especifique true para que los anchos de columna re-proporciones en todo momento.

El ancho inicialmente configurado de cada columna se ajustará para ajustarse a el ancho de la cuadrícula y evitará el desplazamiento horizontal. Si las columnas se redimensionan más tarde (manual o programáticamente), las otras columnas de la cuadrícula se redimensionarán para ajustarse al ancho de la cuadrícula.

Las columnas que están configuradas con fixed: true se han omitido de redimensionadas.

Answer 2

parte de la columna puede ser muy amplia, por ejemplo: texto de descripción o un nombre largo. Si configura el ancho de campo automático, parte de la columna puede ocupar un espacio significativo en su vista. ¿Cuál debería ser el límite de ancho máximo en este escenario? 50 CHAR, 100 CHAR?

Answer 3

así que supongo forceFit ya no es recomendado por sencha, debería intentar usar el método autoSize:
Editar: Hay que ir con un breve ejemplo, funciona en la primera columna :)

Ext.create('Ext.grid.Panel', { 
    title: 'Simpsons', 
    store: Ext.data.StoreManager.lookup('simpsonsStore'), 
    columns: [ 
     { text: 'Name', dataIndex: 'name', width: 150, autoSizeColumn: true }, 
     { text: 'Email', dataIndex: 'email', width: 150, autoSizeColumn: true, minWidth: 150 }, 
     { text: 'Phone', dataIndex: 'phone', width: 150 } 
    ], 
    viewConfig: { 
     listeners: { 
      refresh: function(dataview) { 
       dataview.panel.columns[0].autoSize();//works on the first colum 
      } 
     } 
    }, 
    width: 450, 
    renderTo: Ext.getBody() 
}); 

Tuve el mismo problema, ¡espero que ayude!