PDA

View Full Version : Problem with EditorGrid inside a TabPanel



darkling235
13 Jan 2010, 4:57 AM
I'm putting an editorgrid inside of a tab panel and when I do all the buttons in my content panel almost vanish. They shrink down to tiny slices like vertical lines that can be clicked on but look totally ugly. Also the grid headers don't scroll correctly when I scroll across the grid. Has anyone run into these problems before? Any help would be greatly appreciated as I'm on a tight deadline and nothing I've tried seems to work.
Thanks




package com.ray.adt.client.grid;

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

import com.extjs.gxt.ui.client.Style;
import com.extjs.gxt.ui.client.Style.HorizontalAlignment;
import com.extjs.gxt.ui.client.data.ModelData;
import com.extjs.gxt.ui.client.event.BaseEvent;
import com.extjs.gxt.ui.client.event.ButtonEvent;
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.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.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.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 EditorGrid<GridData> grid;
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%");
ContentPanel 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>();
store = new ListStore<GridData>();

store.addStoreListener(new StoreListener<GridData>()
{
public void handleEvent(StoreEvent<GridData> event)
{
ModelData data = null;
Record record = event.getRecord();


if(event.getOperation() == RecordUpdate.COMMIT)
{
GridData gridData = new GridData();
gridData.setData(data);
System.out.println(gridData.toString());

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

public void onSuccess(Void result) {
}
});

}




}

});



ColumnModel cm = new ColumnModel(configs);
grid = new EditorGrid<GridData>(store, cm);
grid.setSelectionModel(new GridSelectionModel<GridData>());
grid.setSize(1000, 300);
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);

ToolBar toolBar = new ToolBar();
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("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(false);
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);
column.setEditor(new CellEditor(combo));
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 = 0.6493 sqft");
combo.add("B = 1.2986 sqft");
combo.add("C = 2.5972 sqft");
combo.add("D = 5.1944 sqft");
combo.add("E = 10.3889 sqft");


ColumnConfig column = new ColumnConfig();
column.setId(id);
column.setHeader(name);
column.setWidth(220);
column.setEditor(new CellEditor(combo));
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)
{
GridDataService.fetchGridData(key, new AsyncCallback<List<GridData>>(){


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

}


public void onSuccess(List<GridData> result) {
store.add(result);
}



});
}

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

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

}

Arno.Nyhm
15 Jan 2010, 8:30 AM
it is the same problem like you posted one day before?
http://www.extjs.com/forum/showthread.php?p=426465

then please no double post it