PDA

View Full Version : tabIndex in EditorGrid



blay
28 Dec 2010, 10:12 AM
Hello:

I have an editor grid where only one of the columns is editable. I want only to tabulate between the "editable cells". As far as I know, that's the default behaviour of EditorGrids. I have a layoutcontainer with 2 content panels. First one has some formPanels with form components. Second one has the grid.
The problem started when I set the tabIndex of form components. Now, when I try to tabulate in the grid, i select an editable cell, then tabulate, it works, but 2nd tabulate goes to first element in form. Is there any way to set the tab index for the cells in the grid?

Thanks

sven
28 Dec 2010, 4:25 PM
There is no direct way. Grid does not use tabIndex at all but simple listens for the tab key (GridSelectionModel.onEditorKey)

Can you post some small testcase implementing EntryPoint? Maybe someone can give you a workaround for this.

blay
29 Dec 2010, 11:39 AM
Hello:

After doing several test I´ve found that the problem I´ve referred in
http://www.sencha.com/forum/showthread.php?119741-tabIndex-in-EditorGrid
is due to some change from Gxt 2.2.0 to 2.2.1.

Browsers tested: IE 7, Firefox 3.6

Using 2.2.0 , when editing an editable cell, pressing Tab focuses the next available editable cell (and starts editing it). With 2.2.1 it just selects next editable cell, but it doesn´t start editing and if your press Tab Key 2nd time it randomly focuses any other element.

I´ve just tested this with the following code:


package com.inditex.client;


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

import com.extjs.gxt.ui.client.data.BaseModelData;
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.button.Button;
import com.extjs.gxt.ui.client.widget.form.FormPanel;
import com.extjs.gxt.ui.client.widget.form.NumberField;
import com.extjs.gxt.ui.client.widget.form.TextField;
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.FitLayout;
import com.google.gwt.core.client.EntryPoint;
import com.google.gwt.user.client.ui.RootPanel;

/**
* Entry point classes define <code>onModuleLoad()</code>.
*/
public class Layout implements EntryPoint {

LayoutContainer layoutContainer = new LayoutContainer();
ListStore<Data> storeGrid = new ListStore<Data>();

public void onModuleLoad(){




ContentPanel gridPanel = new ContentPanel();
gridPanel.setSize(-1,400);
gridPanel.setLayout(new FitLayout());
gridPanel.setHeading("Grid Panel");

List<ColumnConfig> listCc = new ArrayList<ColumnConfig>();
ColumnConfig cc = new ColumnConfig();
cc.setId("a");
cc.setHeader("A");
cc.setWidth(200);
listCc.add(cc);

cc = new ColumnConfig();
cc.setId("b");
cc.setHeader("B");
cc.setWidth(200);
cc.setEditor(new CellEditor(new NumberField()));
listCc.add(cc);

EditorGrid<Data> grid = new EditorGrid<Data>(storeGrid,new ColumnModel(listCc));
grid.setStripeRows(true);
grid.setAutoWidth(true);

gridPanel.add(grid);

for (int i=0;i<10;i++)
storeGrid.add(new Data(new Double(i),null));

layoutContainer.add(gridPanel);

RootPanel.get().add(layoutContainer);

}

public class Data extends BaseModelData{

public Data(){}

public Data(Double a, Double b){
set("a",a);
set("b",b);

}

public Double getA(){
return get("a");
}

public Double getB(){
return get("b");
}

public void setA(String a){
set("a",a);
}

public void setB(Double b){
set("b",b);
}

}



}



(By the way, in Internet Explorer, using 2.2.0, works fine, but if you press tab key very fast, focus goes to non editable cells (like if your just had selected a cell, but no editing and then tab) instead of continuing with the "go to next editable cell and start editing" behaviour).

sven
29 Dec 2010, 11:47 AM
Pressing tab works fine for me here: http://www.sencha.com/examples/explorer.html#editablegrid

blay
29 Dec 2010, 12:08 PM
Could you test that example I´ve posted, please?

sven
29 Dec 2010, 12:31 PM
I found the problem and will reply back here once it got fixed.

blay
29 Dec 2010, 12:36 PM
Ok, thanks Sven ;)

blay
22 Feb 2011, 9:54 AM
Anything new about this??

I need that feature, so i´d appreciate any fix. Thanks