ExtJS4 GridView panel : Adding a subheader row

[kalpesh_shirodker]

Hello

We have a requirement where we need to add a row between the Grid Header row and Grid Data rows. The sub header row will contain some additional information pertaining to the column. The information may or may not be static. What is best way to insert the row in the grid?

Any help would be highly appreaciated. Thanks in advance.

Regards
Kalpesh

[mitchellsimoens]

You can render anything to the grid or you can insert a record into the grid at index zero. I would render my own component or just element personally.

[kalpesh_shirodker]

@mitchellsimoens

Thanks for the reply. I need the functionality/behaviour across all the pages in my application, hence extending the grid component may be the solution which i need to pursue. Since i am new to ExtJS developement i am not sure how to accomplish this. I have read some articles on how to inherit components, but i am not able to find which property/method needs to be called inorder to insert the new row. Any suggestions would be highly appreciated.

By the way, since this row is not part of the actual records, i am not sure whether adding to index 0 will be ideal.

Regards
Kalpesh

[PKTRaul]

A subheader can be achieved by adding a second columns:[] configuration under each item in your columns structure. I use this for just one header in my grid (which has three subheaders) but I am sure it is applicable to each column:

Example being:

   columns: {
        items:[{
            header: 'First',
            sortable: false,
            dataIndex: 'fname'
        },{
            header: '# of Pets',
            id: 'numPets',
            columns:[ 
            {
                text: 'Cats',
                id: 'cats',
                menuDisabled: true,
                dataIndex: 'catsnum'
                width: 60
            },{
                header: 'Dogs',
                id: 'dogs',
                menuDisabled: true,
                dataIndex: 'dogsnum',
                width: 50
            },{
                header: 'Fish',
                id: 'fish',
                menuDisabled: true,
                dataIndex: 'fishnum',
                width: 75
            }]
        },{
            header: 'Address',
            sortable: true,
            dataIndex: 'address',
            width: 30
        }]
    }

[kalpesh_shirodker]

Hello PKTRaul

I shall check it out. Can you possibly provide a screenshot of how it would look?

Regards