Put Standard HTML controls inside ExtJs Grid Panel

Hello,

Since last three months I am working with ExtJs. I have some wonderful experience with ExtJs during this time. ExtJs is really a powerful JavaScript framework for rich user interface development. This is my first blog on ExtJs. I am going to publish more blogs on my experience with ExtJs.

Ok let's come to the point now. I was having requirement to put standard html controls like select box and check box inside ExtJs grid panel. Although ExtJs provides various controls like checkbox and combo box. But requirement was to use standard HTML controls.

ExtJs has another powerful control called editor grid panel. Here you can specify editor for each column like textbox and combo box etc. When user double clicks on row it goes to edit mode and all the editors are visible in respective columns.

But my requirement was to display controls without using editor grid panel. When user views the grid all the controls should be displayed to user. So how to achieve this?

ExtJs grid column defines a function called "renderer". It takes two arguments value and cell object. Value is the value of cell that is assigned by dataIndex property and cell object defines various property of cell. In this function you can write your code to generate the standard HTML controls. For example.

columns : [{

header: 'columnheader',

width: 25,

dataIndex : 'valueofcell',

renderer: function(value, cell)

{

return '<input type="checkbox" name="mycheckbox" />';

}

}]

This will add standard HTML check box to ExtJs grid panel. This is how you can add any other HTML controls inside the ExtJs grid panel columns.