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}"> ',  

  
  
            '&nbsp;{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，如需转载请自行联系原作者