extjs 之 list checkbox-CSDN博客

本例完成在一个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();
}

效果图如下:

本文转自elbertchen 51CTO博客，原文链接：http://blog.51cto.com/linkyou/751961，如需转载请自行联系原作者