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('',
            '',
            ' ',
            ' {message}

', '', '

');  

 

    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();  

 

} 

效果图如下: