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

Question

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

我添加了EditTextCell在Celltable的列

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

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

好极了!

Answer 3

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

看看这里的ValidateableInputCell实现:在搜索GWT验证示例时…你在哪里?有关如何制作自定义单元格的示例。

诚然，验证还不能工作，但是在单元格内设置输入字段的大小的能力可以。