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);
//創(chuàng)建內(nèi)容面板
ContentPanel panel =
new ContentPanel();
//設(shè)置面板標(biāo)題
panel.setHeadingHtml("Grid Example");
//設(shè)置面板寬度高度
panel.setSize(600, 350);
//設(shè)置面板布局, FitLayout 內(nèi)容填充整個面板
panel.setLayout(
new FitLayout());
//數(shù)值格式, 保留2位小數(shù)
final NumberFormat numberFormat = NumberFormat.getFormat("0.00");
//創(chuàng)建數(shù)值渲染器
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);
}
};
//創(chuàng)建性別渲染器
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>";
}
};
//復(fù)選框選擇模型
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);
//設(shè)置渲染器
columnConfig.setRenderer(sexRenderer);
configs.add(columnConfig);
columnConfig =
new ColumnConfig(IPerson.WEIGHT, "體重", 100);
//設(shè)置渲染器
columnConfig.setRenderer(numberRenderer);
configs.add(columnConfig);
configs.add(
new ColumnConfig(IPerson.ADDRESS, "地址", 100));
configs.add(
new ColumnConfig(IPerson.BIRTHDAY, "生日", 100));
//創(chuàng)建ListStore
ListStore<Person> store =
new ListStore<Person>();
//添加數(shù)據(jù)到ListStore
store.add(
this.getStore());
//創(chuàng)建表格
final Grid<Person> grid =
new Grid<Person>(store,
new ColumnModel(configs));
//設(shè)置選擇模型
grid.setSelectionModel(sm);
//設(shè)置插件, 如果不設(shè)置, 全選復(fù)選框無法點擊
grid.addPlugin(sm);
//設(shè)置寬度自動擴展的列
grid.setAutoExpandColumn(IPerson.BIRTHDAY);
//將表格添加到面板
panel.add(grid);
//創(chuàng)建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());
//為信息按鈕綁定監(jiān)聽事件
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());
}
}
}
}));
//設(shè)置面板ToolBar
panel.setTopComponent(toolBar);
add(panel);
}
//靜態(tài)測試數(shù)據(jù)
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("倪金農(nóng)", "男", 60.4, "廣東深圳", "1990-07-14"));
stocks.add(
new Person("王曉文", "女", 46.4, "廣東廣州", "1990-08-16"));
return stocks;
}
}