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

}

效果图如下: