Javascript 如何使用Ext.ListView组件创建单个复选框列表？

我正在尝试使用ListView组件创建一个复选框列表。下面是我的代码

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

  var genres = new Ext.data.SimpleStore({
   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>

如您所见，我的ListView中有复选框，设置为SingleSelect模式。问题是在singleSelect中，复选框不保持状态。基本上，我点击了复选框，但它没有选中。但是，当我尝试用单选按钮替换复选框时，单选按钮会在单击时填充。请有人指出我做错了什么，或者我如何才能达到预期的效果

---

谢谢

我认为您可能希望将Ext.grid.GridPanel与Ext.grid.CheckboxSelectionModel一起使用，而不是将Ext.list.ListView放在Ext.Panel中并使用模板制作复选框

下面是一个例子：

您还可以使用singleSelect:true配置Ext.grid.CheckboxSelectionModel以获得所需的效果