PDA

View Full Version : EditorGrid with GroupingView



gslender
6 Aug 2008, 5:56 PM
Hi,

I've created an explorer page that combines the above grid features - fundamentally it seems to work, but there are some unusual behaviours that need sorting.

Editing content is not correctly updated in the view - and results in ongoing exceptions etc when the edit concludes.

Example code that might be worth adding to the stand set of Grid examples...


/*
* Ext GWT - Ext for GWT
* Copyright(c) 2007, 2008, Ext JS, LLC.
* licensing@extjs.com
*
* http://extjs.com/license
*/
package com.extjs.gxt.samples.explorer.client.pages;

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

import com.extjs.gxt.samples.resources.client.Plant;
import com.extjs.gxt.samples.resources.client.Stock;
import com.extjs.gxt.samples.resources.client.TestData;
import com.extjs.gxt.ui.client.Style.HorizontalAlignment;
import com.extjs.gxt.ui.client.data.ModelData;
import com.extjs.gxt.ui.client.event.ButtonEvent;
import com.extjs.gxt.ui.client.event.SelectionListener;
import com.extjs.gxt.ui.client.event.ToolBarEvent;
import com.extjs.gxt.ui.client.store.GroupingStore;
import com.extjs.gxt.ui.client.store.ListStore;
import com.extjs.gxt.ui.client.util.DateWrapper;
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.DateField;
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.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.GridGroupRenderer;
import com.extjs.gxt.ui.client.widget.grid.GroupColumnData;
import com.extjs.gxt.ui.client.widget.grid.GroupingView;
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.toolbar.TextToolItem;
import com.extjs.gxt.ui.client.widget.toolbar.ToolBar;
import com.google.gwt.core.client.EntryPoint;
import com.google.gwt.i18n.client.DateTimeFormat;
import com.google.gwt.i18n.client.NumberFormat;
import com.google.gwt.user.client.ui.RootPanel;

public class EditorGroupingGridPage extends LayoutContainer implements EntryPoint {

public void onModuleLoad() {
RootPanel.get().add(this);
}

public EditorGroupingGridPage() {
setLayout(new FlowLayout(10));

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

ColumnConfig column = new ColumnConfig();
column.setId("name");
column.setHeader("Common Name");
column.setWidth(220);

TextField text = new TextField();
text.setAllowBlank(false);
text.setAutoValidate(true);
column.setEditor(new CellEditor(text));
configs.add(column);

final SimpleComboBox<String> combo = new SimpleComboBox<String>();
combo.add("Shade");
combo.add("Mostly Shady");
combo.add("Sun or Shade");
combo.add("Mostly Sunny");
combo.add("Sunny");

CellEditor editor = new CellEditor(combo) {
@Override
public Object preProcessValue(Object value) {
return combo.findModel(value.toString());
}

@Override
public Object postProcessValue(Object value) {
return ((ModelData) value).get("value");
}
};

column = new ColumnConfig();
column.setId("light");
column.setHeader("Light");
column.setWidth(130);
column.setEditor(editor);
configs.add(column);

column = new ColumnConfig();
column.setId("price");
column.setHeader("Price");
column.setAlignment(HorizontalAlignment.RIGHT);
column.setWidth(70);
column.setNumberFormat(NumberFormat.getCurrencyFormat());
column.setEditor(new CellEditor(new NumberField()));

configs.add(column);

DateField dateField = new DateField();
dateField.getPropertyEditor().setFormat(DateTimeFormat.getFormat("MM/dd/y"));

column = new ColumnConfig();
column.setId("available");
column.setHeader("Available");
column.setWidth(95);
column.setEditor(new CellEditor(dateField));
column.setDateTimeFormat(DateTimeFormat.getMediumDateFormat());
configs.add(column);

CheckColumnConfig checkColumn = new CheckColumnConfig("indoor", "Indoor?", 55);
configs.add(checkColumn);

final GroupingStore<Plant> store = new GroupingStore<Plant>();
store.add(TestData.getPlants());
store.groupBy("light");

final ColumnModel cm = new ColumnModel(configs);

ContentPanel cp = new ContentPanel();
cp.setHeading("Edit Plants");
cp.setFrame(true);
cp.setSize(600, 300);
cp.setLayout(new FitLayout());

GroupingView view = new GroupingView();
view.setForceFit(true);
view.setGroupRenderer(new GridGroupRenderer() {
public String render(GroupColumnData data) {
String f = cm.getColumnById(data.field).getHeader();
String l = data.models.size() == 1 ? "Item" : "Items";
return f + ": " + data.group + " (" + data.models.size() + " " + l + ")";
}
});
final EditorGrid grid = new EditorGrid(store, cm);
grid.setAutoExpandColumn("name");
grid.setBorders(true);
grid.addPlugin(checkColumn);
grid.setView(view);
cp.add(grid);

ToolBar toolBar = new ToolBar();
TextToolItem add = new TextToolItem("Add Plant");
add.addSelectionListener(new SelectionListener<ToolBarEvent>() {

@Override
public void componentSelected(ToolBarEvent ce) {
Plant plant = new Plant();
plant.setName("New Plant 1");
plant.setLight("Mostly Shade");
plant.setPrice(0);
plant.setAvailable(new DateWrapper().clearTime().asDate());
plant.setIndoor(false);

grid.stopEditing();
store.insert(plant, 0);
grid.startEditing(0, 0);

}

});
toolBar.add(add);
cp.setTopComponent(toolBar);
cp.setButtonAlign(HorizontalAlignment.CENTER);
cp.addButton(new Button("Reset", new SelectionListener<ButtonEvent>() {

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

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

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

add(cp);
}
}