Showing single textfield into multiple columns within extjs grid.

In normal html table it is possible to show a single textfield(or any html component) within multiple columns by using the colspan attribute. With Extjs one way to achieve similar thing is by setting the grid row body. i.e. you can specify the html textfield component within grid row body.

If you don't want to show any column specific data for that particular row then you need to write column renderers and within it you need to return empty value.

e.g: renderer : function(value, p, record, rowIndex) {

    if(rowIndex == 1){ //or custom condition as (record.data.docIndex == 1)

         return '';

    }

}

If you are using an editor grid panel then you need to disable editing row. For this listen beforegridedit event on grid and within it disable the editing of the row in which your textfield is shown.

Below example shows how to achieve this.

Sample example screenshot :