PDA

View Full Version : Odd problem with grid visuals



darkling235
12 Jan 2010, 4:33 AM
I'm working with an editor grid but it's doing some odd behaviors. For one thing the buttons have all shrunk down to tiny slices. My buttons have been compressed into a single vertical line even though there is plenty of space and I'm not sure how to fix that. The other thing it's doing is that the columns on top of the editor grid aren't scrolling when I scroll the grid. I can be at the begining of the grid or all the way to the end and see the same column names. I know the grid is actually scrolling because I can see the checkbox widgets flip by when I add a new row. I also have some trouble making sure that a scrollbar is always present which is signifigant since the number of columns doesn't all fit on one screen.

My grid worked fine when smaller but completely broke when I tried to scale it up and integrate it into the main page. I'm still trying to get it to work properly and be the correct size.

ANy help would be most appreciate.
Thanks

darkling235
12 Jan 2010, 4:36 AM
Here is my source code: I forgot to include it



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.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 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);

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) {
for(int x = 0; x < result.size(); x++)
store.add(result.get(x));

}});
}

}

Arno.Nyhm
14 Jan 2010, 9:22 AM
on my system i can see with your code the buttons normal and the headers are scrolling with the horizontal scrolling.

maybe you need to check if you realy use the css files from the same gxt download package as your gxt.jar file is?

18273