PDA

View Full Version : Fixed RowNumberer column ?..



IHB1
11 Jan 2010, 4:52 AM
Hi,

This is with reference to the RowNumberer column in a grid, as shown in the GXT Demo http://www.extjs.com/examples/#gridplugins.

Currently, if I scroll horizontally to the right, the RowNumberer column ( alongwith other columns ) also moves to the left and disappears from view. My requirement is that the RowNumberer column should be fixed even if horizontal scrolling is enabled for the Grid so that the user can always see which row he currently is in.

Screenshots:

18210

18211


I did not find any method to achieve this purpose. A setFixed method is available, but can only be used to disable column resizing by the user.

Is it possible to keep the RowNumberer column fixed?..

Thanks

Sample Testing Code:




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.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.RowNumberer;
import com.extjs.gxt.ui.client.widget.layout.FitLayout;
import com.google.gwt.core.client.EntryPoint;
import com.google.gwt.user.client.ui.RootPanel;

public class TestGrid implements EntryPoint {

/**
* Constructor
*/
private TestGrid() {
}

/**
* This is the entry point method.
*/
public void onModuleLoad() {

List<Task> tasks = getTasks();
ListStore<Task> store = new ListStore<Task>();

store.add(tasks);

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

RowNumberer r = new RowNumberer();
columns.add(r);

ColumnConfig desc = new ColumnConfig("description", "Task", 265);
ColumnConfig project = new ColumnConfig("project", "Project", 155);
ColumnConfig due = new ColumnConfig("due", "Due Date", 120);
ColumnConfig estimate = new ColumnConfig("estimate", "Estimate", 120);
ColumnConfig rate = new ColumnConfig("rate", "Rate", 120);

columns.add(desc);
columns.add(project);
columns.add(due);
columns.add(estimate);
columns.add(rate);

ColumnModel cm = new ColumnModel(columns);

EditorGrid<Task> grid = new EditorGrid<Task>(store, cm);
grid.setBorders(true);
grid.getView().setShowDirtyCells(false);

ContentPanel panel = new ContentPanel();
panel.setHeading("Sponsored Projects");
panel.setCollapsible(true);
panel.setFrame(true);
panel.setSize(500, 350);
panel.setLayout(new FitLayout());
panel.add(grid);
RootPanel.get().add(panel);

}

public List<Task> getTasks() {
List<Task> tasks = new ArrayList<Task>();
tasks.add(new Task(100, "Ext Forms: Field Anchoring", 112, "Integrate 2.0 Forms with 2.0 Layouts", 6, 150, "06/24/2007"));
tasks.add(new Task(100, "Ext Forms: Field Anchoring", 113, "Implement AnchorLayout", 4, 150, "06/25/2007"));
tasks.add(new Task(100, "Ext Forms: Field Anchoring", 114, "Add support for multiple types of anchors", 4, 300, "06/27/2007"));
tasks.add(new Task(100, "Ext Forms: Field Anchoring", 115, "Testing and debugging", 8, 150, "06/29/2007"));

tasks.add(new Task(101, "Ext Grid: Single-level Grouping", 101, "Add required rendering 'hooks' to GridView", 6, 100, "07/01/2007"));
tasks.add(new Task(101, "Ext Grid: Single-level Grouping", 102, "Extend GridView and override rendering functions", 4, 0, "07/03/2007"));
tasks.add(new Task(101, "Ext Grid: Single-level Grouping", 103, "Extend Store with grouping functionality", 4, 100, "07/04/2007"));
tasks.add(new Task(101, "Ext Grid: Single-level Grouping", 121, "Default CSS Styling", 2, 350, "07/05/2007"));
tasks.add(new Task(101, "Ext Grid: Single-level Grouping", 104, "Testing and debugging", 6, 100, "07/06/2007"));

return tasks;
}

class Task extends BaseModelData {
public Task(int id, String project, int taskId, String desc, double estimate, double rate, String due) {
set("id", id);
set("project", project);
set("taskId", taskId);
set("description", project);
set("estimate", new Double(estimate));
set("rate", new Double(rate));
set("due", due);
}
}
}

Arno.Nyhm
11 Jan 2010, 5:00 AM
i remember this is not possible and i see a workaround to place 2 tables side by side 1st with the fixed column and 2nd with the other columns and then add synchronize the scrolling of both grids. i dont have a link to it.


maybe i am wrong and there is an other solution for it.

IHB1
13 Jan 2010, 12:01 AM
Thanks for the suggested workaround..but there are some alignment issues when the grid data is being grouped and we have group headers. The alignment of the numbered rows with the grid cells is improper, as shown in the screenshot below.

I really feel the 'Fixed Rownumberer column' feature deserves to be included in the API for the RowNumberer column. It seems reasonable and logical that users would want the RowNumberer column to be fixed especially in cases where we have many columns and scrolling is required. Would be very helpful if this feature in included in the next release.


Sample Testing Code:


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

import com.extjs.gxt.ui.client.Style.HorizontalAlignment;
import com.extjs.gxt.ui.client.Style.VerticalAlignment;
import com.extjs.gxt.ui.client.data.BaseModelData;
import com.extjs.gxt.ui.client.store.GroupingStore;
import com.extjs.gxt.ui.client.store.ListStore;
import com.extjs.gxt.ui.client.widget.ContentPanel;
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.Grid;
import com.extjs.gxt.ui.client.widget.grid.GroupSummaryView;
import com.extjs.gxt.ui.client.widget.grid.RowNumberer;
import com.extjs.gxt.ui.client.widget.grid.SummaryColumnConfig;
import com.extjs.gxt.ui.client.widget.grid.SummaryType;
import com.extjs.gxt.ui.client.widget.layout.ColumnData;
import com.extjs.gxt.ui.client.widget.layout.ColumnLayout;
import com.extjs.gxt.ui.client.widget.layout.TableRowLayout;
import com.google.gwt.core.client.EntryPoint;
import com.google.gwt.user.client.ui.RootPanel;

public class TestGrid implements EntryPoint {

/**
* Constructor
*/
private TestGrid() {
}

/**
* This is the entry point method.
*/
public void onModuleLoad() {

List<Task> tasks = getTasks();
ListStore<Task> store = new GroupingStore<Task>();
((GroupingStore) store).groupBy("project");
store.add(tasks);

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

SummaryColumnConfig desc = new SummaryColumnConfig("description", "Task", 265);
SummaryColumnConfig project = new SummaryColumnConfig("project", "Project", 155);
SummaryColumnConfig due = new SummaryColumnConfig("due", "Due Date", 120);
SummaryColumnConfig estimate = new SummaryColumnConfig("estimate", "Estimate", 120);
estimate.setSummaryType(SummaryType.SUM);
SummaryColumnConfig rate = new SummaryColumnConfig("rate", "Rate", 120);
rate.setSummaryType(SummaryType.SUM);

columns.add(desc);
columns.add(project);
columns.add(due);
columns.add(estimate);
columns.add(rate);

ColumnModel cm = new ColumnModel(columns);

EditorGrid<Task> grid = new EditorGrid<Task>(store, cm);
//grid.setBorders(true);
grid.setView(new GroupSummaryView());
grid.getView().setShowDirtyCells(false);
grid.setSize(800, 650);

ContentPanel panel = new ContentPanel();
TableRowLayout layout = new TableRowLayout();
layout.setColumns(2);
layout.setCellSpacing(0);
layout.setCellHorizontalAlign(HorizontalAlignment.LEFT);
layout.setCellVerticalAlign(VerticalAlignment.TOP);
panel.setLayout(layout);
panel.setHeading("Sponsored Projects");
panel.setCollapsible(true);
panel.setFrame(true);
panel.setSize(1000, 650);
panel.setLayout(new ColumnLayout());

List<ColumnConfig> columns1 = new ArrayList<ColumnConfig>();
columns1.add(new RowNumberer());
SummaryColumnConfig desc1 = new SummaryColumnConfig("RC", "R", 0);
columns1.add(desc1);

ColumnModel cm1 = new ColumnModel(columns1);
Grid<Task> grid1 = new EditorGrid<Task>(store, cm1);
grid1.setSize(40, 650);

panel.add(grid1, new ColumnData(23));
panel.add(grid);

RootPanel.get().add(panel);

}

public List<Task> getTasks() {
List<Task> tasks = new ArrayList<Task>();
tasks.add(new Task(100, "Ext Forms: Field Anchoring", 112, "Integrate 2.0 Forms with 2.0 Layouts", 6, 150, "06/24/2007"));
tasks.add(new Task(100, "Ext Forms: Field Anchoring", 113, "Implement AnchorLayout", 4, 150, "06/25/2007"));
tasks.add(new Task(100, "Ext Forms: Field Anchoring", 114, "Add support for multiple types of anchors", 4, 300, "06/27/2007"));
tasks.add(new Task(100, "Ext Forms: Field Anchoring", 115, "Testing and debugging", 8, 150, "06/29/2007"));

tasks.add(new Task(101, "Ext Grid: Single-level Grouping", 101, "Add required rendering 'hooks' to GridView", 6, 100, "07/01/2007"));
tasks.add(new Task(101, "Ext Grid: Single-level Grouping", 102, "Extend GridView and override rendering functions", 4, 0, "07/03/2007"));
tasks.add(new Task(101, "Ext Grid: Single-level Grouping", 103, "Extend Store with grouping functionality", 4, 100, "07/04/2007"));
tasks.add(new Task(101, "Ext Grid: Single-level Grouping", 121, "Default CSS Styling", 2, 350, "07/05/2007"));
tasks.add(new Task(101, "Ext Grid: Single-level Grouping", 104, "Testing and debugging", 6, 100, "07/06/2007"));

return tasks;
}

class Task extends BaseModelData {
public Task(int id, String project, int taskId, String desc, double estimate, double rate, String due) {
set("id", id);
set("project", project);
set("taskId", taskId);
set("description", project);
set("estimate", new Double(estimate));
set("rate", new Double(rate));
set("due", due);
}
}
}