ext grid 加入checkbox列

grid每列前面加checkbox:
    一般的grid使用一个Ext.grid.ColumnModel就可以了,要加入一个多选的列, 一种方法是加入一个多选列模板Ext.grid.CheckboxSelectionModel:
    var sm = new Ext.grid.CheckboxSelectionModel();
    var cm = new Ext.grid.ColumnModel(
        [
            sm,
            {id:'company',header: "Company", width: 60, sortable: true, dataIndex: 'company'},
        ]
    );
    另外,实例化EditorGridPanel时还必须指定这个sm为selModel.
    如果不指定EditorGridPanel的selModel,将无法勾选checkbox。
    grid = new Ext.grid.EditorGridPanel(
        {
            id:'editGridTestAjax',
            width:700,
            height:500,
            el:'topic-grid',
            store:ds,
            cm:cm,
            clickToEdit:2,//双击后进入编辑状态
            selModel:sm  //这个 selModel 可简写为sm
        }
    );

    //处理checkbox的勾选事件
    grid.getSelectionModel().on('rowselect', function(sm, rowIdx, r){
alert('勾选了checkbox后,获得选中行的name:'+grid.store.getAt(rowIdx).get('name'));
});
    //处理checkbox的取消勾选事件
    grid.getSelectionModel().on('rowdeselect', function(sm, rowIdx, r){
alert('取消勾选checkbox后,获得的record 中的name:'+grid.store.getAt(rowIdx).get('name'));
});

    另一种方法是在ColumnModel中自己写一个checkbox列
    function changeCheck(value,cellmeta,record,rowIndex,columnIndex,store){
        return "<input type='checkbox' name='adds_checkbox' onclick=oneclick(this) id='adds_checkbox_'"+value+"></input>";
    }
    //上面的oneclick方法定义在Ext.onReady()外面
    var cm = new Ext.grid.ColumnModel( 
        [   
           
            {//自定义的多选列
                header:"<input id='allcheckbox' type='checkbox' onclick=checkall(this)></input>",
                dataIndex:'addsid',
                renderer:changeCheck,
                width:20,
                sortable:false
            },
                    ...
                 ]
                );

你可能感兴趣的:(ext)