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

【问题标题】：Setting the width of a column without clipping TextInputCell in GWT 2.2 CellTable?在 GWT 2.2 CellTable 中设置列的宽度而不裁剪 TextInputCell？
【发布时间】：2011-03-03 14:47:02
【问题描述】：

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

我目前在 CellTabel 上使用 setColumnWidth 方法来固定列的宽度。这很好用，但它不会对输入文本元素实施宽度限制。结果，编辑器输入字段在列下溢出，给人一种被剪掉的印象。

这是一个来自 GWT 文档的代码示例，经过修改以演示该问题。请注意，名称字段未调整大小并在表内溢出。

公共类 Trial 实现 EntryPoint { 私有静态类联系人 { 私有静态int 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 );
}

}

我错过了什么？如何对输入字段而不只是主机列强制执行宽度限制？

【问题讨论】：

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

【解决方案1】：

据我了解，私人会员

private static Template template;

TextInputCell（以及EditTextCell）内部关心内部输入元素的视图。我确实从 AbstractEditableCell 扩展了我的类（就像 TextInputCell 一样）并分配了我自己的模板，例如：

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

【讨论】：

哈哈...这正是我最终为我的解决方案所做的（并且想首先避免）。感谢您的回答:)

【解决方案2】：

我使用外部 CSS 来管理所有的小问题。因为无论如何我都必须继承 TextInputCell ，所以没有花费太多精力。如果您没有子类化并且出于任何原因无法使用外部 CSS 修复，则没有直接的方法来设置 TextInputCell 元素的样式。

如果有人有更好的解决方案，请回复本帖分享。

【讨论】：

【解决方案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;
    }

【讨论】：

这设置了 TD 元素的样式，而不是它里面的 INPUT。

【解决方案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>");
        }
    }

【讨论】：