¿Cómo dejar que una grilla GXT ocupe todo el ancho disponible?

Question

que tienen una cuadrícula en GXT, algo como esto:

List<ColumnConfig> configs = new ArrayList<ColumnConfig>(); 
ColumnConfig config = new ColumnConfig(); 
config.setId("type"); 
config.setHeader("Type"); 
config.setWidth(50); 
configs.add(config); 
config = new ColumnConfig(); 
config.setId("text"); 
config.setHeader("Info"); 
config.setWidth(75); 
configs.add(config); 

columnModel = new ColumnModel(configs); 
listStore = new ListStore<DtoModel>(); 

grid = new Grid<DtoModel>(listStore, columnModel); 
grid.setAutoHeight(true); 
grid.setAutoWidth(true); 

VerticalPanel verticalPanel = new VerticalPanel(); 
verticalPanel.setLayout(new FillLayout()); 
verticalPanel.add(grid); 

Esto crea la red muy bien con una excepción-- la anchura está limitada a la suma de los anchos de columna. Cuando renuncio a los anchos de columna, la rejilla termina teniendo 0 ancho.

¿Hay alguna manera de expandir esta cuadrícula y sus columnas para llenar todo el área disponible para ella?

Editar: Una de las dificultades es el método ColumnConfig.setWidth() sólo toma un int como un parámetro, por lo que no se puede especificar "100%" como una cadena o algo por el estilo.

Answer 1

Ésta es la manera de hacerlo:

grid.getView().setAutoFill(true); 

Aquí es un punto clave para recordar: Con setAutoFill() al cambiar el tamaño de una columna, GXT será siempre cambie el tamaño de todas las otras columnas para que la grilla continúe encajando en el contenedor. Sin autocompletar, si solo usa la columna autoExpand, si cambia el tamaño de una columna, la cuadrícula podría crecer más grande (o más pequeña) que el componente que la contiene y en ese caso debe cambiar manualmente el tamaño de la cuadrícula para que quepa, que no es solo dolor, es casi imposible para el usuario final en la mayoría de los casos.

Answer 2

puede intentar diseñar la cuadrícula/columnas con css (setStyle/setColumnStyleName) y luego puede usar el 100% del ancho.

cupakob

Answer 3

El GXT rejilla tiene un método llamado setAutoExpandColumn() que se llevará a Identificación de la columna que desea ocupar todo el espacio disponible en su red. Eliminaría setAutoHeight y setAutoWidth de la grilla.

No estoy seguro de si está tratando de lograr un diseño de ancho fijo o un diseño flexible que se ampliará en función del alto/ancho del navegador. Esto es lo que hago normalmente, ya que quiero que mis cuadrículas ocupen todo el alto y ancho y se desplacen por la página. Espero que esto ayude.

--Vinny

Viewport viewport = new Viewport(); 
    viewport.setLayout(new BorderLayout()); 

    ContentPanel center = new ContentPanel(); 
    center.setFrame(false); 
    center.setLayout(new FitLayout()); 
    center.add(grid); 

Answer 4

Puede ser que sea demasiado tarde por ahora, pero traté de establecer las propiedades autoHeight y autoWidth de la grilla en falsas, combinándolas con la configuración autoExpandColumn (no necesité cambiar el valor de autoFill predeterminado).

grid.setAutoHeight(false); 
grid.setAutoWidth(false); 

Answer 5

Hay una función en GridView que obliga a todas las columnas a ajustarse al espacio disponible. Es como establecer una flexión de 1 en cada columna.

grid.getView().setForceFit(true);