GXT之旅:第四章:Data与Components(6)——GridCellRenderer

GridCellRenderer(渲染器)

目前看来,RSSReader项目的grid已经简单的显示出来了——每一列都是显示简单的一个field数据。如果想要让几个fields联合起来,更丰富的显示的话,我们就需要使用GridCellRenderer。它允许我们使用HTML去渲染表格里面的内容。

GridCellRenderer定义好之后,需要通过ColumnConfig.setRenderer方法设置,应用于一个列上。

接下来我们要使用GridCellRenderer在我们RSSReader项目的自定义component ItemGrid。用来替换先前定义的title和description两个列,使用GridCellRenderer来显示上下结构的(title在上,description在下)一列。

  • ItemGrid的onRender方法里,定义一个GridCellRenderer
		GridCellRenderer<ModelData> itemsRenderer = new GridCellRenderer<ModelData>() {
			@Override
			public Object render(ModelData model, String property,
					ColumnData config, int rowIndex, int colIndex,
					ListStore<ModelData> store, Grid<ModelData> grid) {
				String title = model.get("title");
				String description = model.get("description");
				return "<b>" + title + "</b><br/>" + description;
			}
		};

  • 实现了render方法,通过model获得title和description,联合形成一个html的String
  • 新建一个ColumnConfig,将定义好的itemsRenderer设置进去,同时定义了一列名为Items,删除之前的ColumnConfig
ColumnConfig column = new ColumnConfig();
column.setId("items");
column.setRenderer(itemsRenderer);
column.setHeader("Items");
  • 将column加入到配置列表中,将配置列表放入ColumnModel里。
    columns.add(column);
    final ColumnModel columnModel = new ColumnModel(columns);
  • 因为只有一列,所以让items这一列伸展出来

grid.setAutoExpandColumn("items");

  • 运行程序之后的效果如下:


  • 当我们再把先前的title和description列定义加入之后就会更清楚ColumnConfig意义,整个代码如下:
package com.danielvaughan.rssreader.client.grids;

import java.util.ArrayList;
import java.util.List;

import com.danielvaughan.rssreader.client.RSSReaderConstants;
import com.danielvaughan.rssreader.client.services.FeedServiceAsync;
import com.danielvaughan.rssreader.shared.model.Item;
import com.extjs.gxt.ui.client.Registry;
import com.extjs.gxt.ui.client.data.BaseListLoader;
import com.extjs.gxt.ui.client.data.ListLoadResult;
import com.extjs.gxt.ui.client.data.ListLoader;
import com.extjs.gxt.ui.client.data.ModelData;
import com.extjs.gxt.ui.client.data.RpcProxy;
import com.extjs.gxt.ui.client.store.ListStore;
import com.extjs.gxt.ui.client.widget.LayoutContainer;
import com.extjs.gxt.ui.client.widget.grid.ColumnConfig;
import com.extjs.gxt.ui.client.widget.grid.ColumnData;
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.grid.GridCellRenderer;
import com.extjs.gxt.ui.client.widget.layout.FitLayout;
import com.google.gwt.user.client.Element;
import com.google.gwt.user.client.rpc.AsyncCallback;

public class ItemGrid extends LayoutContainer {

	public ItemGrid() {
		setLayout(new FitLayout());
	}

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

		final List<ColumnConfig> columns = new ArrayList<ColumnConfig>();

		columns.add(new ColumnConfig("title", "Title", 200));
		columns.add(new ColumnConfig("description", "Description", 200));

		GridCellRenderer<ModelData> itemsRenderer = new GridCellRenderer<ModelData>() {
			@Override
			public Object render(ModelData model, String property,
					ColumnData config, int rowIndex, int colIndex,
					ListStore<ModelData> store, Grid<ModelData> grid) {
				String title = model.get("title");
				String description = model.get("description");
				return "<b>" + title + "</b><br/>" + description;
			}
		};
		ColumnConfig column = new ColumnConfig();
		column.setId("items");
		column.setRenderer(itemsRenderer);
		column.setHeader("Items");
		columns.add(column);
		final ColumnModel columnModel = new ColumnModel(columns);
		final String TEST_DATA_FILE = "http://127.0.0.1:8888/rss2sample.xml";

		final FeedServiceAsync feedService = Registry
				.get(RSSReaderConstants.FEED_SERVICE);
		RpcProxy<List<Item>> proxy = new RpcProxy<List<Item>>() {
			@Override
			protected void load(Object loadConfig,
					AsyncCallback<List<Item>> callback) {
				feedService.loadItems(TEST_DATA_FILE, callback);
			}
		};
		ListLoader<ListLoadResult<Item>> loader = new BaseListLoader<ListLoadResult<Item>>(
				proxy);
		ListStore<ModelData> itemStore = new ListStore<ModelData>(loader);

		Grid<ModelData> grid = new Grid<ModelData>(itemStore, columnModel);
		grid.setBorders(true);
		grid.setAutoExpandColumn("items");
		loader.load();
		add(grid);
	}
}



  • ColumnConfig其实就是定义一列。如果其不使用渲染其,则默认的简单文本显示,如果使用渲染器,可以自定义显示效果支持html标签。显示的列的顺序根add的顺序有关!



评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值