about cell renderer

[JackyChan]

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]

Well, that is strange...

Are you sure that your grid, your store and your renderer are instantiated like this:



... = new X<Product>(...);

[JackyChan]

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]

can you pls also post your Product class?

[JackyChan]

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]

This is typical of most threads - was there ever any resolution to this??

[sven]

What problem do you have shinkell? The code posted above throws a classcastexception if used with Product, not a problem of GXT.

[micgala]

And I must disagree with you as well.
The complete majority of questions here gets solved.....