package fan.tutorial.client.ui.grids;
import java.util.ArrayList;
import java.util.List;
import com.extjs.gxt.ui.client.event.ButtonEvent;
import com.extjs.gxt.ui.client.event.SelectionListener;
import com.extjs.gxt.ui.client.store.ListStore;
import com.extjs.gxt.ui.client.util.IconHelper;
import com.extjs.gxt.ui.client.widget.ContentPanel;
import com.extjs.gxt.ui.client.widget.Info;
import com.extjs.gxt.ui.client.widget.LayoutContainer;
import com.extjs.gxt.ui.client.widget.MessageBox;
import com.extjs.gxt.ui.client.widget.button.Button;
import com.extjs.gxt.ui.client.widget.grid.CheckBoxSelectionModel;
import com.extjs.gxt.ui.client.widget.grid.ColumnConfig;
import com.extjs.gxt.ui.client.widget.grid.ColumnData;
import com.extjs.gxt.ui.client.widget.grid.ColumnModel;
import com.extjs.gxt.ui.client.widget.grid.Grid;
import com.extjs.gxt.ui.client.widget.grid.GridCellRenderer;
import com.extjs.gxt.ui.client.widget.layout.FitLayout;
import com.extjs.gxt.ui.client.widget.toolbar.SeparatorToolItem;
import com.extjs.gxt.ui.client.widget.toolbar.ToolBar;
import com.google.gwt.i18n.client.NumberFormat;
import com.google.gwt.user.client.Element;
import fan.tutorial.client.model.IPerson;
import fan.tutorial.client.model.Person;
public class GridCellRendererExample
extends LayoutContainer {
@Override
protected void onRender(Element parent,
int index) {
super.onRender(parent, index);
//创建内容面板
ContentPanel panel =
new ContentPanel();
//设置面板标题
panel.setHeadingHtml("Grid Example");
//设置面板宽度高度
panel.setSize(600, 350);
//设置面板布局, FitLayout 内容填充整个面板
panel.setLayout(
new FitLayout());
//数值格式, 保留2位小数
final NumberFormat numberFormat = NumberFormat.getFormat("0.00");
//创建数值渲染器
GridCellRenderer<Person> numberRenderer =
new GridCellRenderer<Person>() {
@Override
public Object render(Person model, String property, ColumnData config,
int rowIndex,
int colIndex, ListStore<Person> store, Grid<Person> grid) {
double num = model.get(property);
return numberFormat.format(num);
}
};
//创建性别渲染器
GridCellRenderer<Person> sexRenderer =
new GridCellRenderer<Person>() {
@Override
public Object render(Person model, String property, ColumnData config,
int rowIndex,
int colIndex, ListStore<Person> store, Grid<Person> grid) {
String sex = model.get(property);
if(sex.equals("女")){
return "<span style='color:red'>" + sex + "</span>";
}
return "<span style='color:green'>" + sex + "</span>";
}
};
//复选框选择模型
CheckBoxSelectionModel<Person> sm =
new CheckBoxSelectionModel<Person>();
//表格列配置
List<ColumnConfig> configs =
new ArrayList<ColumnConfig>();
//表格列配置信息
configs.add(sm.getColumn());
configs.add(
new ColumnConfig(IPerson.NAME, "姓名", 100));
ColumnConfig columnConfig =
new ColumnConfig(IPerson.SEX, "性别", 100);
//设置渲染器
columnConfig.setRenderer(sexRenderer);
configs.add(columnConfig);
columnConfig =
new ColumnConfig(IPerson.WEIGHT, "体重", 100);
//设置渲染器
columnConfig.setRenderer(numberRenderer);
configs.add(columnConfig);
configs.add(
new ColumnConfig(IPerson.ADDRESS, "地址", 100));
configs.add(
new ColumnConfig(IPerson.BIRTHDAY, "生日", 100));
//创建ListStore
ListStore<Person> store =
new ListStore<Person>();
//添加数据到ListStore
store.add(
this.getStore());
//创建表格
final Grid<Person> grid =
new Grid<Person>(store,
new ColumnModel(configs));
//设置选择模型
grid.setSelectionModel(sm);
//设置插件, 如果不设置, 全选复选框无法点击
grid.addPlugin(sm);
//设置宽度自动扩展的列
grid.setAutoExpandColumn(IPerson.BIRTHDAY);
//将表格添加到面板
panel.add(grid);
//创建ToolBar
ToolBar toolBar =
new ToolBar();
toolBar.add(
new Button("添加", IconHelper.createStyle("add-icon")));
toolBar.add(
new SeparatorToolItem());
toolBar.add(
new Button("删除", IconHelper.createStyle("delete-icon")));
toolBar.add(
new SeparatorToolItem());
//为信息按钮绑定监听事件
toolBar.add(
new Button("信息", IconHelper.createStyle("info-icon"),
new SelectionListener<ButtonEvent>() {
public void componentSelected(ButtonEvent ce) {
List<Person> models = grid.getSelectionModel().getSelectedItems();
if(models.size() == 0){
MessageBox.alert("提示", "请选择查看的记录",
null);
}
else{
for(Person person : models){
Info.display(" ", person.getName());
}
}
}
}));
//设置面板ToolBar
panel.setTopComponent(toolBar);
add(panel);
}
//静态测试数据
private List<Person> getStore(){
List<Person> stocks =
new ArrayList<Person>();
stocks.add(
new Person("叶水燕", "女", 48.5, "广东茂名", "1990-09-13"));
stocks.add(
new Person("何国群", "男", 52.2, "广东云浮", "1991-08-14"));
stocks.add(
new Person("钟婷婷", "女", 48.8, "广东茂名", "1990-09-15"));
stocks.add(
new Person("叶国珠", "女", 45.5, "广东广州", "1990-07-16"));
stocks.add(
new Person("杨忠杰", "男", 52.1, "广东佛山", "1990-06-14"));
stocks.add(
new Person("杨晓婷", "女", 47.7, "广东湛江", "1990-05-16"));
stocks.add(
new Person("邵昭一", "男", 55.4, "广东深圳", "1990-04-17"));
stocks.add(
new Person("蔡叶青", "男", 54.4, "广东茂名", "1990-03-18"));
stocks.add(
new Person("蔡水娇", "女", 51.2, "广东茂名", "1990-02-15"));
stocks.add(
new Person("李坤兴", "男", 53.6, "广东湛江", "1990-01-14"));
stocks.add(
new Person("冼金燕", "女", 44.8, "广东广州", "1990-05-13"));
stocks.add(
new Person("蔡圣昌", "男", 52.3, "广东深圳", "1990-04-18"));
stocks.add(
new Person("梁丽桥", "女", 47.2, "广东东莞", "1990-02-18"));
stocks.add(
new Person("莫小文", "女", 50.8, "广东深圳", "1990-07-13"));
stocks.add(
new Person("李文静", "女", 50.2, "广东茂名", "1990-08-12"));
stocks.add(
new Person("倪金农", "男", 60.4, "广东深圳", "1990-07-14"));
stocks.add(
new Person("王晓文", "女", 46.4, "广东广州", "1990-08-16"));
return stocks;
}
}