Question

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

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

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

public class Trial实现了EntryPoint { 私有静态类联系 { 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 );
}

}

enter image description here

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

Answer 1

据我了解，私人会员

private static Template template;

TextInputCell（以及EditTextCell）内部的

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

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

Answer 2

我使用外部CSS来管理所有的琐事。由于我不得不继承TextInputCell，所以没有花费太多精力。如果您不是子类，并且由于某种原因无法使用外部CSS修复，则没有直接的方式来设置TextInputCell元素的样式。

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

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

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

4 个答案: