View Full Version : about cell renderer
JackyChan
2 Feb 2010, 7:54 PM
Hi,
i meet a problem about GridCellRenderer, my code look like this:
ColumnConfig thumb = new ColumnConfig("goods_thumb", "Thumb", 50);
thumb.setRenderer(new GridCellRenderer<Product>() {
public Object render(Product model, String property, ColumnData config, int rowIndex, int colIndex,
ListStore<Product> store, Grid<Product> grid) {
Image image = new Image();
image.setWidth("50px");
image.setUrl((String)model.get("goods_thumb"));
return "<a href=\"http://www.domain.com/"+model.get("goods_id")+"\" target=\"_blank\">"+image+"</a>";
}
});
and the Grid render fail, not thing to render,but only the loading. But if i change the code to this:
ColumnConfig thumb = new ColumnConfig("goods_thumb", "Thumb", 50);
thumb.setRenderer(new GridCellRenderer<ModelData>() {
public Object render(ModelData model, String property, ColumnData config, int rowIndex, int colIndex,
ListStore<ModelData> store, Grid<ModelData> grid) {
Image image = new Image();
image.setWidth("50px");
image.setUrl((String)model.get("goods_thumb"));
return "<a href=\"http://www.domain.com/"+model.get("goods_id")+"\" target=\"_blank\">"+image+"</a>";
}
});
it works. The diff between these two is the the first one use Product instead of ModelData. And Product is extends BaseModelData.
What is the problem? Sorry for my poor english.
micgala
3 Feb 2010, 7:53 AM
Well, that is strange...
Are you sure that your grid, your store and your renderer are instantiated like this:
... = new X<Product>(...);
JackyChan
3 Feb 2010, 11:05 PM
yes. I did.
following is the code.
package com.yangsam.crm.client.product;
import java.util.ArrayList;
import java.util.List;
import java.lang.Object;
import com.yangsam.crm.client.product.Product;
import com.yangsam.crm.client.resources.Resources;
import com.extjs.gxt.ui.client.Style.SortDir;
import com.extjs.gxt.ui.client.data.BasePagingLoadConfig;
import com.extjs.gxt.ui.client.data.BasePagingLoader;
import com.extjs.gxt.ui.client.data.JsonPagingLoadResultReader;
import com.extjs.gxt.ui.client.data.LoadEvent;
import com.extjs.gxt.ui.client.data.Loader;
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.data.ScriptTagProxy;
import com.extjs.gxt.ui.client.event.ButtonEvent;
import com.extjs.gxt.ui.client.event.Events;
import com.extjs.gxt.ui.client.event.Listener;
import com.extjs.gxt.ui.client.event.MessageBoxEvent;
import com.extjs.gxt.ui.client.event.SelectionListener;
import com.extjs.gxt.ui.client.event.WindowEvent;
import com.extjs.gxt.ui.client.store.ListStore;
import com.extjs.gxt.ui.client.widget.ContentPanel;
import com.extjs.gxt.ui.client.widget.Dialog;
import com.extjs.gxt.ui.client.widget.MessageBox;
import com.extjs.gxt.ui.client.widget.Window;
import com.extjs.gxt.ui.client.widget.button.Button;
import com.extjs.gxt.ui.client.widget.grid.BufferView;
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.grid.RowNumberer;
import com.extjs.gxt.ui.client.widget.layout.FitLayout;
import com.extjs.gxt.ui.client.widget.toolbar.PagingToolBar;
import com.extjs.gxt.ui.client.widget.toolbar.ToolBar;
import com.google.gwt.user.client.Element;
import com.google.gwt.user.client.ui.Image;
import com.extjs.gxt.ui.client.event.GridEvent;
public class ProductGridWindow extends Window implements Listener<WindowEvent>{
Grid<Product> grid;
ProductForm productForm;
Boolean hiding = false;
Button deleteProductBtn;
/**
* @wbp.parser.constructor
*/
public ProductGridWindow() {
setHeading("????");
setSize(800,600);
}
public void handleEvent(final WindowEvent wbe) {
if (wbe.getWindow() == productForm) {
if (!productForm.isDirty()) {
productForm.removeListener(Events.BeforeHide, ProductGridWindow.this);
productForm.removeFromParent();
productForm = null;
if (hiding) {
ProductGridWindow.this.hide();
}
return;
}
wbe.setCancelled(true);
MessageBox.confirm("Cancel", "Are you sure you wish to cancel?", new Listener<MessageBoxEvent>() {
public void handleEvent(MessageBoxEvent mbe) {
if (mbe.getButtonClicked().getItemId().equals(Dialog.YES)) {
productForm.removeListener(Events.BeforeHide, ProductGridWindow.this);
productForm.hide();
productForm.removeFromParent();
productForm = null;
if (hiding) {
ProductGridWindow.this.hide();
}
return;
}
hiding = false;
}
});
return;
}
if (null != productForm) {
hiding = true;
wbe.setCancelled(true);
productForm.hide();
return;
}
hiding = false;
}
@Override
protected void onRender(Element parent, int index) {
super.onRender(parent, index);
setLayout(new FitLayout());
addListener(Events.BeforeHide, this);
ToolBar toolbar = new ToolBar();
Button addProductBtn = new Button("????");
addProductBtn.addSelectionListener(new SelectionListener<ButtonEvent>(){
@Override
public void componentSelected(ButtonEvent ce) {
if (null == productForm) {
productForm = new ProductForm();
productForm.addListener(Events.BeforeHide, ProductGridWindow.this);
productForm.show();
} else {
productForm.toFront();
}
}
});
toolbar.add(addProductBtn);
deleteProductBtn = new Button("??");
deleteProductBtn.addSelectionListener(new SelectionListener<ButtonEvent>(){
@Override
public void componentSelected(ButtonEvent ce) {
}
});
toolbar.add(deleteProductBtn);
String url = "http://v4.admin/product/store/format/json";
ScriptTagProxy<PagingLoadResult<Product>> proxy = new ScriptTagProxy<PagingLoadResult<Product>>(url);
ModelType type = new ModelType();
type.setRoot("products");
type.setTotalName("totalCount");
type.addField("goods_id");
type.addField("goods_name");
type.addField("goods_sn");
type.addField("goods_number");
type.addField("goods_thumb");
type.addField("shop_price");
type.addField("brand");
type.addField("is_on_sale");
JsonPagingLoadResultReader<PagingLoadResult<Product>> reader = new JsonPagingLoadResultReader<PagingLoadResult<Product>>(
type);
final PagingLoader<PagingLoadResult<Product>> loader = new BasePagingLoader<PagingLoadResult<Product>>(proxy,
reader);
loader.addListener(Loader.BeforeLoad, new Listener<LoadEvent>() {
public void handleEvent(LoadEvent be) {
BasePagingLoadConfig m = be.<BasePagingLoadConfig> getConfig();
m.set("start", m.get("offset"));
m.set("ext", "js");
m.set("lightWeight", true);
m.set("sort", (m.get("sortField") == null) ? "" : m.get("sortField"));
m.set("dir", (m.get("sortDir") == null || (m.get("sortDir") != null && m.<SortDir> get("sortDir").equals(
SortDir.NONE))) ? "" : m.get("sortDir"));
}
});
loader.setSortDir(SortDir.DESC);
loader.setSortField("goods_id");
loader.setRemoteSort(true);
ListStore<Product> store = new ListStore<Product>(loader);
final PagingToolBar pagingBar = new PagingToolBar(30);
pagingBar.bind(loader);
final PagingToolBar.PagingToolBarMessages messages = pagingBar.new PagingToolBarMessages();
messages.setAfterPageText("???{0}?");
messages.setBeforePageText("?");
messages.setNextText("???");
messages.setPrevText("???");
messages.setFirstText("???");
messages.setLastText("????");
messages.setRefreshText("??");
messages.setDisplayMsg("??? {0} - {1} ??? {2} ?");
pagingBar.setMessages(messages);
List<ColumnConfig> columns = new ArrayList<ColumnConfig>();
RowNumberer rn = new RowNumberer();
rn.setWidth(20);
columns.add(rn);
ColumnConfig thumb = new ColumnConfig("goods_thumb", "", 60);
thumb.setFixed(true);
thumb.setGroupable(false);
thumb.setSortable(false);
thumb.setMenuDisabled(true);
setThumbRenderer(thumb);
columns.add(thumb);
columns.add(new ColumnConfig("brand", "??", 100));
ColumnConfig title = new ColumnConfig("goods_name", "????", 100);
columns.add(title);
columns.add(new ColumnConfig("goods_sn", "????", 100));
columns.add(new ColumnConfig("shop_price", "??", 50));
ColumnConfig onSale = new ColumnConfig("is_on_sale","??",50);
setOnSaleRenderer(onSale);
columns.add(onSale);
columns.add(new ColumnConfig("goods_number","??", 50));
ColumnModel cm = new ColumnModel(columns);
Grid<Product> grid = new Grid<Product>(store, cm);
grid.setTrackMouseOver(false);
grid.addListener(Events.Attach, new Listener<GridEvent<Product>>() {
public void handleEvent(GridEvent<Product> be) {
loader.load(0, 30);
}
});
grid.setTrackMouseOver(false);
grid.setLoadMask(true);
grid.setBorders(true);
grid.setAutoExpandColumn("goods_name");
BufferView view = new BufferView();
view.setRowHeight(60);
grid.setView(view);
ContentPanel panel = new ContentPanel();
panel.setFrame(true);
panel.setCollapsible(true);
panel.setAnimCollapse(false);
panel.setHeaderVisible(false);
panel.setLayout(new FitLayout());
panel.add(grid);
panel.setTopComponent(toolbar);
panel.setBottomComponent(pagingBar);
add(panel);
}
private void setThumbRenderer(ColumnConfig thumb) {
thumb.setRenderer(new GridCellRenderer<ModelData>(){
public Object render(ModelData model, String property, ColumnData config, int rowIndex, int colIndex, ListStore<ModelData> store, Grid<ModelData> grid) {
Image image = new Image();
image.setWidth("50px");
image.setUrl("http://www.yangsam.com/gallery/"+(String)model.get("goods_thumb"));
return "<a href=\"http://www.yangsam.com/"+model.get("goods_id")+"\" target=\"_blank\">"+image+"</a>";
}
});
}
private void setOnSaleRenderer(ColumnConfig onSale) {
onSale.setRenderer(new GridCellRenderer<ModelData>(){
public Object render(ModelData data, String property, ColumnData config, int rowIndex, int colIndex, ListStore<ModelData> store, Grid<ModelData> grid) {
return data.get("is_on_sale").equals("1") ? new Image(Resources.ICONS.yes()):new Image(Resources.ICONS.no());
}
});
}
}
if i change GridCellRenderer<ModelData> to GridCellRenderer<Product> and the override method render with Product as ModelData,the grid would not working.
Thanks your reply.
Best Regards.
Arno.Nyhm
4 Feb 2010, 9:04 AM
can you pls also post your Product class?
JackyChan
7 Feb 2010, 11:38 PM
there is the Product class.
package com.yangsam.crm.client.product;
import com.extjs.gxt.ui.client.data.BaseModel;
@SuppressWarnings("serial")
public class Product extends BaseModel {
public int getId() {
return get("goods_id");
}
public void setId(int id) {
set("goods_id", id);
}
public String getName() {
return get("goods_name");
}
public void setName(String name) {
set("goods_name", name);
}
public String getSn() {
return get("goods_sn");
}
public void setSn(String sn) {
set("goods_sn", sn);
}
public double getPrice() {
return get("shop_price");
}
public void setPrice(double price) {
set("shop_price", price);
}
public String getBrand() {
return get("brand");
}
public void setBrand(String brand) {
set("brand", brand);
}
public int getCategory() {
return get("cat_id");
}
public void setCategory(int category) {
set("cat_id", category);
}
public boolean getOnSale() {
return get("is_on_sale");
}
public void setOnSale(boolean onSale) {
set("is_on_sale", onSale);
}
public int getStore() {
return get("goods_number");
}
public void setStore(int store) {
set("goods_number", store);
}
public String getThumb() {
return get("goods_thumb");
}
public void setThumb(String thumb) {
set("goods_thumb", thumb);
}
}
shinkell
9 Dec 2010, 8:27 AM
This is typical of most threads - was there ever any resolution to this??
What problem do you have shinkell? The code posted above throws a classcastexception if used with Product, not a problem of GXT.
micgala
9 Dec 2010, 8:33 AM
And I must disagree with you as well.
The complete majority of questions here gets solved.....
Powered by vBulletin® Version 4.2.3 Copyright © 2018 vBulletin Solutions, Inc. All rights reserved.