PDA

View Full Version : Clearing and repopulating Grid doesn't work



darkling235
21 Jan 2010, 5:48 AM
I'm trying to build a filter on top of an editor grid that uses paging. The system actually seems to work correct in everyway except graphically. If the filter should be returning 3 rows it does this correctly and passes the data to my client side handler. I then attempt to clear the Grid data and add the new 3 rows. Unfortunately what it seems to do is copy the rows over and over again. So I wind up with 6 or 9 rows (depending on unknown factors), the same set of 3 over and over again. I suspect that the mix of using PageLoader for most fetches and normal RPC for the filter might have something to do with this. I'd try to switch my filter to using PageLoader but I'm not sure how I could order it to fetch dynamically. I'm using RPCProxy and I could invoke load on it but I don't know what the parameters mean. Can anyone help me with these questions?
Thanks in advance.



I'm not really sure if I'm clearing the grid and repopulating it wrong.


This is my onSuccess method which is basically just responsible for placing the data into the grid


private void setData(List<GridData> result)
{
ListStore store = grid.getStore();
GridView view = grid.getView();
store.removeAll();
view.refresh(false);
for(int x = 0; x < result.size(); x++)
store.add(result);

view.refresh(false);
}


This is my grid


package com.ray.adt.client.grid;

import java.util.ArrayList;
import java.util.Collection;
import java.util.Iterator;
import java.util.List;
import java.util.Map;

import com.extjs.gxt.ui.client.Style;
import com.extjs.gxt.ui.client.Style.HorizontalAlignment;
import com.extjs.gxt.ui.client.data.BasePagingLoadConfig;
import com.extjs.gxt.ui.client.data.BasePagingLoader;
import com.extjs.gxt.ui.client.data.DataProxy;
import com.extjs.gxt.ui.client.data.DataReader;
import com.extjs.gxt.ui.client.data.ModelData;
import com.extjs.gxt.ui.client.data.PagingLoadConfig;
import com.extjs.gxt.ui.client.data.PagingLoadResult;
import com.extjs.gxt.ui.client.data.RpcProxy;
import com.extjs.gxt.ui.client.event.BaseEvent;
import com.extjs.gxt.ui.client.event.ButtonEvent;
import com.extjs.gxt.ui.client.event.ComponentEvent;
import com.extjs.gxt.ui.client.event.EventType;
import com.extjs.gxt.ui.client.event.Events;
import com.extjs.gxt.ui.client.event.GridEvent;
import com.extjs.gxt.ui.client.event.Listener;
import com.extjs.gxt.ui.client.event.RowEditorEvent;
import com.extjs.gxt.ui.client.event.ScrollListener;
import com.extjs.gxt.ui.client.event.SelectionListener;
import com.extjs.gxt.ui.client.store.ListStore;
import com.extjs.gxt.ui.client.store.Record;
import com.extjs.gxt.ui.client.store.StoreEvent;
import com.extjs.gxt.ui.client.store.StoreListener;
import com.extjs.gxt.ui.client.store.Record.RecordUpdate;
import com.extjs.gxt.ui.client.widget.ContentPanel;
import com.extjs.gxt.ui.client.widget.LayoutContainer;
import com.extjs.gxt.ui.client.widget.button.Button;
import com.extjs.gxt.ui.client.widget.form.CheckBox;
import com.extjs.gxt.ui.client.widget.form.DateField;
import com.extjs.gxt.ui.client.widget.form.Field;
import com.extjs.gxt.ui.client.widget.form.NumberField;
import com.extjs.gxt.ui.client.widget.form.SimpleComboBox;
import com.extjs.gxt.ui.client.widget.form.TextField;
import com.extjs.gxt.ui.client.widget.form.ComboBox.TriggerAction;
import com.extjs.gxt.ui.client.widget.grid.CellEditor;
import com.extjs.gxt.ui.client.widget.grid.CheckColumnConfig;
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.EditorGrid;
import com.extjs.gxt.ui.client.widget.grid.GridSelectionModel;
import com.extjs.gxt.ui.client.widget.grid.GridView;
import com.extjs.gxt.ui.client.widget.grid.RowEditor;
import com.extjs.gxt.ui.client.widget.layout.FitLayout;
import com.extjs.gxt.ui.client.widget.layout.FlowLayout;
import com.extjs.gxt.ui.client.widget.selection.SelectionModel;
import com.extjs.gxt.ui.client.widget.toolbar.PagingToolBar;
import com.extjs.gxt.ui.client.widget.toolbar.ToolBar;
import com.google.gwt.core.client.GWT;
import com.google.gwt.i18n.client.DateTimeFormat;
import com.google.gwt.user.client.Element;
import com.google.gwt.user.client.rpc.AsyncCallback;
import com.ray.adt.client.error.ErrorScreen;
import com.ray.adt.client.listGrid.Resources;

public class Grid extends LayoutContainer
{

private GridDataServiceAsync GridDataService = GWT.create(GridDataService.class);
private ListStore<GridData> store;
private ErrorScreen errors;
private Record currentRecord;
private int currentRow;
private int userRole;
private int gridRole;
private RpcProxy<PagingLoadResult<GridData>> proxy;
private String gridID;
private EditorGrid<GridData> grid;
private ColumnModel cm;
private ContentPanel cp;
private CellEditor editor;
private BasePagingLoader loader;
public Grid(ErrorScreen e)
{
errors = e;
}

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

setLayout(new FlowLayout(10));
//this.setSize("200%", "200%");
cp = new ContentPanel();
cp.setHeading("Edit Grid");
cp.setFrame(true);
cp.setIcon(Resources.ICONS.table());
cp.setSize(1200, 500);
cp.setLayout(new FlowLayout());
cp.setScrollMode(Style.Scroll.ALWAYS);


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

proxy = new RpcProxy<PagingLoadResult<GridData>>() {
@Override
public void load(Object loadConfig, AsyncCallback<PagingLoadResult<GridData>> callback) {
PagingLoadConfig pagingConfig = (PagingLoadConfig) loadConfig;
GridDataService.fetchGridData(gridID, pagingConfig.getOffset(), callback);
}
};

loader = new BasePagingLoader(proxy);
store = new ListStore<GridData>(loader);
store.setMonitorChanges(true);
store.addStoreListener(new StoreListener<GridData>()
{

public void handleEvent(StoreEvent<GridData> event)
{
Record record = event.getRecord();

if(event.getOperation() == RecordUpdate.COMMIT)
{
GridData gridData = new GridData();
gridData.setData(record.getModel());
gridData.setGridId(gridID);
System.out.println(gridData.toString());

GridDataService.updateGridData(gridData,
new AsyncCallback<Boolean>() {
public void onFailure(Throwable caught) {
errors.setErrorText("Error updating grid row " + caught.getMessage());
}

public void onSuccess(Boolean result)
{

}
});

}




}

});



cm = new ColumnModel(configs);
grid = new EditorGrid<GridData>(store, cm);
grid.setSelectionModel(new GridSelectionModel<GridData>());
grid.setSize(1000, 300);
grid.addListener(Events.Attach, new Listener<GridEvent<GridData>>() {
public void handleEvent(GridEvent<GridData> be) {
PagingLoadConfig config = new BasePagingLoadConfig();
config.setOffset(0);
config.setLimit(10);

Map<String, Object> state = grid.getState();
if (state.containsKey("offset")) {
int offset = (Integer)state.get("offset");
int limit = (Integer)state.get("limit");
config.setOffset(offset);
config.setLimit(limit);
}
if (state.containsKey("sortField")) {
config.setSortField((String)state.get("sortField"));
//config.setSortDir(SortDir.valueOf((String)state.get("sortDir")));
}
loader.load(config);
}
});



/* grid.addListener(Events.BeforeEdit, new Listener<GridEvent<?>>() {
public void handleEvent(GridEvent<?> gridEvent) {
gridEvent.setCancelled(isAuthorized(userRole, gridRole));
}
});*/

configs.add(this.makeTextField("docNumber", "Document Number"));
configs.add(this.makeTextField("docDescription", "Document Description"));
configs.add(this.makeTextField("docCode", "Doc Code"));
configs.add(this.makeTextField("respEid", "Resp Eng EIDs"));
configs.add(this.makeTextField("respEngs", "Resp Engs"));
configs.add(this.makeC5Field("c5BidCode", "C5 Bid Code"));
configs.add(this.makeTextField("modelingReuse", "Modeling Reuse"));
configs.add(this.makeDateField("modelingPlanDate", "Modeling Plan Date"));
configs.add(this.makeDateField("modelingOutlookDate", "Modeling Outlook Date"));
configs.add(this.makeDateField("modelingActualDate", "Modeling Actual Date"));
configs.add(this.makeTextField("analysisReuse", "Analysis Reuse"));
configs.add(this.makeTextField("drawingReuse", "Drawing Reuse"));
configs.add(this.makeDateField("drawingPlanDate", "Drawing Plan Date"));
configs.add(this.makeDateField("drawingOutlookDate", "Drawing Outlook Date"));
configs.add(this.makeDateField("drawingActualDate", "Drawing Actual Date"));
//configs.add(this.makeTextField("thermalReuse", "Thermal Reuse"));
configs.add(this.makeDateField("thermalPlanDate", "Thermal Plan Date"));
configs.add(this.makeDateField("thermalOutlookDate", "Thermal Outlook Date"));
configs.add(this.makeDateField("thermalActualDate", "Thermal Actual Date"));
configs.add(this.makeTextField("outlookNumberOfSheets", "Outlook Number of Sheets"));
configs.add(this.makeOutlookSheetField("outlookSheetSize", "Outlook Sheet Size"));
configs.add(this.makeTextField("outlookNumber of Termination", "Outlook Number of Termination"));
configs.add(this.makeTextField("effectiveSqFeet", "Effective Outlook Square Feet"));
configs.add(this.makeTextField("effectiveNumberOfTermination", "Effective Number of Termination"));
configs.add(this.makePercent("modelingComplete", "Modeling Complete"));
configs.add(this.makePercent("structualComplete", "Structural Complete"));
configs.add(this.makePercent("thermalComplete", "Thermal Complete"));
configs.add(this.makePercent("drawingComplete", "Drawing Complete"));
configs.add(this.makePercent("checkingComplete", "Checking Complete"));
configs.add(this.makeTextField("actionDocument", "Action Document"));
configs.add(this.makeDateField("submittedPlanDate", "Submitted Plan Date"));
configs.add(this.makeDateField("submittedOutlookDate", "Submitted Outlook Date"));
configs.add(this.makeDateField("submittedActualDate", "Submitted Actual Date"));
configs.add(this.makeTextField("CCBStart", "CCB Start"));
configs.add(this.makeDateField("releasedPlanDate", "Released Plan Date"));
configs.add(this.makeDateField("releasedOutlookDate", "Released Outlook Date"));
configs.add(this.makeDateField("releasedActualDate", "Released Actual Date"));
configs.add(this.makeTextField("iscNeedDate", "ISC Need Date"));
configs.add(this.makeTextField("drawingNeedDate", "Drawing Need Date"));
configs.add(this.makeTextField("udText1", "UDText1"));
configs.add(this.makeTextField("udText2", "UDText2"));
configs.add(this.makeTextField("udText3", "UDText3"));
configs.add(this.makeTextField("udText4", "UDText4"));
configs.add(this.makeTextField("udText5", "UDText5"));
configs.add(this.makeTextField("udText6", "UDText6"));
configs.add(this.makeDateField("udDate1", "UDDate1"));
configs.add(this.makeDateField("udDate2", "UDDate2"));
configs.add(this.makeCheckBox("deleted", "Deleted"));
configs.add(this.makeTextField("percentComplete", "%Complete"));








grid.setBorders(true);
cp.add(grid);

PagingToolBar toolBar = new PagingToolBar(50);
toolBar.bind(loader);
Button add = new Button("Add Row");
add.addSelectionListener(new SelectionListener<ButtonEvent>() {


public void componentSelected(ButtonEvent ce) {
GridData data = new GridData();
grid.stopEditing();
store.insert(data, 0);
grid.startEditing(0, 0);

}

});
toolBar.add(add);
cp.setTopComponent(toolBar);

cp.setButtonAlign(HorizontalAlignment.CENTER);

cp.addButton(new Button("Refresh", new SelectionListener<ButtonEvent>() {


public void componentSelected(ButtonEvent ce) {
loader.load();
}
}));

cp.addButton(new Button("Reset", new SelectionListener<ButtonEvent>() {


public void componentSelected(ButtonEvent ce) {
store.rejectChanges();
}
}));

cp.addButton(new Button("Save", new SelectionListener<ButtonEvent>() {


public void componentSelected(ButtonEvent ce) {
store.commitChanges();
}
}));


add(cp);

}

protected ColumnConfig makeTextField(String id, String name)
{
ColumnConfig column = new ColumnConfig();
column.setId(id);
column.setHeader(name);
column.setWidth(220);


TextField<String> field = new TextField<String>();
field.setAllowBlank(true);
column.setEditor(new CellEditor(field));
return column;

}

protected ColumnConfig makeCheckBox(String id, String name)
{
CheckColumnConfig checkColumn = new CheckColumnConfig(id, name, 55);
checkColumn.setId(id);
checkColumn.setHeader(name);
grid.addPlugin(checkColumn);
CellEditor checkBoxEditor = new CellEditor(new CheckBox());
checkColumn.setEditor(checkBoxEditor);

return checkColumn;
}

protected ColumnConfig makeDateField(String id, String name)
{
DateField dateField = new DateField();
dateField.getPropertyEditor().setFormat(DateTimeFormat.getFormat("MM/dd/y"));

ColumnConfig column = new ColumnConfig();
column.setId(id);
column.setHeader(name);
column.setWidth(95);
column.setEditor(new CellEditor(dateField));
column.setDateTimeFormat(DateTimeFormat.getMediumDateFormat());
return column;
}

protected ColumnConfig makeC5Field(String id, String name)
{
final SimpleComboBox<String> combo = new SimpleComboBox<String>();
combo.setForceSelection(true);
combo.setTriggerAction(TriggerAction.ALL);
combo.add("DHB");
combo.add("DDC");
combo.add("DEC");
combo.add("AD");
combo.add("AE");
combo.add("AH");
combo.add("BD");
combo.add("BE");
combo.add("BH");
combo.add("DDB");
combo.add("DEB");
combo.add("DGA");
combo.add("HAA");
combo.add("HBA");
combo.add("Other");

ColumnConfig column = new ColumnConfig();
column.setId(id);
column.setHeader(name);
column.setWidth(95);

CellEditor typeComboEditor = new CellEditor(combo) {

public Object preProcessValue(Object value) {
if (value == null) {
return value;
}
return combo.findModel(value.toString());
}


public Object postProcessValue(Object value) {
if (value == null) {
return value;
}
return ((ModelData) value).get("value");
}
};


column.setEditor(typeComboEditor);
return column;
}

protected ColumnConfig makeOutlookSheetField(String id, String name)
{
final SimpleComboBox<String> combo = new SimpleComboBox<String>();
combo.setForceSelection(true);
combo.setTriggerAction(TriggerAction.ALL);
combo.add("A");
combo.add("B");
combo.add("C");
combo.add("D");
combo.add("E");


ColumnConfig column = new ColumnConfig();
column.setId(id);
column.setHeader(name);
column.setWidth(220);

CellEditor typeComboEditor = new CellEditor(combo) {

public Object preProcessValue(Object value) {
if (value == null) {
return value;
}
return combo.findModel(value.toString());
}


public Object postProcessValue(Object value) {
if (value == null) {
return value;
}
return ((ModelData) value).get("value");
}
};

column.setEditor(typeComboEditor);
return column;
}


protected ColumnConfig makePercent(String id, String name)
{
NumberField field = new NumberField();
field.setMaxValue(100);
field.setMinValue(0);
field.setAllowDecimals(true);
field.setAllowNegative(false);
ColumnConfig column = new ColumnConfig();
column.setId(id);
column.setHeader(name);
column.setWidth(220);
column.setEditor(new CellEditor(field));
return column;
}

public void fetch(String key)
{
gridID = key;
/*GridDataService.fetchGridData(key, 0, 50, new AsyncCallback<PagingLoadResult<GridData>>(){


public void onFailure(Throwable caught) {
errors.setErrorText("Failure to fetch grid");

}


public void onSuccess(PagingLoadResult<GridData> result) {
store.add(result.getData());
grid.reconfigure(store, cm);
//for(int x = 0; x < store.getCount(); x++)
//System.out.println(store.getAt(x).toString());
grid.getView().refresh(false);
}



});*/
}

private boolean isAuthorized(int userRole, int gridRole)
{
return false;
}

public ListStore<GridData>getStore()
{
return store;
}

public String getGridId()
{
return gridID;
}

public GridView getView()
{
return grid.getView();
}

}