extjs 之 list checkbox

本例完成在一个listview中放入checkbox列表，设计知识：Ext.XTemplate和Ext.DataView

源码如下

function casereport_init() {function oncheck(str) {if (Ext.fly('box' + str).hasClass('checked')) {Ext.fly('box' + str).removeClass('checked');document.getElementById('check' + str).checked = false;} else {Ext.fly('box' + str).addClass('checked');document.getElementById('check' + str).checked = true;}}var proxyData = new Ext.data.HttpProxy({url : 'GetCaseReportType'});var strData = new Ext.data.JsonStore({proxy : proxyData,root : 'data',fields : [ 'id', 'message' ]});var tplData = new Ext.XTemplate('<tpl for=".">','<div class="databox" id="box{id}" onclick="oncheck({id})">','<input type="checkbox" id="check{id}" value="c{id}"> ',' {message}</div>', '</tpl>', '<div class="x-clear"></div>');var dataV = new Ext.DataView({autoScroll : true,store : strData,tpl : tplData,autoHeight : true,height : 265,multiSelect : true,itemSelector : 'div.thumb-wrap',emptyText : 'No data to display',loadingText : 'Please Wait...'//,//style : 'border:1px solid #99BBE8;background:#fff;'});function checkvalue() {var obj = Ext.select('input[type=checkbox]').elements;var i = 0;var cb = '';var total = 0;for (i = 0; i < obj.length; i++) {if (obj[i].checked) {cb = cb + ' ' + obj[i].value;total++;}}Ext.MessageBox.alert('Checked', 'You clicked ' + total+ ' checkbox, they value are ' + cb);}    var gen_button = new Ext.Toolbar.Button({        xtype:'button',        text:'生成报表',        handler: function(){        checkvalue();        }    });    var outer_center_west = new Ext.Panel({region : 'west',width : Glb.outer_center.getWidth() * 0.25,height : Glb.outer_center.getHeight(),border : true,split : true,tbar:[gen_button],bodyStyle : 'padding:5px;',autoScroll : true,collapsible : true});outer_center_west.show();var outer_center_center = new Ext.Panel({region : 'center',width : Glb.outer_center.getWidth() * 0.7,height : Glb.outer_center.getHeight(),border : true,autoScroll : true,bodyStyle : 'padding:5px;',split : true});outer_center_center.show();outer_center_west.add(dataV);var caseReportPanel = new Ext.Panel({id : 'border-panel',layout : 'border',width : Glb.outer_center.getWidth(),height : Glb.outer_center.getHeight(),border : true,items : [ outer_center_west, outer_center_center ]});strData.load();Glb.outer_center.add(caseReportPanel);Glb.outer_center.show();Glb.outer_center.doLayout();}

效果图如下