I have a grid in GXT, something like this:
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);
This creates the grid just fine with one exception-- the width is limited to the sum of the column widths. When I forgo the column widths, the grid ends up having 0 width.
Is there a way to have this grid and its columns expand to fill the entire area available to it?
Edit: One of the difficulties is the ColumnConfig.setWidth() method only takes an int as a parameter, so I can't specify "100%" as a string or something like that.
This is the way to do it:
grid.getView().setAutoFill(true);
Here is a key point to remember: With setAutoFill() when you resize a column, gxt will always resize all other columns so that the grid continues to fit the container. Without autoFill, if you just use the autoExpand column, if you resize one column, the grid could grow bigger (or smaller) than the containing component and in such a case you have to manually resize the grid to fit - which is not only a pain, it is almost impossible for the end user in most cases.
There is a function in GridView that forces all columns to fit to the availiable space. It is like setting a flex of 1 to every column.
grid.getView().setForceFit(true);
The GXT Grid has a method named setAutoExpandColumn() that will take id of the column that you want to take up all available space in your grid. I would remove the setAutoHeight and setAutoWidth from the grid.
I am not sure if you are trying to achieve a fixed width layout or flexible layout that will expand based on the height/width of the browser. Here's what I typically do as I want my grids to take up all of the height and width and scroll on the page. Hope this helps.
--Vinny
Viewport viewport = new Viewport();
viewport.setLayout(new BorderLayout());
ContentPanel center = new ContentPanel();
center.setFrame(false);
center.setLayout(new FitLayout());
center.add(grid);
you can try to style the grid/columns with css (setStyle/setColumnStyleName) and then you can use 100% as width.
cupakob
May be it's too late for now, but I tried to set grid's autoHeight and autoWidth properties to false, combining it with setting autoExpandColumn (I didn't need to change default autoFill's value).
grid.setAutoHeight(false);
grid.setAutoWidth(false);
Related
I am developing a Delphi game for my (grade 10) PAT.
I am using an image as a grid for my game and placing individual panels in each grid because I do not know how to use string grids as it's my first year with Delphi. When I place the panels perfectly in each grid of the image and run my code everything looks normal until I go full screen,then all the panels are in each grid but the size is not in proportion with the image as I placed it before.
A solution would be much appreciated.
Thanks in advance.
Use a TGridPanel in place of your image. Each panel goes into one cell of the grid, and with the column widths and row heights set as a percentage (which is the default), and both the grid and the panels in the grid having Align set to alClient, the cells, and therefore the panels, will adjust their size proportional to the entire form.
I have a dropdown list on a filter panel which needs to stretch dynamically to fit the content as shown:
I have tried several content size fitters but cannot find anything, If possible I would like to set a max width it can expand to then truncate everything longer than that, I would also like it to expand only to the right with a right pivot point. I have found a similar example here: https://forum.unity3d.com/threads/resize-standard-dropdown-to-fit-content-width.400502/
Thanks!
Well. Lets start with the code from that Unity forum thread.
var widest = 0f;
foreach (var item in _inputMines.GetComponentsInChildren<Text>()) {
widest = Mathf.Max(item.preferredWidth, widest);
}
_inputMines.GetComponent<LayoutElement>().preferredWidth = widest + 40;
We want to have a max-width allowed, so any content longer than this will be truncated. So let's add that variable:
var maxWidth = 250f;
//or whatever value; you may wish this to be a property so you can edit it in the inspector
var widest = 0f;
foreach (var item in _inputMines.GetComponentsInChildren<Text>()) {
Now we use the smaller of the two width values. Then apply it to the content layout:
}
widest = Mathf.Min(maxWidth, widest);
_inputMines.GetComponent<LayoutElement>().preferredWidth = widest + 40;
The +40 should be retained because that deals with the scrollbar. Your maxWidth value should be chosen to account for this.
Finally we want the longer items to get cut off nicely.
Give each dropdown item a Rect Mask 2D component (Component -> UI -> Rect Mask 2D). The template object exists in the scene hierarchy before the game is run, just disabled. You can just add the component to the parent transform, the one with the image (so the text is clipped).
You'll need to make sure that the mask covers the same width as the image graphic and expands along with it, possibly slightly shorter on the X direction so the text gets cut off before the image border is drawn. This should happen automatically, but you will need to check and possibly make some alterations to the template object. Alternatively you can use an Image Mask, but you'll have to play with that one yourself, but it will allow for non-rectangular clipping.
That's it!
From what I understand the DataGrid auto resizes the columns.
What I would like is DataGrid to respect the column widths I set, and to show the horizontal scrollers accordingly. Is there a way to achieve this?
DataGrid gives you complete control over the width of its columns.
For example, if you set the width of all columns in pixels except for one column which has a width equal to 100%, then all columns will have exactly the width you specified, except for the percentage column which will shrink or expand based on the width of a DataGrid itself. If you want all columns to have fixed width, then you should set the width of the entire DataGrid explicitly in pixels.
There is also an important .setMinimumTableWidth method. You can use it to tell the DataGrid that it can resize with the width of its parent container, but never be smaller than a certain number of pixels. In this case, if a parent container is too small to accommodate all columns at their desired width, the horizontal scrollbar will appear.
I am trying to create a DockLayoutPanel using GWT. It should occupy the complete screen.
DockLayoutPanel dockPanel = new DockLayoutPanel(Unit.EM);
dockPanel.addSouth(new HTML("South"), 2);
dockPanel.addNorth(new HTML("North"), 2);
dockPanel.addEast(new HTML("Easat"), 2);
dockPanel.addWest(new HTML("West"), 2);
dockPanel.add(new HTML("Center"));
RootLayoutPanel.get().add(dockPanel);
I believe that the second parameter to the add methods is the width of the respective panels. How does the layout decide the height of the panel?
How can I style the layout, like add border to the panels, spacing between the panels, add panel headings in-line with the border?
Should the panel background colors be set using CSS, or is there a way to do so from java?
Can I make these panels as drag and drop panels?
1) The second parameter is really the size of the panel. It will be the width or the height, depending of the layout position. Use Unit.PX or Unit.PC for a clearer result, the EM unit maybe confusing at the beginning.
2) Use CSS styles.
3) Again, use CSS
4) It's not possible using GWT alone. Take a look to the GWT-Mosaic project. Specially to the "Drag & Drop Column/Row Layout": http://mosaic.analytical-labs.com/#CwDNDColumnRowLayout
1) The height and such are determined using normal HTML layout rules. The height and width of the panel is just the height and width of the containing div.
2) Style it using CSS just as you would any other div. UiBinder makes this pretty easy.
3) Yes, use CSS. You can call getElement() and getStyle() if you want to manipulate it directly or addStyleName() to add a CSS class. Regardless, UiBinder is probably the better bet than doing it in Java.
4) AFAIK, there's no way to do this out of the box. You'll have to write some code to handle that. SplitLayoutPanel will let you change the sizes of the panels, but not the positions.
I have a horizontalpanel with 3 verticalpanels inside.
In the verticalpanels there are custom widgets
I need all verticalpanels has the same height (even if they have different number of widgets inside) and a button in the empty space.
So, I put all panels height = 100% and the buttons height = 100%.
The problem is that the verticalpanel cells height are bigger than my widgets, so it left a space between all verticalpanels widgets.
Here is an example
How can I adjust the verticalpanels cells height to my widgets height. My widgets are not images like in the example, so i can't know the widgets height.
I have a lot of time in this problem, anyidea will help
Thx!!!!
Haven't tried it, but this should work or at least give you something to start:
VerticalPanel.setCellHeight(yourWidget, Integer.toString(yourWidget.getElement().getOffsetHeight())+"px");
What it does:
setCellHeight() sets the height of the cell the widget is in you pass to the function.
The second parameter in the function is the height of that cell. This gets a little tricky because you don't know the height.
With the getElement() you get the Element of that widget in the DOM of the browser, on that element you can call getOffsetHeight().
getOffsetHeight() returns an integer so you need to cast it into a String and concatenate "px" to it so the browser knows it's pixel and not em or something like that.