package fan.tutorial.client.ui.grids;

import java.util.ArrayList;
import java.util.List;
import com.extjs.gxt.ui.client.Style.HorizontalAlignment;
import com.extjs.gxt.ui.client.data.BaseListLoader;
import com.extjs.gxt.ui.client.data.HttpProxy;
import com.extjs.gxt.ui.client.data.JsonLoadResultReader;
import com.extjs.gxt.ui.client.data.ListLoadResult;
import com.extjs.gxt.ui.client.data.ModelData;
import com.extjs.gxt.ui.client.data.ModelType;
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.widget.ContentPanel;
import com.extjs.gxt.ui.client.widget.LayoutContainer;
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.ColumnModel;
import com.extjs.gxt.ui.client.widget.grid.Grid;
import com.extjs.gxt.ui.client.widget.layout.FitLayout;
import com.google.gwt.core.client.GWT;
import com.google.gwt.http.client.RequestBuilder;
import com.google.gwt.i18n.client.NumberFormat;
import com.google.gwt.user.client.Element;
import fan.tutorial.client.model.IEmployee;
import fan.tutorial.server.value.Constant;

public class GridJsonExample extends LayoutContainer {

    @Override
    protected void onRender(Element parent, int index) {
        super.onRender(parent, index);

        //創建內容面板
        ContentPanel panel = new ContentPanel();
        //設置面板標題
        panel.setHeadingHtml("Grid Json");
        //設置面板寬度高度
        panel.setSize(600, 350);
        //設置面板咋說? ture/false 自己看看效果就知道了
        panel.setFrame(true);
        //設置面板按鈕的對齊方式
        panel.setButtonAlign(HorizontalAlignment.CENTER);
        //設置面板布局, FitLayout 內容填充整個面板
        panel.setLayout(new FitLayout());
        
        //創建ModelType
        ModelType modelType = new ModelType();
        //設置根名稱（與json數據根名稱要保持一致, 否則無法正確的解析數據）
        modelType.setRoot(Constant.RESULT);
        //添加表格需要使用到的字段域, 未被添加的字段域在表格中無數據展示
        modelType.addField(IEmployee.NAME);
        modelType.addField(IEmployee.SEX);
        modelType.addField(IEmployee.SALARY);
        modelType.addField(IEmployee.BIRTHPLACE);
        modelType.addField(IEmployee.HIREDATE);

        //復選框選擇模型
        CheckBoxSelectionModel<ModelData> sm = new CheckBoxSelectionModel<ModelData>();
        //表格列配置
        List<ColumnConfig> configs = new ArrayList<ColumnConfig>();
        //表格列配置信息
        configs.add(sm.getColumn());
        configs.add(new ColumnConfig(IEmployee.NAME, "姓名", 100));
        configs.add(new ColumnConfig(IEmployee.SEX, "性別", 100));
        ColumnConfig columnConfig = new ColumnConfig(IEmployee.SALARY, "薪資", 100);
        columnConfig.setNumberFormat(NumberFormat.getFormat("0.0"));
        configs.add(columnConfig);
        configs.add(new ColumnConfig(IEmployee.BIRTHPLACE, "籍貫", 100));
        configs.add(new ColumnConfig(IEmployee.HIREDATE, "入職時間", 100));
        
        //Spring MVC Controller 請求地址
        String url = GWT.getHostPageBaseURL() + "employee/find/all.json";
        //構建RequestBuilder
        RequestBuilder builder = new RequestBuilder(RequestBuilder.GET, url);
        //創建HttpProxy
        HttpProxy<String> proxy = new HttpProxy<String>(builder);
        //JsonLoadResultReader
        JsonLoadResultReader<ListLoadResult<ModelData>> reader = new JsonLoadResultReader<ListLoadResult<ModelData>>(modelType);
        //數據加載器
        final BaseListLoader<ListLoadResult<ModelData>> loader = new BaseListLoader<ListLoadResult<ModelData>>(proxy, reader);  
        //數據存儲器
        final ListStore<ModelData> store = new ListStore<ModelData>(loader);

        //創建表格
        final Grid<ModelData> grid = new Grid<ModelData>(store, new ColumnModel(configs));
        //設置顯示加載標識
        grid.setLoadMask(true);
        //設置顯示表格邊框
        grid.setBorders(true);
        //設置選擇模型
        grid.setSelectionModel(sm);
        //設置插件, 如果不設置, 全選復選框無法點擊
        grid.addPlugin(sm);
        grid.getView().setEmptyText("請點擊按鈕加載數據");
        //設置寬度自動擴展的列
        grid.setAutoExpandColumn(IEmployee.HIREDATE);

        //將表格添加到面板
        panel.add(grid);
        
        //按鈕
        Button button = new Button("加載數據", new SelectionListener<ButtonEvent>() {
            @Override
            public void componentSelected(ButtonEvent ce) {
                //加載數據
                loader.load();
            }
        });
        panel.addButton(button);
        
        this.add(panel);
    }
}

package fan.tutorial.server.controller;

import javax.annotation.Resource;
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.RequestMapping;
import fan.tutorial.server.commons.JsonUtil;
import fan.tutorial.server.service.DataService;
import fan.tutorial.server.value.Constant;

@Controller
@RequestMapping("/employee")
public class EmployeeController {
    
    @Resource
    private DataService service;
    
    @RequestMapping(value = "/find/all")
    public String findAll(Model model){
        String result = JsonUtil.toJson(Constant.RESULT, Constant.DATE_FORMAT_PATTENR_DEFAULT, service.findAllEmployee());
        model.addAttribute(Constant.RESULT, result);
        return Constant.RESULT_CODE;
    }
}

package fan.tutorial.server.service;

import java.util.List;
import javax.annotation.Resource;
import org.springframework.stereotype.Service;
import fan.tutorial.client.model.Employee;
import fan.tutorial.server.value.Data;

@Service
public class DataService {
    
    @Resource
    private Data data;
    
    public List<Employee> findAllEmployee(){
        return data.getEmployeeList();
    }
}

package fan.tutorial.server.value;

import java.util.ArrayList;
import java.util.Calendar;
import java.util.Date;
import java.util.List;
import org.springframework.stereotype.Component;
import fan.tutorial.client.model.Employee;

@Component
public class Data {

    private static final int INTERVAL_YEAR = -14;
    private static final Date CURRENT_DATE = new Date();
    private List<Employee> employeeList;
    
    private List<Employee> buildEmplyeeList(){
        List<Employee> stocks = new ArrayList<Employee>();
        stocks.add(new Employee("葉水燕", "女", 4500, "廣東茂名", getIntervalDate(CURRENT_DATE, INTERVAL_YEAR, 0, 0)));
        stocks.add(new Employee("何國群", "男", 4500, "廣東云浮", getIntervalDate(CURRENT_DATE, INTERVAL_YEAR, 1, 1)));
        stocks.add(new Employee("鐘婷婷", "女", 5500, "廣東茂名", getIntervalDate(CURRENT_DATE, INTERVAL_YEAR, 2, 2)));
        stocks.add(new Employee("葉國珠", "女", 4500, "廣東廣州", getIntervalDate(CURRENT_DATE, INTERVAL_YEAR, 3, 3)));
        stocks.add(new Employee("楊忠杰", "男", 5500, "廣東佛山", getIntervalDate(CURRENT_DATE, INTERVAL_YEAR, 4, 4)));
        stocks.add(new Employee("楊曉婷", "女", 6500, "廣東湛江", getIntervalDate(CURRENT_DATE, INTERVAL_YEAR, 5, 5)));
        stocks.add(new Employee("邵昭一", "男", 7000, "廣東深圳", getIntervalDate(CURRENT_DATE, INTERVAL_YEAR, 6, 6)));
        stocks.add(new Employee("蔡葉青", "男", 5500, "廣東茂名", getIntervalDate(CURRENT_DATE, INTERVAL_YEAR, 7, 7)));
        stocks.add(new Employee("蔡水嬌", "女", 6700, "廣東茂名", getIntervalDate(CURRENT_DATE, INTERVAL_YEAR, 8, 8)));
        stocks.add(new Employee("李坤興", "男", 5800, "廣東湛江", getIntervalDate(CURRENT_DATE, INTERVAL_YEAR, 8, 8)));
        stocks.add(new Employee("冼金燕", "女", 8000, "廣東廣州", getIntervalDate(CURRENT_DATE, INTERVAL_YEAR, 8, 8)));
        stocks.add(new Employee("蔡圣昌", "男", 7800, "廣東深圳", getIntervalDate(CURRENT_DATE, INTERVAL_YEAR, 8, 8)));
        stocks.add(new Employee("梁麗橋", "女", 7700, "廣東東莞", getIntervalDate(CURRENT_DATE, INTERVAL_YEAR, 8, 8)));
        stocks.add(new Employee("莫小文", "女", 6500, "廣東深圳", getIntervalDate(CURRENT_DATE, INTERVAL_YEAR, 8, 8)));
        stocks.add(new Employee("李文靜", "女", 5500, "廣東茂名", getIntervalDate(CURRENT_DATE, INTERVAL_YEAR, 8, 8)));
        stocks.add(new Employee("倪金農", "男", 7400, "廣東深圳", getIntervalDate(CURRENT_DATE, INTERVAL_YEAR, 8, 8)));
        stocks.add(new Employee("王曉文", "女", 4500, "廣東廣州", getIntervalDate(CURRENT_DATE, INTERVAL_YEAR, 8, 8)));
        employeeList = stocks;
        return stocks;
    }
    
    private Date getIntervalDate(Date date, int year, int month, int day){
        Calendar calendar = Calendar.getInstance();
        calendar.setTime(date);
        calendar.set(Calendar.YEAR, calendar.get(Calendar.YEAR) + year);
        calendar.set(Calendar.MONTH, calendar.get(Calendar.MONTH) + month);
        calendar.set(Calendar.DAY_OF_MONTH, calendar.get(Calendar.DAY_OF_MONTH) + day);
        return calendar.getTime();
    }

    public List<Employee> getEmployeeList() {
        return employeeList == null ? buildEmplyeeList() : employeeList;
    }
}

package fan.tutorial.client.model;

import java.util.Date;

public class Employee {

    private String sex;
    private String name;
    private double salary;
    private String birthplace;
    private Date hiredate;
    
    public Employee(String name, String sex, double salary, String birthplace, Date hiredate){
        this.sex = sex;
        this.name = name;
        this.salary = salary;
        this.birthplace = birthplace;
        this.hiredate = hiredate;
    }

    public String getSex() {
        return sex;
    }

    public void setSex(String sex) {
        this.sex = sex;
    }

    public String getName() {
        return name;
    }

    public void setName(String name) {
        this.name = name;
    }

    public Date getHiredate() {
        return hiredate;
    }

    public void setHiredate(Date hiredate) {
        this.hiredate = hiredate;
    }

    public String getBirthplace() {
        return birthplace;
    }

    public void setBirthplace(String birthplace) {
        this.birthplace = birthplace;
    }

    public double getSalary() {
        return salary;
    }

    public void setSalary(double salary) {
        this.salary = salary;
    }
}

package fan.tutorial.client.model;

public interface IEmployee {

    String SEX = "sex";
    String NAME = "name";
    String SALARY = "salary";
    String BIRTHPLACE = "birthplace";
    String HIREDATE = "hiredate";
}

package fan.tutorial.server.commons;

import java.util.HashMap;
import java.util.Map;
import com.google.gson.Gson;
import com.google.gson.GsonBuilder;
import com.google.gson.JsonParser;

public class JsonUtil {

    private static final String DATE_FORMAT_DEFAULT = "yyyy-MM-dd";
    
    public static String toJson(String rootName, Object obj){
        return toJson(rootName, DATE_FORMAT_DEFAULT, obj);
    }

    public static String toJson(String[] rootName, Object[] obj){
        return toJson(rootName, DATE_FORMAT_DEFAULT, obj);
    }

    public static String toJson(String[] rootName, String dateFormatPattern, Object[] obj){
        if(rootName.length > 0 && rootName.length == obj.length){
            Gson gson = new GsonBuilder().setDateFormat(dateFormatPattern).create();
            Map<String, Object> map = new HashMap<String, Object>();
            for(int i = 0; i < obj.length; i++){
                map.put(rootName[i], obj[i]);
            }
            return gson.toJson(map);
        }
        return "";
    }

    public static String toJson(String rootName, String dateFormatPattern, Object obj){
        Gson gson = new GsonBuilder().setDateFormat(dateFormatPattern).create();
        Map<String, Object> map = new HashMap<String, Object>();
        map.put(rootName, obj);
        return gson.toJson(map);
    }

    public static String toJson(Object object){
        return toJson(object, DATE_FORMAT_DEFAULT);
    }

    public static String toJson(Object object, String dateFormatPattern){
        return new GsonBuilder().setDateFormat(dateFormatPattern).create().toJson(object);
    }

    public static <T> T fromJson(String json, Class<T> clazz){
        return fromJson(json, DATE_FORMAT_DEFAULT, clazz);
    }
    
    public static <T> T fromJson(String json, String dateFormatPattern, Class<T> clazz){
        return new GsonBuilder().setDateFormat(dateFormatPattern).create().fromJson(json, clazz);
    }
    
    public static <T> T fromJson(String json, java.lang.reflect.Type type){
        return fromJson(json, DATE_FORMAT_DEFAULT, type);
    }
    
    public static <T> T fromJson(String json, String dateFormatPattern, java.lang.reflect.Type type){
        return new GsonBuilder().setDateFormat(dateFormatPattern).create().fromJson(json, type);
    }
    
    public static String formatJson(String json){
        Gson gson = new GsonBuilder().setPrettyPrinting().create();
        String jsonString = gson.toJson(new JsonParser().parse(json));
        return jsonString;
    }
}

package fan.tutorial.server.value;

public interface Constant {

    String RESULT = "result";
    String SUCCESS = "success";
    String ERROR = "error";
    String RESULT_CODE = "template/json/result";
    String REST_GET_METHOD = "get";
    String REST_POST_METHOD = "post";
    String OFFSET = "offset";
    String LIMIT = "limit";
    String SORT_FIELD = "sortField";
    String SORT_DIR = "sortDir";
    String TOTAL = "total";
    String DATE_FORMAT_PATTENR_DEFAULT = "yyyy-MM-dd";
    int PAGE_SIZE_DEFAULT = 15;
}

<%@ page pageEncoding="UTF-8"%>
${result}