How do I create a Single Select checkbox list using Ext.ListView component?

I'm trying to create a checkbox list using ListView component. Below is my code.

<script type="text/javascript">
 Ext.onReady(function(){
  Ext.BLANK_IMAGE_URL = 'blank.gif';

  var genres = new Ext.data.Simpl开发者_如何学运维eStore({
   fields: ['id','genre'],
   data: [['1','Comedy'],['4','Drama'],['3','Action']]
  });
  var list1 = new Ext.list.ListView({
   store: genres,
   width: 120,
   hideHeaders: true,
   selectedClass: 'x-list-selected',
   multiSelect: false,
   singleSelect: true,
   columns: [{dataIndex:'id',tpl:'<input type="checkbox" id="{id}"></input>',width:.2},{dataIndex:'genre',tpl:'{genre}',width:.5}]
  });
  var myPanel = new Ext.Panel({
   renderTo: Ext.get('div_formPanel'),
   layout: 'hbox',
   autoWidth: true,
   autoHeight: true,
   id: 'myP',
   autoScroll: true,
   items:[list1]
  });
 });
 </script>

As you can see I have checkboxes in my ListView, which is set to SingleSelect mode. The problem is when in singleSelect, the checkbox does not maintain state. Basically I'm clicking the checkbox but it does not check. However when I tried swapping the checkbox with radio buttons, the radio buttons do fill in upon clicking. Can someone please point out what I'm doing wrong or how can I achieve the desired effect.

Thank you

I think you may want to use an Ext.grid.GridPanel with Ext.grid.CheckboxSelectionModel, instead of putting your Ext.list.ListView inside of an Ext.Panel and making checkboxes with a template.

Here's an example: Sencha Grid Plugins Examples

You can also configure your Ext.grid.CheckboxSelectionModel with singleSelect:true to get your desired effect.