GXT组件使用教程1——Basic Grid

董瑞龙

浏览: 106909 次
性别:
来自: 青岛

最近访客更多访客>>

xiaohou12345

zhangpeilin

d4176269

gzb001

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

GXT组件教程

GWT EXT CSS Cisco Eclipse

GXT组件使用教程1——Basic Grid

此系列不是从新建一个项目开始。学习此教程的人应该有能力通过查资料完成GWT同EXT结合并构建项目，若是从零开始的网友请参见：

Quick Setup for Ext GWT 2.X

===========================

Note : Ext GWT 2.X requires GWT 1.6.x or GWT 2.0 (any build ending in "-gwt2.zip").

STEP 1 -> Create a GWT 1.6.x project within Eclipse.

Copy the contents of the /resources folder in the download to a {foldername} location with your war folder.

Substitute {foldername} with the name of the folder you've created for resources within your war folder.

STEP 3 -> Add the following stylesheet to your host page.

STEP 3b -> If you are using Charts, add the following script to your host page.

STEP 4 -> Add the following entry to you projects module xml file.

STEP 5 -> Ext GWT requires the following doctype (quirksmode).

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

STEP 6 -> Eclipse Setup (should be similar for other development environments)

These instructions assume you have a existing project and launch configuration.

1. Add gxt.jar to the project.

a. Right click on project name in 'Package Explorer'.

b. Select 'Properties' from content menu.

c. Select 'Java Build Path'.

d. Select 'Libraries' tab.

e. Add the gxt.jar either with 'Add JARs...' or 'Add External JARs...'.

2. Add GXT jar to launch configuration.

a. Choose Run / Open Run Dialog.

b. Select your appropriate launch configuration under 'Java Application'.

c. Select the 'Classpath' tab.

d. Add the gxt.jar to the classpath.

============================

言归正传，首先看一下例子截图

表格是gxt企业级开发经常使用的控件，学习gxt官方提供的控件，阅读源码是非常有效方法。很多开发灵感是可以从控件中找到的。

查看源码：

构建一个基本表格，第一步创建列配置：ColumnConfig

// 创建一个list 用于存放列的配置，一个配置列对应一个列

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

// 此处的"name" 可以去除加载model中以"name"为key的值
    column.setId("name");

// 显示在此列的名称
    column.setHeader("Company");

//这列的宽度
    column.setWidth(200);

// 将这列放到list中
    configs.add(column);  
  // column 也可以通过构造 colum = new column("key","displayName",width)
    column = new ColumnConfig();  
    column.setId("symbol");  
    column.setHeader("Symbol");  
    column.setWidth(100);  
    configs.add(column);  
  
    column = new ColumnConfig();  
    column.setId("last");  
    column.setHeader("Last");  
    column.setAlignment(HorizontalAlignment.RIGHT);  
    column.setWidth(75);  
    column.setRenderer(gridNumber);  
    configs.add(column);  
  
    column = new ColumnConfig("change", "Change", 100);  
    column.setAlignment(HorizontalAlignment.RIGHT);  
    column.setRenderer(change);  
    configs.add(column);  
  
    column = new ColumnConfig("date", "Last Updated", 100);  
    column.setAlignment(HorizontalAlignment.RIGHT);  
    column.setDateTimeFormat(DateTimeFormat.getShortDateFormat());  
    configs.add(column);

第二步声明store 并加载上数据

// 表格最常用的store

ListStore<Stock> store = new ListStore<Stock>();

// 为store加上数据，TestData可在gxt源码找到
    store.add(TestData.getStocks());

TestData.getStocks()

 //返回的只是一个简单的list

public static List<Stock> getStocks() {
    List<Stock> stocks = new ArrayList<Stock>();

    stocks.add(new Stock("Apple Inc.", "AAPL", 125.64, 123.43));
    stocks.add(new Stock("Cisco Systems, Inc.", "CSCO", 25.84, 26.3));
    stocks.add(new Stock("Google Inc.", "GOOG", 516.2, 512.6));
    stocks.add(new Stock("Intel Corporation", "INTC", 21.36, 21.53));
    stocks.add(new Stock("Level 3 Communications, Inc.", "LVLT", 5.55, 5.54));
    //...
    stocks.add(new Stock("First Data Corporation", "FDC", 32.7, 32.65));
    return stocks;
  }

Stock.class 源码

// BaseModel是我最常用的model
public class Stock extends BaseModel {

  public Stock() {
  }

  public Stock(String name, String symbol, double open, double last) {
    // "name"就是存储model的key.前面的 column.setId("key");就是与这        
    //里对应
    set("name", name);
    set("symbol", symbol);
    set("open", open);
    set("last", last);
    set("date", new Date());
    set("change", last - open);
  }

  public Stock(String name, double open, double change, double pctChange, Date date, String industry) {
    set("name", name);
    set("open", open);
    set("change", change);
    set("percentChange", pctChange);
    set("date", date);
    set("industry", industry);
  }

第三步构建表格

// 构造函数需加上 store 和 含有ColumnConfig 的list : cm
Grid<Stock> grid = new Grid<Stock>(store, cm);  
// 设置显示属性: css属性名称  属性值
    grid.setStyleAttribute("borderTop", "none");
// 列都是固定宽度，设置某一列自动填充剩余空间  
    grid.setAutoExpandColumn("name");  
    grid.setBorders(true);  
    grid.setStripeRows(true);

第四步美化表格

// 设置数字格式
final NumberFormat currency = NumberFormat.getCurrencyFormat();  
    final NumberFormat number = NumberFormat.getFormat("0.00");  
    final NumberCellRenderer<Grid<Stock>> numberRenderer = new NumberCellRenderer<Grid<Stock>>(  
        currency);  
// 重写表格加载数据时的动作
    GridCellRenderer<Stock> change = new GridCellRenderer<Stock>() {  
      public String render(Stock model, String property, ColumnData config, int rowIndex,  
          int colIndex, ListStore<Stock> store, Grid<Stock> grid) {  
        double val = (Double) model.get(property);  
        String style = val < 0 ? "red" : "green";  
        return "<span style='color:" + style + "'>" + number.format(val) + "</span>";  
      }  
    };  
  
// 对单元格进行格式设置
    GridCellRenderer<Stock> gridNumber = new GridCellRenderer<Stock>() {  
      public String render(Stock model, String property, ColumnData config, int rowIndex,  
          int colIndex, ListStore<Stock> store, Grid<Stock> grid) {  
        return numberRenderer.render(null, property, model.get(property));  
      }  
    };

注意事项：

表格可能没有数据，将表格的高度设置一下例如 grid.setSize(800,600); 试试
很多时候我们可以直接复制官方提供的例子的源码。
项目源码请参见附件

Gxt_Blog.zip (4.3 MB)
下载次数: 168

查看图片附件

分享到：

GXT组件使用教程2——Auto Height Grid | 编程序的小女孩

2010-09-10 22:59
浏览 4697
评论(5)
分类:Web前端
查看更多

5 楼 zzz078 2012-01-13

好好好！！谢谢了！研究研究.

4 楼董瑞龙 2011-09-02

261667318 写道

请问楼主，源码中的ContentPanel对象cp怎么加icon.加了samples文件夹还是不能用cp.setIcon(Resources.ICONS.table());方法。谢谢

http://rylan.iteye.com/blog/1164348

3 楼董瑞龙 2011-09-02

hejijiang 写道

怎么用了不对呢?

怎么不对？有什么报错信息吗？

2 楼 hejijiang 2011-09-01

怎么用了不对呢?

1 楼 261667318 2011-08-18

请问楼主，源码中的ContentPanel对象cp怎么加icon.加了samples文件夹还是不能用cp.setIcon(Resources.ICONS.table());方法。谢谢

发表评论

您还没有登录,请您登录后再发表评论

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论