在GWT 2.2 CellTable中設置列的寬度而不剪切TextInputCell？

我有一個相當奇怪的問題。我從GWT 2.2版本使用CellTable。 CellTable配置爲固定佈局。我在表格中有一個可編輯的列（TextInputCell）。在GWT 2.2 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); 
}

}

enter image description here

我缺少什麼？我如何在輸入字段而不僅僅是主機列上實施寬度約束？

來源

2011-03-03 Ashwin Prabhu

我用外部CSS來管理所有的小錯誤。由於我必須繼承TextInputCell的子類，所以沒有花費很多精力。如果您不是子類，並且無論出於何種原因都無法使用外部CSS修補，那麼沒有直接的方式來設置TextInputCell元素的樣式。

如果有人有更好的解決方案，請分享回覆此主題。

來源

2011-03-21 08:04:23

據我所知，私營構件

private static Template template;

的TextInputCell內部（以及EditTextCell）關心內輸入元件的視圖。我的確從AbstractEditableCell致以類（如TextInputCell一樣），並指定我自己的模板，如：

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

來源

2011-06-08 17:56:25 YNChumak

哈哈......這正是我最終爲我的解決方案所做的（並且首先想避免的）。感謝您的回答:) – 2011-06-09 05:53:22

...... 
    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; 
    }

來源

2012-07-26 04:28:56 user1553459

這設置了TD元素的樣式，但不是其內部的INPUT。 – ocarlsen 2013-11-27 18:56:48

我就發佈一個完整的工人階級的人誰需要更多的幫助：

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>"); 
     } 
    }

來源

2013-11-01 18:07:16 slugmandrew

在GWT 2.2 CellTable中設置列的寬度而不剪切TextInputCell？

回答

相關問題