Главная > ExtGWT > ExtGWT: ListField с checkbox’ами

ExtGWT: ListField с checkbox’ами


У ExtGWT есть одна интересная компонента, позволяющая делать списки с множественным выбором элементов ListField. Она позволяет выбрать один или несколько элементов из списка с помощью комбинации клавиш Shift, Ctrl и левым кликом мышкой на элементе. То есть эмулирует поведение стандартного десктопного элемента.

Однако веб-пользователям такое повединие может быть неочевидным и неудобным. Как сделать поведение ListField более простым, а отображение более наглядным?

Один из вариантов это использование checkbox’a для визуализации каждого элемента списка с изменением поведения компонента.

Для начала определим два новых css-класса  для нового компонента


.p-fieldlist-checker {
 width: 18px;
 height: 18px;
 background-position: 2px 2px;
 background-image:url(../images/default/grid/row-check-sprite.gif);
 background-repeat: no-repeat;
 background-color: transparent;
}

.p-fieldlist-checker-on {
 background-position: -23px 2px;
}

Как видно из листинга, класс p-fieldlist-checker использует стандартное для GXT изображение чекбоксов, используемое для отобрадения таблиц. Второй класс помогает нам в выборе нужного нам изображения с помощью сдвига точки отсчёта внутри картинки.

Теперь нам нужно добавить эти стили в ListField. Для этого создадим новый класс CheckboxListField. В новом классе определим новый шаблон отображения элементов, в котором будет место для checkbox’а.

import com.extjs.gxt.ui.client.data.ModelData;
import com.extjs.gxt.ui.client.widget.form.ListField;
import com.google.gwt.user.client.Element;

public class CheckboxListField<D extends ModelData> extends ListField<D> {

 @Override
 protected void onRender(Element parent, int index) {
 getListView().setSelectionModel(new CheckboxListViewSelectionModel<D>());

 setTemplate("<tpl for=\".\"><div class='x-combo-list-item'><span class='p-fieldlist-checker'> </span><span>{" + getDisplayField()
 + "}</span></div></tpl>");

 super.onRender(parent, index);
 }
}

Помимо нового шаблона мы будем использовать нашу собственную модель контроля за поведением и отображением элемента.

import java.util.List;

import com.extjs.gxt.ui.client.Style.SelectionMode;
import com.extjs.gxt.ui.client.data.ModelData;
import com.extjs.gxt.ui.client.event.ListViewEvent;
import com.extjs.gxt.ui.client.store.ListStore;
import com.extjs.gxt.ui.client.widget.ListViewSelectionModel;
import com.google.gwt.user.client.Element;

public class CheckboxListViewSelectionModel<M extends ModelData> extends
 ListViewSelectionModel<M> {

 @Override
 protected void handleMouseDown(ListViewEvent<M> e) {
 if (locked)
 return;
 M sel = listStore.getAt(e.getIndex());

 if (selectionMode == SelectionMode.SINGLE) {
 if (isSelected(sel)) {
 deselect(sel);
 } else if (!isSelected(sel)) {
 select(sel, false);
 }
 } else {
 if (e.isShiftKey() && lastSelected != null) {
 int last = listStore.indexOf(lastSelected);
 int index = e.getIndex();
 int a = (last > index) ? index : last;
 int b = (last < index) ? index : last;
 select(a, b, e.isControlKey());
 lastSelected = listStore.getAt(last);
 } else if (isSelected(sel)) {
 deselect(sel);
 } else {
 select(sel, true);
 }
 }
 }

 @Override
 protected void onSelectChange(M model, boolean select) {
 List<Element> all = listView.getElements();
 if (listView.isRendered() && all.size() > 0) {
 ListStore<M> store = listView.getStore();
 int index = store.indexOf(model);
 if (index != -1 && index < all.size()) {
 Element elem = all.get(index);
 if (select) {
 listView.fly((Element) elem.getChildNodes().getItem(0))
 .addStyleName("p-fieldlist-checker-on");
 } else {
 listView.fly((Element) elem.getChildNodes().getItem(0))
 .removeStyleName("p-fieldlist-checker-on");
 }
 listView.fly(elem).removeStyleName(listView.getOverStyle());
 }
 }
 }

}

Как видно из листинга, в нашем новом классе мы переопределяем два метода:

  1. handleMouseDown(ListViewEvent<M> e) — отвечает за изменение поведения элемента. Здесь определяем нужное нам поведение;
  2. onSelectChange(M model, boolean select) — отвечает за изменение отображения элемента. Здесь мы определяем какие картинки для каких элементов списка будут отабражаться.

Далее, в коде просто пишем:

...
CheckboxListField<BeanModel> list = new CheckboxListField<BeanModel>();
...

и получаем ListBox с элементами, перед которыми выводится checkbox.

Реклама
Метки: , ,
  1. marx
    15.12.2009 в 15:23

    в мемориз =)

  1. No trackbacks yet.

Добавить комментарий

Заполните поля или щелкните по значку, чтобы оставить свой комментарий:

Логотип WordPress.com

Для комментария используется ваша учётная запись WordPress.com. Выход / Изменить )

Фотография Twitter

Для комментария используется ваша учётная запись Twitter. Выход / Изменить )

Фотография Facebook

Для комментария используется ваша учётная запись Facebook. Выход / Изменить )

Google+ photo

Для комментария используется ваша учётная запись Google+. Выход / Изменить )

Connecting to %s