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}" οnclick="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();

}

效果图如下