GRIDPANEL WITH NUMBERED HEADER COLUMNS

[Narat]

Hi, all!

Please help!

Using ExtJS 4.1.
I have a grid with grouped header columns.
Is it possible to create a gridpanel with numbered header columns? Under numbering I mean sequence "1, 2, 3, ...". I tried, with such result:

header.jpg

Please, answer, how to get following:
header_correct.jpg

I could not manage to set the height of last header row. It is the problem for me.
Waiting for any help.

Best regards.

[Narat]

I suppose that it could be solved applying CSS.
Now I applied following:


.x-column-header-inner .x-column-header-text {
white-space: normal!important;
}

.x-column-header-inner {
white-space: normal!important;
line-height: normal;
padding-top: 3px !important;
padding-bottom: 3px !important;
text-align: center;
/*
top: 20%;
*/
}

.x-grid3-hd-inner { white-space: normal; }

But have no idea, how to find the right answer.

I tried to iterate columns and change the height of columns in numbered row and that of parent row, but with no acceptable result.

Any suggestion?

[A.Orehov]

Hi,

But I tried to use the first grid row for the same purpose and lock it...

Nobody could help me too...

[A.Orehov]

After some work, can suggest one of variants for this issue.

The idea is in adding to header columns with dataIndex property two additional DIVs in "render" event of these header columns, while dynamically generating hierarchically organized header columns list:

<div class="q-ex-class"><div class="q-in-class">' + c.colNum.toString() + '</div></div>'

.......

cls: 'dop_',               
colNum: colNum++,
dataIndex: rec.get('dataIndex'),
level: rec.get('level'),
text: rec.get('text'),

listeners: {
            render: function(c) {
                c.getEl().createChild( '<div class="q-ex-class"><div class="q-in-class">' + c.colNum.toString() + '</div></div>');
},

.......

CSS is like that:

.q-ex-class {
    position: relative; 
}

.q-in-class {
    color: maroon; 
    font-weight: 700;
    font-size: 9px;
    text-align: center;
    border-top: 1px solid #C5C5C5;
    height: 13px; 
    position: absolute; 
    bottom: 0px;
    width: 100%;
}

Additionally, header colums with dataIndex property were accompanied with CSS:

.dop_ {
    margin-bottom: 13px!important; /*  must be equal to 'q-in-class'' height */
    height: auto!important;    
}

That's all, but in some cases, and I could not understand, why, this technic is not working properly -
remains the question with correct height of some header columns within header container.
May be, masters will correct me. I hope!

Regards.

[A.Orehov]

I found, that my following CSS, applied to header columns are to blame:

.x-column-header-inner .x-column-header-text {
    white-space: normal!important;
}

.x-column-header-inner {
    line-height: normal;
    padding-top: 3px !important;
    padding-bottom: 3px !important;
}

But with numbering header columns is all OK.

The above shown CSS I need to wrap text in header columns only, and they aren't working properly in some rare cases.