PDA

View Full Version : [CLOSED] editor grid tab issue



fother
20 Mar 2009, 4:37 AM
in this example http://www.extjs.com/explorer/#editablegrid click at the first cell (row =0, column=0), press tab, and continue press tab.. you can see that the cell that contain a checkbox.. cannot can be access using the tab key...

sven
20 Mar 2009, 4:58 AM
No bug there is no celleditor defined. Also this is a duplicate so, closed.

fother
20 Mar 2009, 5:01 AM
I agree with you..

checkbox is a input field... (can be selected by tab key)

now.. if the column is text... (cannot be selected)..

what you think?

sven
20 Mar 2009, 5:02 AM
The bahaviour is correct as it is now.

fother
20 Mar 2009, 5:06 AM
but... only if is checkbox... think as user... when you will change by tab.. you need get the mouse.. so.. click in the checkbox.. if you have one or two register ok... but if you have 50 checkbox, and when is true.. the user pay your purchase.. you will spend much time to do this operation

sven
20 Mar 2009, 5:09 AM
As i already told you. The example has not set an editor there. So nothing shows up and the next field is focused.

fother
20 Mar 2009, 5:22 AM
so.. I set for the checkbox..



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


look the attachment one.. the layout for the checkbox into a cell isn't good..

press space.. to set as true or false the checkbox... and press tab key

so loose the focus.. and good to middle of grid.. look the attachment two..

code example


package example.client;

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

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.ListStore;
import com.extjs.gxt.ui.client.util.DateWrapper;
import com.extjs.gxt.ui.client.widget.ContentPanel;
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.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.layout.FitLayout;
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;

import example.client.model.Plant;
import example.client.model.Stock;

public class App implements EntryPoint {

public void onModuleLoad() {

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 postProcessValue(Object value) {
if (value == null) {
return value;
}
return ((ModelData) value).get("value");
}

@Override
public Object preProcessValue(Object value) {
if (value == null) {
return value;
}
return combo.findModel(value.toString());
}
};

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);
checkColumn.setEditor(new CellEditor(new CheckBox()));
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
public void 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);

RootPanel.get().add(cp);

}
}

fother
20 Mar 2009, 5:24 AM
tested on firefox 3.0.7
gxt 1.2.3
gwt 1.5.3

sven
20 Mar 2009, 5:24 AM
This is a duplicate report as i told you ;)

This will be fixed with 1.2.4

fother
20 Mar 2009, 5:26 AM
:))

when you told me.. that is duplicated.. you don't told me in what situation.. :)

sven
20 Mar 2009, 5:28 AM
In my first response to this thread ;)

fother
20 Mar 2009, 5:31 AM
I not understand so.. but if will be corrected... its all ok :D

sven
20 Mar 2009, 5:35 AM
FYI: this is already fixed in 2.0 code

fother
20 Mar 2009, 5:39 AM
no problem..


another thing .. your patience increase 200% :D