示例效果圖

示例代碼

GridExample

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.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.SeparatorToolItem;

import com.extjs.gxt.ui.client.widget.toolbar.ToolBar;

import com.google.gwt.user.client.Element;

import fan.tutorial.client.model.IPerson;

import fan.tutorial.client.model.Person;

public class GridExample 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());

        //復選框選擇模型

        CheckBoxSelectionModel<Person> sm = new CheckBoxSelectionModel<Person>();

        //表格列配置

        List<ColumnConfig> configs = new ArrayList<ColumnConfig>();

        //表格列配置信息

        configs.add(sm.getColumn());

        configs.add(new ColumnConfig(IPerson.NAME, "姓名", 100));

        configs.add(new ColumnConfig(IPerson.SEX, "性別", 100));

        configs.add(new ColumnConfig(IPerson.WEIGHT, "體重", 100));

        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;

    }

}

Person

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

    }

}

IPerson

package fan.tutorial.client.model;

public interface IPerson {

    String SEX = "sex";

    String NAME = "name";

    String WEIGHT = "weight";

    String ADDRESS = "address";

    String BIRTHDAY = "birthday";

}