5

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

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

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

public class Trial 实现 EntryPoint { private static class Contact { private static 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 );
}

}

在此处输入图像描述

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

4

4 回答 4

3

据我了解，私人会员

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-08T17:56:25.123 回答
2

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

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

于 2011-03-21T08:04:23.837 回答
1 
  ......
    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-26T04:28:56.630 回答
1

我会为需要更多帮助的人发布一个完整的工人课程：

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-01T18:07:16.270 回答