CODEWITHSUNDEEP
javascriptextjsextjs6
David
David

Reputation: 4281

How to divide grid column into different rows

I am working on a extJS grid and which has single row value. When i see the single row value i thought to devide the grid column into two part. Example this image, but I am not sure how to divide the grid column into two part. Can anybody help me into that.

Sample code : 

columns: [
        { text: 'Col1', dataIndex: 'Val1'},
        { text: 'Col2', dataIndex: 'Val2'},
        { text: 'Col3', dataIndex: 'Val3'},
        { text: 'Col4', dataIndex: 'Val4'},
        { text: 'Col5', dataIndex: 'Val5'},
        { text: 'Col6', dataIndex: 'Val6'}
    ],

enter image description here

Upvotes: 0

Views: 710

Answers (1)

Jaydeep
Jaydeep

Reputation: 1716

To achieve the colspan in Ext JS grid, you have to create a columns array inside the columns array, below is the snippet you can use.

 columns: [
    { 
        text: 'Col1',
        columns: [{
              text: "Value 1",
              columnName: "Column 2",
              dataIndex: 'Val1',

          }, {
              text: "Value 2",
              columnName: "Column 2",
              dataIndex: 'Val2',

        }]
    },
    { text: 'Col2', dataIndex: 'Val2'},
    { text: 'Col3', dataIndex: 'Val3'},
    { text: 'Col4', dataIndex: 'Val4'}
 ]

You can find the working fiddle here

Upvotes: 1

Related Questions