Issues using TextArea within EditorGrid

[bmacphee]

I'm having an issue with the TextArea widget when used within the EditorGrid class (code sample to follow).

In IE6, the text inside the text area is not selectable with the mouse. However, a plain TextArea outside of the grid works fine. Perhaps this widget was not intended to be used inside the editorgrid? (as none of the demos appear to do this)

I based the following code on the EditorGridExample, just trimming the plant fields down and using the TextArea instead of the TextField class:



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

import com.extjs.gxt.ui.client.Style.HorizontalAlignment;
import com.extjs.gxt.ui.client.data.BeanModel;
import com.extjs.gxt.ui.client.data.ModelData;
import com.extjs.gxt.ui.client.event.SelectionListener;
import com.extjs.gxt.ui.client.event.ToolBarEvent;
import com.extjs.gxt.ui.client.store.ListStore;
import com.extjs.gxt.ui.client.widget.ContentPanel;
import com.extjs.gxt.ui.client.widget.LayoutContainer;
import com.extjs.gxt.ui.client.widget.Viewport;
import com.extjs.gxt.ui.client.widget.form.TextArea;
import com.extjs.gxt.ui.client.widget.grid.CellEditor;
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.layout.FillLayout;
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.user.client.ui.RootPanel;

public class EditorGridBugSample implements EntryPoint {

private Viewport viewport;

public void onModuleLoad() {
viewport = new Viewport();
viewport.setLayout(new FillLayout());
viewport.setBorders(false);

viewport.add(new EditableGridExample());
TextArea textArea = new TextArea();
textArea.setValue("you can select this text");
viewport.add(textArea);
RootPanel.get().add(viewport);
}

}

class EditableGridExample extends LayoutContainer {

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

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

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

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

final ListStore<Plant> store = new ListStore<Plant>();

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

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

});
toolBar.add(add);
cp.setTopComponent(toolBar);
cp.setButtonAlign(HorizontalAlignment.CENTER);
add(cp);
}
}

class Plant extends BeanModel implements ModelData {

String name;

public String getName() {
return name;
}

public void setName(String name) {
this.name = name;
}
}

[bmacphee]

Maybe this thread is getting no love because I disobeyed the posting rules.

I forgot to include the GXT version associated. It's happening for me in all the recent versions that I've tried between 1.1x to 1.2.3.

I can't find anywhere that says the TextArea is not supported and should not be used within the EditorGrid. Maybe someone else could enlighten me?

[alt_004]

I am getting this issue as well. I've read somewhere that the textarea may have inherited some css rules from the EditorGrid. However, I don't know what css rule to take out for the textarea to work in EditorGrid.

I hope someone could shed light on this.

[filus]

hello issue actual for gxt version 2, maybe someone resolve this?

[filus]

resolved, but this is a BUG.

all trouble in class GridView, because function renderUI contains


if (!GXT.isGecko && !GXT.isWebKit) {
grid.disableTextSelection(true);
}this is call native function disableTextSelectInternal from class El.

resolve:


private native void disableTextSelectInternal(com.google.gwt.user.client.Element e, boolean disable)/*-{
if (disable) {
e.ondrag = function (evt) {
var targ;
if (!e) var e = $wnd.event;
if (e.target) targ = e.target;
else if (e.srcElement) targ = e.srcElement;
if (targ.nodeType == 3) // defeat Safari bug
targ = targ.parentNode;
if (targ.tagName == 'INPUT' || targ.tagName == 'TEXTAREA') {
return true;
}
return false;
};
e.onselectstart = function (e) {
var targ;
if (!e) var e = $wnd.event;
if (e.target) targ = e.target;
else if (e.srcElement) targ = e.srcElement;
if (targ.nodeType == 3) // defeat Safari bug
targ = targ.parentNode;
if (targ.tagName == 'INPUT' || targ.tagName == 'TEXTAREA') {
return true;
}
return false;
};
} else {
e.ondrag = null;
e.onselectstart = null;
}
}-*/;

grid.addListener(Events.Attach, new Listener<BaseEvent>() {

@Override
public void handleEvent(BaseEvent be) {
disableTextSelectInternal(grid.el().dom,true);

}
});

[sven]

This is already fixed in SVN. Thanks for reporting this.