Come lasciare che una griglia GXT occupi tutta la larghezza disponibile?

Question

Ho una griglia GXT, qualcosa di simile:

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); 

Questo crea la griglia bene con un exception-- la larghezza è limitata alla somma delle larghezze delle colonne. Quando rinuncio alle larghezze delle colonne, la griglia finisce con una larghezza pari a 0.

C'è un modo per espandere questa griglia e le sue colonne per riempire l'intera area disponibile?

Edit: Una delle difficoltà è il metodo ColumnConfig.setWidth() richiede solo un int come parametro, quindi non posso specificare "100%" come una stringa o qualcosa di simile.

Answer 1

Questo è il modo per farlo:

grid.getView().setAutoFill(true); 

Qui è un punto chiave da ricordare: Con setAutoFill() quando si ridimensiona una colonna, GXT sarà sempre ridimensiona tutte le altre colonne in modo che la griglia continui ad adattarsi al contenitore. Senza auto-riempimento, se si utilizza semplicemente la colonna autoExpand, se si ridimensiona una colonna, la griglia potrebbe diventare più grande (o più piccola) del componente di contenimento e in tal caso è necessario ridimensionare manualmente la griglia per adattarla - che non è solo una dolore, è quasi impossibile per l'utente finale nella maggior parte dei casi.

Answer 2

si può provare a modellare la griglia/colonne con css (setStyle/setColumnStyleName) e quindi è possibile utilizzare il 100% come larghezza.

cupakob

Answer 3

Il GXT griglia ha un metodo denominato setAutoExpandColumn() che vi porterà id della colonna che si vuole prendere tutto lo spazio disponibile nella griglia. Rimuoverei setAutoHeight e setAutoWidth dalla griglia.

Non sono sicuro se si sta tentando di ottenere un layout a larghezza fissa o un layout flessibile che si espanderà in base all'altezza/larghezza del browser. Ecco cosa faccio di solito come voglio che le mie griglie occupino tutta l'altezza e la larghezza e scorrano sulla pagina. Spero che questo ti aiuti.

--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

Potrebbe essere troppo tardi per ora, ma ho provato a impostare false proprietà AutoHeight e AutoWidth della griglia su false, combinandolo con l'impostazione di autoExpandColumn (non è stato necessario modificare il valore predefinito di AutoFill).

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

Answer 5

C'è una funzione in GridView che forza tutte le colonne ad adattarsi allo spazio disponibile. È come impostare un flex di 1 su ogni colonna.

grid.getView().setForceFit(true);