GXT3.X的CheckBoxListView

最新处理项目需要使用带勾选的列表，但是GXT3已经去掉了这个类，一看Sencha的官方论坛，尼玛居然要收费。于是自己DIY了一个，简单几行代码，方便好用。

STEP1.定义一个用于列表的类，由于我的选择一般是以ID为关键选择数据的，因此定义了一个LabelValue类：

import com.flipthebird.gwthashcodeequals.EqualsBuilder;/*** @author JIM* 动态绑定关联ID值用的数据结构。* label是显示的名称，value是绑定的值，一般是ID。*/
public class LabelValue {private String label;private Integer value;public LabelValue(){};public LabelValue(String label, Integer value){this.label = label;this.value = value;}public String getLabel() {return label;}public void setLabel(String label) {this.label = label;}public Integer getValue() {return value;}public void setValue(Integer value) {this.value = value;}@Overridepublic boolean equals(Object obj) {if(!(obj instanceof LabelValue)){return false;}if(this == obj){return true;}LabelValue other = (LabelValue)obj;return new EqualsBuilder().append(getLabel(),other.getLabel()).append(getValue(),other.getValue()).isEquals();}}

STEP2. 我们要用到的CheckBoxListView，主要原理是内部渲染为checkbox，然后将selectionChange事件和界面checkbox的勾选同步

package xxx.xxx.xxx.components;import java.util.ArrayList;
import java.util.List;import xxx.xxx.xxx.xxx.dto.LabelValue;import com.google.gwt.cell.client.AbstractCell;
import com.google.gwt.core.client.GWT;
import com.google.gwt.dom.client.Element;
import com.google.gwt.event.logical.shared.ValueChangeEvent;
import com.google.gwt.event.logical.shared.ValueChangeHandler;
import com.google.gwt.safehtml.shared.SafeHtmlBuilder;
import com.sencha.gxt.cell.core.client.form.CheckBoxCell.CheckBoxAppearance;
import com.sencha.gxt.cell.core.client.form.CheckBoxCell.CheckBoxCellOptions;
import com.sencha.gxt.core.client.Style.SelectionMode;
import com.sencha.gxt.core.client.ValueProvider;
import com.sencha.gxt.data.shared.ListStore;
import com.sencha.gxt.data.shared.ModelKeyProvider;
import com.sencha.gxt.widget.core.client.ListView;
import com.sencha.gxt.widget.core.client.ListViewSelectionModel;
import com.sencha.gxt.widget.core.client.container.SimpleContainer;
import com.sencha.gxt.widget.core.client.form.CheckBox;
import com.sencha.gxt.widget.core.client.selection.SelectionChangedEvent;
import com.sencha.gxt.widget.core.client.selection.SelectionChangedEvent.SelectionChangedHandler;public class CcCheckBoxListView<M> extends SimpleContainer{private ListStore<LabelValue> store;private ListView<LabelValue, LabelValue> listView;private CheckBoxAppearance checkBoxAppearance = GWT.<CheckBoxAppearance>create(CheckBoxAppearance.class);private CheckBox selectAllCheckBox;private static final String LIST_CHECK_BOX_NAME = "listCheckBox";private SelectionChangedHandler<LabelValue> selectionChangedHandler;public static interface DataProvider<M> {String getLabel(M model);Integer getValue(M model);}public CcCheckBoxListView(){store = new ListStore<LabelValue>(new ModelKeyProvider<LabelValue>() {@Overridepublic String getKey(LabelValue item) {return item.getValue().toString();}});listView = new ListView<LabelValue, LabelValue>(store, new ValueProvider<LabelValue, LabelValue>(){@Overridepublic LabelValue getValue(LabelValue value) {return value;}@Overridepublic void setValue(LabelValue object, LabelValue value) {object.setLabel(value.getLabel());object.setValue(value.getValue());}@Overridepublic String getPath() {return null;}}, new AbstractCell<LabelValue>() {@Overridepublic void render(Context context, LabelValue value, SafeHtmlBuilder sb) {CheckBoxCellOptions checkBoxCellOptions = new CheckBoxCellOptions();checkBoxCellOptions.setBoxLabel(value.getLabel());checkBoxCellOptions.setName(LIST_CHECK_BOX_NAME);checkBoxAppearance.render(sb, listView.getSelectionModel().isSelected(value), checkBoxCellOptions);}});ListViewSelectionModel<LabelValue> ListViewSelectionModel = new ListViewSelectionModel<LabelValue>() {@Overrideprotected boolean isInput(Element target) { //do not ignore clickif(target.getAttribute("name").equals(LIST_CHECK_BOX_NAME)) {return false;}return super.isInput(target);}};ListViewSelectionModel.setSelectionMode(SelectionMode.SIMPLE);ListViewSelectionModel.addSelectionChangedHandler(new SelectionChangedHandler<LabelValue>() {@Overridepublic void onSelectionChanged(SelectionChangedEvent<LabelValue> event) {List<LabelValue> selection = event.getSelection();List<LabelValue> allData = store.getAll();for(int i = 0; i < allData.size(); i ++) {boolean dataChecked = selection.contains(allData.get(i));Element checkBoxElement = listView.getElement(i).getFirstChildElement().getFirstChildElement();boolean viewChecked = checkBoxElement.getPropertyBoolean("checked");if(viewChecked != dataChecked) {checkBoxElement.setPropertyBoolean("checked", dataChecked);}}if(selectAllCheckBox != null) {if(selection.containsAll(allData)) {selectAllCheckBox.setValue(true);}if(selection.isEmpty()) {selectAllCheckBox.setValue(false);}}if(selectionChangedHandler != null) {selectionChangedHandler.onSelectionChanged(event);}}});listView.setSelectionModel(ListViewSelectionModel);this.add(listView);}public void setDataList(List<M> dataList, DataProvider<M> dataProvider) {clearDataList();addDataList(dataList, dataProvider);}public void setDataList(List<LabelValue> dataList) {clearDataList();addDataList(dataList);}public void clearDataList() {store.clear();}public void addDataList(List<M> dataList, DataProvider<M> dataProvider) {List<LabelValue> labelValueList = new ArrayList<LabelValue>();for(M model: dataList) {labelValueList.add(new LabelValue(dataProvider.getLabel(model), dataProvider.getValue(model)));}store.addAll(labelValueList);}public void addDataList(List<LabelValue> dataList) {store.addAll(dataList);}public List<LabelValue> getSelectedItems() {return listView.getSelectionModel().getSelectedItems();}public List<LabelValue> getDataList() {return store.getAll();}public void deleteDataList(List<LabelValue> dataList) {for(LabelValue labelValue: dataList) {store.remove(labelValue);}}public ListViewSelectionModel<LabelValue> getSelectionModel() {return listView.getSelectionModel();}public void bindSelectAllCheckBox(CheckBox selectAllCheckBox) {this.selectAllCheckBox = selectAllCheckBox;selectAllCheckBox.addValueChangeHandler(new ValueChangeHandler<Boolean>() {@Overridepublic void onValueChange(ValueChangeEvent<Boolean> event) {if(event.getValue()) {listView.getSelectionModel().selectAll();}else {listView.getSelectionModel().deselectAll();}}});}public void setSelection(List<LabelValue> selectionList, boolean keepExisting) {listView.getSelectionModel().select(selectionList, keepExisting);}public void setSelection(List<M> selectionList, DataProvider<M> dataProvider, boolean keepExisting) {List<LabelValue> labelValueList = new ArrayList<LabelValue>();for(M model: selectionList) {labelValueList.add(new LabelValue(dataProvider.getLabel(model), dataProvider.getValue(model)));}listView.getSelectionModel().select(labelValueList, keepExisting);}public void addSelectionChangedHandler(SelectionChangedHandler<LabelValue> selectionChangedHandler) {this.selectionChangedHandler = selectionChangedHandler;}
}

使用：

在你的VIEW里需要使用泛型定义该组件.

@UiField
public CcCheckBoxListView<LabelValue> checkBoxListView;

类型也可以不是LabelValue，但是这样的话需要使用setDataList(List<M> dataList, DataProvider<M> dataProvider)的方式来设置数据，DataProvider是数据转换器，用来制定label和vale

支持使用bindSelectAllCheckBox绑定一个全选的CheckBox，当数据被全部勾选/未勾选时自动同步状态.

使用效果：

GXT3.X的CheckBoxListView相关推荐

分享Silverlight/WPF/Windows Phone一周学习导读(1月17日-1月23日)
上周微软Silverlight团队发布"微软发布Silverlight Native Extensions 1.0 - 扩展OOB应用功能",对于Silverlight开发人员而言 ...
Keil5-MDK / C51 软件安装包（持续更新...）
前言一.安装包(百度网盘) 1.keli c51v960a 2.keil c51v956 3.keil5 mdk529 4.keil5 mdk532 5.keil5 mdk533 6.keil5 m ...
深入ListView
深入ListView 我们接着上一篇博客,对ListView进行更加深入的了解. 属性 android:cacheColorHint="@color/white" 设置ListVi ...
Keil5-MDK / C51 软件安装包
转: Keil5-MDK / C51 软件安装包(持续更新...)_木子晨~的博客-CSDN博客_keil5安装包前言一.安装包(百度网盘) 1.keli c51v960a 2.keil c51v ...
使用GXT的ThemeBuilder建立自己的皮肤
EXTJS的neptune虽然是适应目前大屏幕字体,但是配色太糟糕了,蓝的一塌糊涂,真不知道设计者是什么个审美.... 好在有ThemeBuilder,可以自己做点不同的配色了. ThemeBuild ...

GXT3.X的CheckBoxListView

GXT3.X的CheckBoxListView相关推荐

最新文章

热门文章