Layout of the child table in grid grouping extjs4

Question

I have implemented grid grouping in Extjs4. So, I have customized the code such that if a group does not have items, it should not have expand-collapse sign and if we click on the header, it should not do anything. As in, it should not expand. But, because of the following css class, there is border, white in color created of 1 px.

.x-grid-with-row-lines .x-grid-table {
    border-top: 1px solid white;
}

In my css file, I am trying to override it using the following,

.x-grid-with-row-lines .x-grid-table {
        border-top: none;
    }

But, for some reason its not overriding the existing class. I have attached the image with the border visible in black color.

Can someone suggest how can I make that border disappear whenever I click on an empty group header. Thanks for all the help.

Answer 1

try doLayout() on your grid within the collaps event handling