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

Question

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

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

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

Открытый класс 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 );
}

}

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

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. Нет прямого способа стилизовать элемент TextInputCell, если вы не относитесь к подклассам и не можете использовать внешние исправления CSS по какой-либо причине.

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

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