extjs 之 list checkbox

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

1. function casereport_init() {  
2.     function oncheck(str) {  
3.         if (Ext.fly('box' + str).hasClass('checked')) {  
4.             Ext.fly('box' + str).removeClass('checked');  
5.             document.getElementById('check' + str).checked = false;  
6.         } else {  
7.             Ext.fly('box' + str).addClass('checked');  
8.             document.getElementById('check' + str).checked = true;  
9.         }  
10.     }  
11.  
12.     var proxyData = new Ext.data.HttpProxy({  
13.         url : 'GetCaseReportType' 
14.     });  
15.     var strData = new Ext.data.JsonStore({  
16.         proxy : proxyData,  
17.         root : 'data',  
18.         fields : [ 'id', 'message' ]  
19.     });  
20.  
21.     var tplData = new Ext.XTemplate('<tpl for=".">',  
22.             '<div class="databox" id="box{id}" onclick="oncheck({id})">',  
23.             '<input type="checkbox" id="check{id}" value="c{id}"> ',  
24.             '&nbsp;{message}</div>', '</tpl>', '<div class="x-clear"></div>');  
25.  
26.     var dataV = new Ext.DataView({  
27.         autoScroll : true,  
28.         store : strData,  
29.         tpl : tplData,  
30.         autoHeight : true,  
31.         height : 265,  
32.         multiSelect : true,  
33.         itemSelector : 'div.thumb-wrap',  
34.         emptyText : 'No data to display',  
35.         loadingText : 'Please Wait...'//,  
36.         //style : 'border:1px solid #99BBE8;background:#fff;'  
37.     });  
38.  
39.     function checkvalue() {  
40.         var obj = Ext.select('input[type=checkbox]').elements;  
41.         var i = 0;  
42.         var cb = '';  
43.         var total = 0;  
44.         for (i = 0; i < obj.length; i++) {  
45.             if (obj[i].checked) {  
46.                 cb = cb + ' ' + obj[i].value;  
47.                 total++;  
48.             }  
49.         }  
50.         Ext.MessageBox.alert('Checked', 'You clicked ' + total  
51.                 + ' checkbox, they value are ' + cb);  
52.     }  
53.     var gen_button = new Ext.Toolbar.Button({  
54.         xtype:'button',  
55.         text:'生成报表',      
56.         handler: function(){  
57.             checkvalue();  
58.         }  
59.     });  
60.       
61.  
62.     var outer_center_west = new Ext.Panel({  
63.         region : 'west',  
64.         width : Glb.outer_center.getWidth() * 0.25,  
65.         height : Glb.outer_center.getHeight(),  
66.         border : true,  
67.         split : true,  
68.         tbar:[gen_button],  
69.         bodyStyle : 'padding:5px;',  
70.         autoScroll : true,  
71.         collapsible : true 
72.     });  
73.     outer_center_west.show();  
74.  
75.     var outer_center_center = new Ext.Panel({  
76.         region : 'center',  
77.         width : Glb.outer_center.getWidth() * 0.7,  
78.         height : Glb.outer_center.getHeight(),  
79.         border : true,  
80.         autoScroll : true,  
81.         bodyStyle : 'padding:5px;',  
82.         split : true 
83.     });  
84.     outer_center_center.show();  
85.  
86.     outer_center_west.add(dataV);  
87.  
88.     var caseReportPanel = new Ext.Panel({  
89.         id : 'border-panel',  
90.         layout : 'border',  
91.         width : Glb.outer_center.getWidth(),  
92.         height : Glb.outer_center.getHeight(),  
93.         border : true,  
94.         items : [ outer_center_west, outer_center_center ]  
95.     });  
96.     strData.load();  
97.     Glb.outer_center.add(caseReportPanel);  
98.     Glb.outer_center.show();  
99.     Glb.outer_center.doLayout();  
100.  
101. } 

效果图如下:

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