在GWT 2.2 CellTable中设置列的宽度而不剪切TextInputCell？

Question

我有一个相当奇怪的问题。我从GWT 2.2版本使用CellTable。 CellTable配置为固定布局。我在表格中有一个可编辑的列（TextInputCell）。

我目前使用CellTabel上的setColumnWidth方法来修复列的宽度。这很好，但它不强制输入文本元素的宽度约束。结果，编辑器输入字段在列下方溢出，给人留下了被剪掉的印象。

下面是GWT文档中的代码示例，修改后用于演示此问题。请注意名称字段没有调整大小，并在表格内溢出。

公共类试验实现入口点 { 私有静态类联系 { 私有静态诠释nextId = 0;

private final int id; 
    private final String address; 
    private Date birthday; 
    private String name; 
    private Long number; 

    public Contact(String name, Date birthday, String address, Long number) 
    { 
     nextId++; 
     this.id = nextId; 
     this.name = name; 
     this.birthday = birthday; 
     this.address = address; 
     this.number = number; 
    } 
} 

private static final List<Contact> CONTACTS = Arrays.asList(new Contact("John", new Date(80, 4, 12), "123 Fourth Avenue", 0L), new Contact("Joe", 
     new Date(85, 2, 22), "22 Lance Ln", 1L), new Contact("George", new Date(46, 6, 6), "1600 Pennsylvania Avenue", 2L)); 


public void onModuleLoad() 
{ 
    final CellTable<Contact> table = new CellTable<Contact>(10); 
    table.setWidth("60px", true); 
    ListDataProvider<Contact> listPrvdr; 

    final TextInputCell nameCell = new TextInputCell(); 
    Column<Contact, String> nameColumn = new Column<Contact, String>(nameCell) 
    { 
     @Override 
     public String getValue(Contact object) 
     { 
      return object.name; 
     } 
    }; 
    table.addColumn(nameColumn, "Name"); 
    table.setColumnWidth(nameColumn, "60px"); 

    nameColumn.setFieldUpdater(new FieldUpdater<Contact, String>() 
    { 
     public void update(int index, Contact object, String value) 
     { 
      object.name = value; 
      table.redraw(); 
     } 
    }); 

      listPrvdr = new ListDataProvider<Contact>(); 
    listPrvdr.addDataDisplay(table); 
    RootPanel.get().add(table); 

    listPrvdr.getList().addAll(CONTACTS); 
} 

}

我缺少什么？我如何在输入字段而不仅仅是主机列上实施宽度约束？

Answer 1

我用外部CSS来管理所有的小错误。由于我必须继承TextInputCell的子类，所以没有花费很多精力。如果您不是子类，并且无论出于何种原因都无法使用外部CSS修补，那么没有直接的方式来设置TextInputCell元素的样式。

如果有人有更好的解决方案，请分享回复此主题。

Answer 2

据我所知，私营构件

private static Template template; 

的TextInputCell内部（以及EditTextCell）关心内输入元件的视图。我的确从AbstractEditableCell致以类（如TextInputCell一样），并指定我自己的模板，如：

@Template("<input type=\"text\" value=\"{0}\" tabindex=\"-1\" size=\"{1}\" maxlength=\"{1}\" style=\"{2}\"></input>") 

Answer 3

...... 
    Column<yyyData,String> xxxColumn = new Column<yyyData,String> 
       (new TextInputCell()) { 
     @Override 
     public String getValue(yyyData data) { 
      return String.valueOf(data.getxxx()); 
     } 
     @Override 
     public String getCellStyleNames(Context context,yyyData data) 
     { 
      if (Float.valueOf(data.getxxx()) <= 61) 
       return ("test"); 
      else 
       return ("mystyle"); 
     } 
    }; 
........ 

css file 
    .test input,td.test input{ 
     width: 4em; 
     border: 1px solid #FFFF66; 
    } 
    .mystyle input, td.mystyle input { 
      width: 2em; 
      border: 2px solid #2396AF; 
    } 

Answer 4

我就发布一个完整的工人阶级的人谁需要更多的帮助：

static class MyInputCell extends TextInputCell 
{ 
    private static Template template; 

    interface Template extends SafeHtmlTemplates 
    { 
     // {0}, {1}, {2} relate to value, size, style 
     @Template("<input type=\"text\" value=\"{0}\" tabindex=\"-1\" size=\"{1}\" maxlength=\"{1}\" style=\"{2}\"></input>") 
     SafeHtml input(String value, String size, String style); 
    } 

    public MyInputCell() 
    { 
     template = GWT.create(Template.class); 
    } 

    @Override 
    public void render(Context context, String value, SafeHtmlBuilder sb) 
    { 
     // Get the view data. 
     Object key = context.getKey(); 
     ViewData viewData = getViewData(key); 
     if(viewData != null && viewData.getCurrentValue().equals(value)) 
     { 
      clearViewData(key); 
      viewData = null; 
     } 

     String s = (viewData != null) ? viewData.getCurrentValue() : value; 
     if(s != null) 
     { 
      // this is where we set value, size, style 
      sb.append(template.input(s, "3", "width: 50px")); 
     } 
     else 
     { 
      sb.appendHtmlConstant("<input type=\"text\" tabindex=\"-1\"></input>"); 
     } 
    }