views:

187

answers:

0

Hi all, 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.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>

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