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

【问题标题】：GWT EditTextCell : How to increase editable TextBox width in EditTextCell?GWT EditTextCell：如何增加 EditTextCell 中的可编辑文本框宽度？
【发布时间】：2012-01-18 05:17:46
【问题描述】：

我在我的项目中使用 GWT2.3。当用户单击可编辑文本单元时，我想增加可编辑文本框的宽度。问题是我的列宽是 200 像素。当用户点击 editableTextCell 时，EditableTextCell 中的 TextBox 宽度约为 125px，与列宽相比要小。

我在 Celltable 的列中添加了 EditTextCell

列 stringColumn = new Column(new EditTextCell()) { // 我的代码 }

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

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

    @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宽度等于列宽。

任何解决方案？

【问题讨论】：

标签： gwt cell gwt-2.2-celltable gwt-celltable

【解决方案1】：

在我的项目中，我这样做：

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

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

【讨论】：

【解决方案2】：

终于有答案了！我通过添加使用 UIBinder 更简单地尝试了这个：

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

然后对于我添加的单元格表

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

太棒了！

【讨论】：

【解决方案3】：

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

在此处查看 ValidateableInputCell impl：In search of a GWT validation example... where art thou?，了解如何制作自定义单元格的示例。

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

【讨论】：