[CLOSED] [1.2.3] EditorGrid CellEditor Alignment Issue

[crazycatlady]

The cell editors for rows in my grid are showing up below the actual row I am editing in Initernet Explorer. This problem was fixed in 1.2.2, but now it's back in 1.2.3.

I tested this by using the example editor grid code from the gxt side with the 1.2.2 jar and the 1.2.3 jar.

[sven]

Post a testcase. It works correctly in all my apps and also in the explorer.

[crazycatlady]

I am using the EditableGridExample class from the sample site with the Plant, Stock, and TestData classes from the resources folder from the 1.2.3 download. I cleaned the project and removed all the temp files and recompiled and I am still getting the editor showing up at the bottom of the grid. If this doesn't appear to be a bug, is there some step I am missing when upgrading to the new jar?

public

class EditableGridExample extends LayoutContainer {

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

List<Stock> stocks = TestData.getStocks();
for (Stock s : stocks) {
DateWrapper w = new DateWrapper();
w = w.clearTime();
w = w.addDays((int) (Math.random() * 1000));
s.set("date", w.asDate());
}

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

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

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

final SimpleComboBox<String> combo = new SimpleComboBox<String>();
combo.setTriggerAction(TriggerAction.ALL);
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) {
if (value == null) {
return value;
}
return combo.findModel(value.toString());
}

@Override
public Object postProcessValue(Object value) {
if (value == null) {
return 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 ListStore<Plant> store = new ListStore<Plant>();
store.add(TestData.getPlants());

ColumnModel cm = new ColumnModel(configs);

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

final EditorGrid<Plant> grid = new EditorGrid<Plant>(store, cm);
grid.setAutoExpandColumn("name");
grid.setBorders(true);
grid.addPlugin(checkColumn);
cp.add(grid);

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

@Override
publicvoid componentSelected(ToolBarEvent ce) {
Plant plant = new Plant();
plant.setName("New Plant 1");
plant.setLight("Mostly Shady");
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
publicvoid componentSelected(ButtonEvent ce) {
store.rejectChanges();
}
}));

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

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

add(cp);
}

}

[sven]

Have you also updates all resources (css/images).

Do you get an exception? As it works in the explorer and if you copy the same code to your project and it is broken there it is likly a problem on your side.

[crazycatlady]

I replaced all of the .css files and that fixed the problem. Thanks so much for your help!

[ExtjsuserMA]

We are seeing some alignment issue in the row editor. Not sure where the issue is so thought to post it here.
This is the code for the gridpanel
Ext.get('deptByPlan_div').dom.innerHTML = '';
deptByPlanGrid = new Ext.grid.GridPanel({
store: deptByPlanStore,
xtype: 'grid',
width: 500,
height: 530,
loadMask: true,
region:'center',
iconCls: 'icon-grid',
frame:true,
renderTo: 'deptByPlan_div',
plugins: [editor],
view: bufferView,
tbar: toolBar,
footer : true,
bbar: pagingToolBar,
colModel: deptByPlanColumns,
stripeRows: true,
sortable: true,
trackMouseOver: false,
autoExpandColumn: 'PlanNo',
selModel: rs,
listners:{'render' : function (){alert('check');}}

});