GWT EditTextCell：如何增加EditTextCell中可编辑文本框的宽度？

Question

我在我的项目中使用GWT2.3。 当用户单击 editableTextCell 时，我想增加 editableTextBox 的宽度。 问题是我的列宽是 200 Px。当用户单击 editableTextCell 时，EditableTextCell 中的 TextBox 宽度约为 125px，与列宽度相比要小。

我在 Celltable 的列中添加了 EditTextCell

Column stringColumn = new Column(new EditTextCell()) { // 我的代码 cellTable.addColumn

(stringColumn, "MyColumn"); cellTable.setColumnWidth(checkBoxColumn, 200, Unit.PX);

我尝试了以下方法来增加 TextBox 宽度，但问题是我无法在文本框中编辑 + 焦点而不是丢失

    @Override
            public void onBrowserEvent(Context context, Element elem,Record object, NativeEvent event) {
                String type = event.getType();

                  int editedTexBoxSize = (cellTable.getOffsetWidth()-100)/cellTable.getColumnCount();

                  if(elem.getInnerHTML().startsWith("<INPUT")){
                      String test = elem.getInnerHTML();
                     // test = <INPUT tabIndex=-1 value=P __eventBits="2048"></INPUT>

                     test= test.replace("value", " size="+editedTexBoxSize+" value");


                    // test = <INPUT tabIndex=-1 size=131 value=P __eventBits="2048"></INPUT>


                      elem.setInnerHTML(test);
                  }
                super.onBrowserEvent(context, elem, object, event);
            }

我想增加（设置）EditTextCell 中出现的 TextBox 宽度等于列宽度。

有什么解决办法吗？

Answer 1

在我的项目中我这样做：

cellTable.getColumn(cellTable.getColumnIndex(column)).setCellStyleNames(CELL_CSS);

.edit-cell input {
    width: 290px;
}

Answer 2

终于有答案了！
我使用 UIBinder 尝试了更简单的操作，添加了：

.edit-cell input {
    width: 30px;
    text-align: right;
}

然后对于单元格表，我添加了

 <c:CellTable
        addStyleNames='{style.edit-cell}'
        ui:field='itemTable' />

Wonderful！

Answer 3

您需要创建一个自定义组件。开箱即用的 EditTextCell 不允许您设置输入字段的大小属性，只能设置列宽。

在这里查看 ValidateableInputCell impl： GWT 验证示例...你在哪里？ 获取如何制作自定义单元的示例。

诚然，验证尚未起作用，但在单元格内的输入字段上设置大小的功能可以起作用。