随笔-126  评论-247  文章-5  trackbacks-0

示例效果图


示例代码

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





  
posted on 2014-06-08 19:01 fancydeepin 阅读(1193) 评论(0)  编辑  收藏

只有注册用户登录后才能发表评论。


网站导航: