Установка ширины столбца без отсечения TextInputCell в GWT 2.2 CellTable?

Question

У меня довольно своеобразная проблема. Я использую CellTable от выпуска GWT 2.2. CellTable настроен для фиксированной разметки. У меня есть редактируемый столбец (TextInputCell) в таблице.

В настоящее время я использую метод setColumnWidth на CellTabel, чтобы исправить ширину столбца. Это хорошо работает, но не требует ограничения ширины для входного текстового элемента. В результате поле ввода редактора переполняется под столбцом, создавая впечатление, что оно вырезано.

Вот пример кода из документации GWT, модифицированный для демонстрации проблемы. Обратите внимание, что поле имени не изменяется и переполняется внутри таблицы.

Открытый класс Trial реализует EntryPoint {частный статический класс 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 );
}

}

Что мне не хватает? Как применить ограничение ширины в поле ввода, а не только в столбце хоста?

Answer 1

Я использовал внешний CSS для управления всеми проблемами. Не потребовалось много усилий, так как мне все равно пришлось создавать подкласс TextInputCell. Нет прямого способа стилизовать элемент TextInputCell, если вы не относитесь к подклассам и не можете использовать внешние исправления CSS по любой причине.

Если у кого-то есть лучшее решение, пожалуйста, поделитесь ответом на эту тему.

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

Я просто выложу полный рабочий класс для тех, кому нужна дополнительная помощь:

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

Answer 4

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