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;
    }
}

package fan.tutorial.client.model;

import com.extjs.gxt.ui.client.data.BaseModel;

public class Person extends BaseModel {

    private static final long serialVersionUID = 1963627828711874684L;
    
    public Person(String name, String sex, double weight, String address, String birthday){
        this.set(IPerson.NAME, name);
        this.set(IPerson.SEX, sex);
        this.set(IPerson.WEIGHT, weight);
        this.set(IPerson.ADDRESS, address);
        this.set(IPerson.BIRTHDAY, birthday);
    }

    public String getName() {
        return get(IPerson.NAME);
    }
}

package fan.tutorial.client.model;

public interface IPerson {

    String SEX = "sex";
    String NAME = "name";
    String WEIGHT = "weight";
    String ADDRESS = "address";
    String BIRTHDAY = "birthday";
}