package fan.tutorial.client.ui.grids;

import java.util.ArrayList;
import java.util.List;
import com.extjs.gxt.ui.client.data.BasePagingLoader;
import com.extjs.gxt.ui.client.data.HttpProxy;
import com.extjs.gxt.ui.client.data.JsonPagingLoadResultReader;
import com.extjs.gxt.ui.client.data.ModelData;
import com.extjs.gxt.ui.client.data.ModelType;
import com.extjs.gxt.ui.client.data.PagingLoadResult;
import com.extjs.gxt.ui.client.data.PagingLoader;
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.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.extjs.gxt.ui.client.widget.toolbar.PagingToolBar;
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.commons.PagingToolBarExtend;
import fan.tutorial.client.model.IEmployee;
import fan.tutorial.server.value.Constant;

public class GridPagingExample extends LayoutContainer {

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

        //創建內容面板
        ContentPanel panel = new ContentPanel();
        //設置面板標題
        panel.setHeadingHtml("Grid Paging");
        //設置面板寬度高度
        panel.setSize(600, 350);
        //設置面板布局, FitLayout 內容填充整個面板
        panel.setLayout(new FitLayout());
        panel.setFrame(true);

        //創建ModelType
        ModelType modelType = new ModelType();
        //一定要設置才能顯示分頁總數
        modelType.setTotalName(Constant.TOTAL);
        //設置根名稱（與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/page.json";
        //構建RequestBuilder
        RequestBuilder builder = new RequestBuilder(RequestBuilder.GET, url);
        //創建HttpProxy
        HttpProxy<String> proxy = new HttpProxy<String>(builder);
        //JsonPagingLoadResultReader
        JsonPagingLoadResultReader<PagingLoadResult<ModelData>> reader = new JsonPagingLoadResultReader<PagingLoadResult<ModelData>>(modelType);
        //數據加載器
        PagingLoader<PagingLoadResult<ModelData>> loader = new BasePagingLoader<PagingLoadResult<ModelData>>(proxy, reader);
        //數據存儲器
        ListStore<ModelData> store = new ListStore<ModelData>(loader);
        //分頁TOOLBAR
        PagingToolBar pagingToolBar = new PagingToolBarExtend(Constant.PAGE_SIZE_DEFAULT);
        pagingToolBar.bind(loader);

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

package fan.tutorial.server.controller;

import java.util.List;
import javax.annotation.Resource;
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.RequestMapping;
import fan.tutorial.client.model.Employee;
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/page")
    public String findByPage(Model model, int offset, int limit){
        List<Employee> resultList = service.findEmplyeeByPage(offset, limit);
        int total = service.getEmplyeeCounts();
        String[] rootNames = {Constant.RESULT, Constant.TOTAL};
        Object[] objects = {resultList, total};
        String result = JsonUtil.toJson(rootNames, Constant.DATE_FORMAT_PATTENR_DEFAULT, objects);
        model.addAttribute(Constant.RESULT, result);
        return Constant.RESULT_CODE;
    }
}

package fan.tutorial.server.service;

import java.util.ArrayList;
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> findEmplyeeByPage(int offset, int limit){
        List<Employee> store = data.getEmployeeList();
        List<Employee> target = new ArrayList<Employee>();
        for(int i = offset; i < offset + limit && i < store.size(); i++){
            target.add(store.get(i));
        }
        return target;
    }
    
    public int getEmplyeeCounts(){
        return data.getEmployeeList().size();
    }
}