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

grid

Question

Tengo una grilla 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 cuadrícula muy bien con una excepción-- el ancho está limitado a la suma de los anchos de columna. Cuando renuncio a los anchos de columna, la rejilla termina teniendo 0 ancho.

¿Hay alguna forma de que esta cuadrícula y sus columnas se expandan para llenar todo el área disponible?

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

Answer 1

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

cupakob

Answer 2

El GXT Grid tiene un método llamado setAutoExpandColumn () que tomará el id de la columna en la que desea ocupar todo el espacio disponible en su grilla. 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 3

Esta es la manera de hacerlo:

grid.getView().setAutoFill(true);

Aquí hay un punto clave que debe recordarse: con setAutoFill () cuando cambia el tamaño de una columna, gxt siempre cambiará el tamaño de todas las otras columnas para que la cuadrícula 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 4

Puede ser que sea demasiado tarde por ahora, pero traté de establecer las propiedades autoHeight y autoWidth de la grilla en false, 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);