Databases
StackOverflow2013
Postsdbo
PO
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. PO
    text
    copied!<p>Have you tried to set a inline style for the column that contains your TextButtonCell?</p> <p>Something like this:</p> <pre><code>deleteButton.setColumnTextClassName(CommonStyles.get().inlineBlock()); </code></pre> <p>Here is some sample code, based on the Sencha showcase:</p> <pre><code>public class GridTextButtonAlignment implements EntryPoint { private static final String[] COLORS = new String[] {"161616", "002241", "006874", "82a700", "bbc039", "f3f1cd"}; interface PlaceProperties extends PropertyAccess&lt;Plant&gt; { ValueProvider&lt;Plant, Date&gt; available(); @Path("name") ModelKeyProvider&lt;Plant&gt; key(); ValueProvider&lt;Plant, String&gt; name(); ValueProvider&lt;Plant, Integer&gt; difficulty(); ValueProvider&lt;Plant, Double&gt; progress(); ValueProvider&lt;Plant, String&gt; color(); ValueProvider&lt;Plant, String&gt; light(); } private static final PlaceProperties properties = GWT.create(PlaceProperties.class); private ListStore&lt;Plant&gt; store; public class CellColumnResizer&lt;M, T&gt; implements ColumnWidthChangeHandler { private Grid&lt;M&gt; grid; private ColumnConfig&lt;M, T&gt; column; private ResizeCell&lt;T&gt; cell; public CellColumnResizer(Grid&lt;M&gt; grid, ColumnConfig&lt;M, T&gt; column, ResizeCell&lt;T&gt; cell) { this.grid = grid; this.column = column; this.cell = cell; } @Override public void onColumnWidthChange(ColumnWidthChangeEvent event) { if (column == event.getColumnConfig()) { int w = event.getColumnConfig().getWidth(); int rows = store.size(); int col = grid.getColumnModel().indexOf(column); cell.setWidth(w - 20); ListStore&lt;M&gt; store = grid.getStore(); for (int i = 0; i &lt; rows; i++) { M p = grid.getStore().get(i); // option 1 could be better for force fit where all columns are // resized // would need to run deferred using DelayedTask to ensure only run // once // grid.getStore().update(p); // option 2 Element parent = grid.getView().getCell(i, col); if (parent != null) { parent = parent.getFirstChildElement(); SafeHtmlBuilder sb = new SafeHtmlBuilder(); cell.render(new Context(i, col, store.getKeyProvider().getKey(p)), column.getValueProvider().getValue(p), sb); parent.setInnerHTML(sb.toSafeHtml().asString()); } } } } } private Widget asWidget() { // reduce the padding on text element as we have widgets in the cells SafeStyles textStyles = SafeStylesUtils.fromTrustedString("padding: 1px 3px;"); ColumnConfig&lt;Plant, String&gt; nameColumn = new ColumnConfig&lt;Plant, String&gt;(properties.name(), 100, "Name"); // IMPORTANT we want the text element (cell parent) to only be as wide as // the cell and not fill the cell nameColumn.setColumnTextClassName(CommonStyles.get().inlineBlock()); nameColumn.setColumnTextStyle(textStyles); nameColumn.setAlignment(HasHorizontalAlignment.ALIGN_CENTER); TextButtonCell button = new TextButtonCell(); button.setText("Test"); button.addSelectHandler(new SelectHandler() { @Override public void onSelect(SelectEvent event) { Context c = event.getContext(); int row = c.getIndex(); Plant p = store.get(row); Info.display("Event", "The " + p.getName() + " was clicked."); } }); nameColumn.setCell(button); DateCell dateCell = new DateCell(); dateCell.getDatePicker().addValueChangeHandler(new ValueChangeHandler&lt;Date&gt;() { @Override public void onValueChange(ValueChangeEvent&lt;Date&gt; event) { Info.display("Date Selected", "You selected " + DateTimeFormat.getFormat(PredefinedFormat.DATE_SHORT).format(event.getValue())); } }); dateCell.setPropertyEditor(new DateTimePropertyEditor(DateTimeFormat.getFormat(PredefinedFormat.DATE_SHORT))); ColumnConfig&lt;Plant, Date&gt; availableColumn = new ColumnConfig&lt;Plant, Date&gt;(properties.available(), 170, "Date"); availableColumn.setColumnTextStyle(SafeStylesUtils.fromTrustedString("padding: 2px 3px;")); availableColumn.setCell(dateCell); ListStore&lt;String&gt; lights = new ListStore&lt;String&gt;(new ModelKeyProvider&lt;String&gt;() { @Override public String getKey(String item) { return item; } }); lights.add("Mostly Shady"); lights.add("Mostly Sunny"); lights.add("Shade"); lights.add("Sunny"); lights.add("Sun or Shade"); ColumnConfig&lt;Plant, String&gt; lightColumn = new ColumnConfig&lt;Plant, String&gt;(properties.light(), 130, "Light"); lightColumn.setColumnTextStyle(SafeStylesUtils.fromTrustedString("padding: 2px 3px;")); ComboBoxCell&lt;String&gt; lightCombo = new ComboBoxCell&lt;String&gt;(lights, new LabelProvider&lt;String&gt;() { @Override public String getLabel(String item) { return item; } }); lightCombo.addSelectionHandler(new SelectionHandler&lt;String&gt;() { @Override public void onSelection(SelectionEvent&lt;String&gt; event) { CellSelectionEvent&lt;String&gt; sel = (CellSelectionEvent&lt;String&gt;) event; Plant p = store.get(sel.getContext().getIndex()); Info.display("Lightness Selected", p.getName() + " selected " + event.getSelectedItem()); } }); lightCombo.setTriggerAction(TriggerAction.ALL); lightCombo.setForceSelection(true); lightColumn.setCell(lightCombo); lightCombo.setWidth(110); ColumnConfig&lt;Plant, String&gt; colorColumn = new ColumnConfig&lt;Plant, String&gt;(properties.color(), 140, "Color"); colorColumn.setColumnTextStyle(SafeStylesUtils.fromTrustedString("padding: 2px 3px;")); // This next line only works with any appearance that extends from Base ColorPaletteBaseAppearance appearance = GWT.create(ColorPaletteAppearance.class); appearance.setColumnCount(6); ColorPaletteCell colorPalette = new ColorPaletteCell(appearance, COLORS, COLORS) { @Override public boolean handlesSelection() { return true; } }; colorPalette.addSelectionHandler(new SelectionHandler&lt;String&gt;() { @Override public void onSelection(SelectionEvent&lt;String&gt; event) { Info.display("Color Selected", "You selected " + event.getSelectedItem()); } }); colorColumn.setCell(colorPalette); ColumnConfig&lt;Plant, Integer&gt; difficultyColumn = new ColumnConfig&lt;Plant, Integer&gt;(properties.difficulty(), 150, "Durability"); SliderCell slider = new SliderCell() { @Override public boolean handlesSelection() { return true; } }; slider.setWidth(140); difficultyColumn.setCell(slider); final ColumnConfig&lt;Plant, Double&gt; progressColumn = new ColumnConfig&lt;Plant, Double&gt;(properties.progress(), 150, "Progress"); final ProgressBarCell progress = new ProgressBarCell() { @Override public boolean handlesSelection() { return true; } }; progress.setProgressText("{0}% Complete"); progress.setWidth(140); progressColumn.setCell(progress); List&lt;ColumnConfig&lt;Plant, ?&gt;&gt; l = new ArrayList&lt;ColumnConfig&lt;Plant, ?&gt;&gt;(); l.add(nameColumn); l.add(availableColumn); l.add(lightColumn); l.add(colorColumn); l.add(difficultyColumn); l.add(progressColumn); ColumnModel&lt;Plant&gt; cm = new ColumnModel&lt;Plant&gt;(l); store = new ListStore&lt;Plant&gt;(properties.key()); List&lt;Plant&gt; plants = new ArrayList&lt;Plant&gt;(); plants.add(new Plant()); store.addAll(plants); final Grid&lt;Plant&gt; grid = new Grid&lt;Plant&gt;(store, cm); grid.setBorders(true); grid.getView().setAutoExpandColumn(nameColumn); grid.getView().setTrackMouseOver(false); grid.getColumnModel().addColumnWidthChangeHandler(new CellColumnResizer&lt;Plant, Double&gt;(grid, progressColumn, progress)); FramedPanel cp = new FramedPanel(); cp.setHeadingText("Cell Grid Example"); cp.setWidget(grid); cp.setPixelSize(920, 410); cp.addStyleName("margin-10"); cp.setButtonAlign(BoxLayoutPack.CENTER); cp.addButton(new TextButton("Reset", new SelectHandler() { @Override public void onSelect(SelectEvent event) { store.rejectChanges(); } })); cp.addButton(new TextButton("Save", new SelectHandler() { @Override public void onSelect(SelectEvent event) { store.commitChanges(); } })); return cp; } /** * This is the entry point method. */ public void onModuleLoad() { Widget con = asWidget(); Viewport viewport = new Viewport(); viewport.add(con); RootLayoutPanel.get().add(viewport); } } </code></pre> <p>And here the Plant class:</p> <pre><code>public class Plant { private DateTimeFormat df = DateTimeFormat.getFormat("MM/dd/y"); private static int AUTO_ID = 0; private int id; private String name; private String light; private double price; private Date available; private boolean indoor; private String color; private int difficulty; private double progress; public Plant() { id = AUTO_ID++; difficulty = (int) (Math.random() * 100); progress = Math.random(); } public Plant(String name, String light, double price, String available, boolean indoor) { this(); setName(name); setLight(light); setPrice(price); setAvailable(df.parse(available)); setIndoor(indoor); } public double getProgress() { return progress; } public void setProgress(double progress) { this.progress = progress; } public String getColor() { return color; } public int getDifficulty() { return difficulty; } public void setDifficulty(int difficulty) { this.difficulty = difficulty; } public void setColor(String color) { this.color = color; } public Date getAvailable() { return available; } public int getId() { return id; } public String getLight() { return light; } public String getName() { return name; } public double getPrice() { return price; } public boolean isIndoor() { return indoor; } public void setAvailable(Date available) { this.available = available; } public void setId(int id) { this.id = id; } public void setIndoor(boolean indoor) { this.indoor = indoor; } public void setLight(String light) { this.light = light; } public void setName(String name) { this.name = name; } public void setPrice(double price) { this.price = price; } @Override public String toString() { return name != null ? name : super.toString(); } } </code></pre> <p>Take a look at the nameColumn. There you'll find a TextButtonCell with a center alignment.</p> <p>GXT 3, tested with FF &amp; IE8</p>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload