How to gird cloumn Grouping? (cloumn integration)

[JungHoonKim]

Hi All

I wonder how to gird cloumn Grouping (Not grid header)

like this

1 car truck 20091102
2 car bus 20091102
3 car taxi 20091103
--------------
1 car truck 20091102
2 bus
3 taxi 20091103
-------------

Now I use GridCellRender
each row data compare with now and previous
if same hide not show

I want to know another way to cloumn grouping..
(like GroupingView ... )

Do not Support GWT library or Somthing?

I use GWT 1.7 not extjs...

plesae help me!

Thanks..:D

[Arno.Nyhm]

did you see this example?

http://www.extjs.com/examples/explorer.html#grouping

[JungHoonKim]

Thanks

But I already see grouping Sample's than I know GroupingView
I used GroupingView and GroupingStore...
but I don't want to grouping like GroupingSample

original grid..

http://www.extjs.com/forum/attachment.php?attachmentid=17267&stc=1&d=1258506412

I want to make grid like below...

http://www.extjs.com/forum/attachment.php?attachmentid=17268&stc=1&d=1258506412


not grouping Sample

than I use GridCellRender

private Grid<C220uc030w1DataModel> createGrid() {
//config cell renderer1 : display row grouping
GridCellRenderer<Modeldata> pDateCellRenderer = new GridCellRenderer<Modeldata>() {
public String render(Modeldata model, String property, ColumnData config, int
rowIndex, int colIndex, ListStore<Modeldata> store,
Grid<Modeldata> grid) {
String var = (String) model.get(property);
if(!pDate.equals(var)){
pDate = (String) model.get(property);
return var;
}
return "";
}
};

but I want to know ...another way to make grid not gridCellrender..

Something Support GWT Library ..
GroupingView class Support Easy way to grouping...

if not support in library ......
I make code every page.......^^

[Arno.Nyhm]

this is a little bit complicated, but you can do this with css.
but it works only if the text is a oneliner and not need to span over more. then you have to patch it more...

at first you have to remove the css from the original table row:



.my-grouping-grid .x-grid3-row{
.x-grid3-row { border:0px none;}
and then apply it again to the td in the row like this:


.my-grouping-grid .x-grid3-row td.x-grid3-cell,
.my-grouping-grid .x-grid3-summary-row td.x-grid3-cell {
border-top:1px solid green;
border-right:1px solid green;
}
and with this you can exclude some cells:


.my-grouping-grid .x-grid3-grouping-cell {
border-top-style:none;
}the only thing you have to do to add in your GridCellRenderer this line if it is the a second line of a group:


config.css = "x-grid3-grouping-cell"and dont forget to give your grid this style: my-grouping-grid


PS: i dont tested it - i just set the css with firebug in firefox like this:
17291