Отключаем сортировку в таблице GXT

Иногда нужно, чтобы содержимое таблицы нельзя было отсортировать. Для этого нужно отключить возможность сортировки. Ниже приведены различные методы отключения сортировки в таблице. Каждый из них не отключает полностью сортировку, а отключает только какую-то определенную функциональность.

GXT TextField Validator с преобразованием введенной строки

Создание валидаторов для полей ввода является стандартной задачей, с которой сталкиваются разработчики. В GXT процесс установки валидатора для текстового поля очень прост. В моем случае необходимо создать валидатор для текстового поля. Условия следующие.
В тестовое поле можно вводить только числа в формате xxx-xxx-xxxx или xxxxxxxxxx. Причем число введенное в формате  xxxxxxxxxx должно после ввода автоматически преобразоваваться к виду xxx-xxx-xxxx. Напрмер, вводим 1234567890  убираем фокус и получаем, что в текстовом поле содержится 123-456-7890.

Создаем свой Column Renderer для столбца таблицы. GXT

При работе с таблицами зачастую возникает необходимость отображать в ячйке таблицы нестандартное содержимое (содержимое отличное от простого текста). Таким содержимым может быть, например, комбобокс, текстовое поле, кнопка или даже панель, на которой могут быть и кнопки и комбобоксы и текстовые поля вместе. Для реализации отображения в ячейке таблицы такого содержимого необходимо столбцу, в котором это будет отображаться установить renderer. Renderer определяет, как будет отрисовываться содержимое каждой ячейки столбца.

Работа с CheckBoxSelectionModel в Grid. GXT

Модель выделения CheckBoxSelectionModel  в Grid используется для того, чтобы можно было выделять строки и помечать выделенные строки галочками. Скорее всего эту модель выделения будут использовать когда есть необходимость выделить какую-то часть строк и совершить над ней определенные действия, например удалить или сформировать какой-нибудь отчет.

Перед тем как создать таблицу нужно для этого кое-что подготовить.
Создаем список конфигураций для столбцов таблицы.
List<ColumnConfig> configs = new ArrayList<ColumnConfig>();
Создаем store для хранения моделей, которые являются строками таблицы.
ListStore store = new ListStore<ModelData>();

Изменение ширины содержимого ячейки таблицы, если это содержимое является виджетом. GXT.

В ячейке таблицы может содержаться не просто текст, а какие то сложные компоненты, например комбобокс, кнопка, текстовое поле или даже панелька (содержащая в себе текстовые поля и кнопки сразу). Чтобы при изменении ширину таблицы содержимое ячейки изменялось соответственно и аккуратно вписывалось в ячейку, нужно добавить к таблицы listener на событие изменения ширины столбцов и при изменении ширины столбцов соответственным образом изменять ширину содержимого ячейки.

Как в GXT изменить ширину столбца таблицы по нажатию кнопки

Иногда возникает необходимость изменять ширину столбца таблицы динамически в зависимости от того какой ширины будет содержимое в ячейке. 

int width;
width = // вычисляем новую ширину столбца
// задаем столбцу новую ширину - 5 - номер столбца 

grid.getColumnModel().getColumn(5).setWidth(width); 
// перерисовываем таблицу с новым значением ширины столбца

grid.getView().refresh(true); 
// теперь, если у нас в столбце содержится не просто текст, а      // сложный элемент,например ContentPanel, то содержимое тоже           // нужно растянуть на новую длину
for (int i = 0; i < grid.getStore().getCount(); i++) {
 Widget widget = grid.getView().getWidget(i, 5);
 BoxComponent bc = ((BoxComponent) widget);
 ContentPanel cp = (ContentPanel) bc;
// отнимаем 10 для того чтобы содержимое хорошо вписывалось в    //столбец

 cp.setWidth(width - 10); 
} 

Некоторые методы класса ContentPanel в GXT

Приведу тут обзор некоторых методов класса ContentPanel.

ContentPanel cp = new ContentPanel();

// делаем панель сворачиваемой
cp.setCollapsible(true);

// цвет фона - белый
cp.setBodyStyle("backgroundColor: white;");

// закругленные углы
cp.setFrame(true);

// убираем заголовок
cp.setHeaderVisible(false);

Как отключить клавишу Enter в компоненте TextArea в GXT

Новый день преподносит новые тривиальные задачи. Однако для меня как для начинающего разработчика даже самые простые задачи могут отнять много времени и показаться очень сложными. Вот, сегодня, например, столкнулся с задачей отключения перевода указателя каретки с одной строки на другую по клавише Enter в компоненте TextArea.

TextArea notes = new TextArea();

notes.addKeyListener(new KeyListener() {
  public void componentKeyPress(final ComponentEvent event) {  
    if (event.getKeyCode() == 13) {     
         event.stopEvent();  
    }  
  }
});

* This source code was highlighted with Source Code Highlighter.

Как выровнять checkbox по центру в GXT

Казалось бы совершенно тривиальные задачи порой могут занять очень много времени. Причиной может быть обычное незнание рабочего способа. Вроде используешь методы, а они все не работают. Вот проверенный способ, чтобы выровнять checkbox по центру.

CheckColumnConfig() newCheckColumnConfig = new CheckColumnConfig();
       newCheckColumnConfig.setHeader("New");
       newCheckColumnConfig.setId("isNew");
       newCheckColumnConfig.setWidth(50);
       newCheckColumnConfig.setStyle("vertical-align:middle;");

Небольшой пример работы с JSNI в GWT/GXT

Задача состоит в следующем - по нажатию на кнопку должен сработать переход по ссылке.
Java Script Native Interface позволяет Java разработчику работающему с GWT / GXT использовать в своем коде вставки на чистом JavaScript. У элемента ссылка есть метод click(), именно его мы и будем вызывать при помощи JSNI.

import com.extjs.gxt.ui.client.widget.Html;
import com.extjs.gxt.ui.client.widget.ContentPanel;
import com.extjs.gxt.ui.client.widget.Label;
import com.extjs.gxt.ui.client.widget.button.Button;
import com.extjs.gxt.ui.client.event.ButtonEvent;
import com.extjs.gxt.ui.client.event.SelectionListener;

public class SomeForm {

  // html фрагмент
  private final Html templateLink;
  // нативный метод, который вызывает метод click() у переданного ему элемента
  public static native void click(final com.google.gwt.dom.client.Element el)
  /*-{
   el.click();}
  -*/;

  // адрес ссылки 
  private static final String TEMPLATE_URI = "some/uri";

  public SomeForm()
  {
    ...
    // создаем кнопку и ее обработчик
    // по щелчку на кнопке вызывается переход по сслыке 
    Button someButton = new Button("Some Button", new SelectionListener<ButtonEvent>() {

      @Override
      public void componentSelected(final ButtonEvent ce) {

        com.google.gwt.dom.client.Element el =
         Document.get().getElementById("jsniClick");

        click(el);

      }

    });
    // добавляем кнопку и ссылку на панель
    ContentPanel cpLeft = new ContentPanel();
    cpLeft.setHeaderVisible(false);
    cpLeft.setBodyBorder(false);
    cpLeft.setButtonAlign(HorizontalAlignment.LEFT);

    cpLeft.addButton(someButton);
 
    templateLink = new Html("<a id='jsniClick' href='" + TEMPLATE_URI + "'></a>");

    cpLeft.add(new Label(templateLink.getHtml()));

    add(cpLeft);

  }

}

* This source code was highlighted with Source Code Highlighter.