[2.0??][CLOSED] Dropdown list in Page Grid

[nvr4getu]

I'm having problems with the dropdown list in the page grid. I could not select the dropdown list but i could render it into the column. Do your have any idea what is it about or how could i go around maybe but change it into Ext's Combobox.

function loadCaseTable()
{
	//var table = document.getElementById("caseTable");
	
	var store = new Ext.data.Store({
		// load using script tags for cross domain, if the data in on the same domain as
		// this page, an HttpProxy would be better
		url : "process?op=retrieveAllCase",
			
		// create reader that reads the Topic records
		reader: new Ext.data.JsonReader({
		root: 'results',
		totalProperty: 'totalCount',
		id: 'caseId',
		fields: [
			    'caseId', 'title', 'description', 'status',
			    'createdBy','createdDate','modifiedBy', 'modifiedDate',
			    'diseaseName','diseaseSubType','cl'
		]
		}),
		
		// turn on remote sorting
		//remoteSort: true
	});
		    
	var cm = new Ext.grid.ColumnModel([{
	    header: "Title",
	    dataIndex: 'title',
	    width: 200
	},{
	    header: "Description",
	    dataIndex: 'description',
	    width: 300,
	},{
	    header: "Status",
	    dataIndex: 'status',
	    width: 100
	},{
	    header: "Incident Date",
	    dataIndex: 'createdDate',
	    width: 100
	},{
	    header: "Map",
	    width: 100,
	    renderer:function(value, p, record){
	    	var ddl = "<select id='"+record.data.cl[1][0]+"' style='width:100px;'>";
	    	for(var i = 0; i < record.data.cl.length; i++)
	    	{
	    		ddl += "<option value='"+record.data.cl[i][0]+"'>"+record.data.cl[i][1]+"</option>";
	    	}
	    	ddl += "</select>";
	    	return ddl;
	    	/*
	    	Ext.namespace('Ext.inputdata');
	    	
	    	Ext.inputdata.locations = record.data.cl
						
			var combos = {
			    init : function(){
			        
			
				   // simple array store
				var store = new Ext.data.SimpleStore({
				    fields: ['cl_id', 'address'],
				    data : Ext.inputdata.locations
				});
				var cbsite = new Ext.form.ComboBox({
				    store: store,
				    displayField:'address',
				    typeAhead: true,
				    mode: 'local',
				    triggerAction: 'all',
				    emptyText:'View Location',
				    selectOnFocus:true
				});
			
			  	cbsite.applyTo('local-states');   
			   
			}};
			*/
	    }
	}]);
			
			
	cm.defaultSortable = true;
	var grid = new Ext.grid.GridPanel({
		el:'case-grid',
		width:'100%',
		height:350,
		title:'Case',
		store: store,
		cm: cm,
		trackMouseOver:false,
		sm: new Ext.grid.RowSelectionModel({selectRow:Ext.emptyFn}),
		loadMask: true,
		viewConfig: {
			forceFit:true,
		    enableRowBody:true,
		},
		bbar: new Ext.PagingToolbar({
		   	pageSize: 25,
		    store: store,
	        displayInfo: true,
	        displayMsg: 'Displaying cases {0} - {1} of {2}',
	        emptyMsg: "No case to display"
	    })
	});
			
	// render it
    grid.render();
			
    // trigger the data store load
    store.load({params:{start:0, limit:25}});
}

[nvr4getu]

I've solve the problem which is not really a problem actually. Just that the RowSelectionModel cannot be set as {selectRow:Ext.emptyFn}. Now the dropdown list is selectable. However, I would like to change to ComboBox for ext. Anybody got any idea how to set ComboBox in the renderer function as it require a div if i'm not wrong?