extjs grid 中 如何根据数据动态给checkbox赋值

直接给代码吧<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=gbk">
    <title>03.grid</title>
    <link rel="stylesheet" type="text/css" href="../../resources/css/ext-all.css" />    <script type="text/javascript" src="../../adapter/ext/ext-base.js"></script>    <script type="text/javascript" src="../../ext-all.js"></script>
    
    <script type="text/javascript" src="../../vswd-ext_2.2.js"></script>    <script type="text/javascript">
        Ext.onReady(function(){            var sm = new Ext.grid.CheckboxSelectionModel();            var cm = new Ext.grid.ColumnModel([
                new Ext.grid.RowNumberer(),
                sm,
                {header:'编号',dataIndex:'id'},
                {header:'性别',dataIndex:'sex'},
                {header:'名称',dataIndex:'name'},
                {header:'描述',dataIndex:'descn'}
            ]);            var data = [
                ['1','male','name1','descn1'],
                ['2','female','name2','descn2'],
                ['3','male','name3','descn3'],
                ['4','female','name4','descn4'],
                ['5','male','name5','descn5']
            ];            var store = new Ext.data.Store({
                proxy: new Ext.data.MemoryProxy(data),
                reader: new Ext.data.ArrayReader({}, [
                    {name: 'id'},
                    {name: 'sex'},
                    {name: 'name'},
                    {name: 'descn'}
                ])            });
            store.load();            var grid = new Ext.grid.GridPanel({
                autoHeight: true,
                renderTo: 'grid',
                store: store,
                cm: cm,
                sm: sm
            });        });
    </script></head>
<body>    <script type="text/javascript" src="../examples.js"></script>    <div id="grid">
    </div>
</body>
</html>
以上显示效果 性别那列是文本 直接显示 "male" "female" 。
如何把这列变成checkbox， "male" 默认选中  "female"默认不选中。

解决方案 »

  1.   

    用EditGridPanel，或者直接在这一列使用一个渲染函数
    renderer:function(v){
       return '<input type="radio" checked="'+((v=='male')?true:false)+'">";
    }
      

  2.   

    EditGridPanel 是可编辑Grid 只有双击之后这个列才会变成checkBox我的客户要求 Grid 只是显示 不能编辑 bool值用checkBox表示
      

  3.   

    在你们数据后面加个checked:true
      

  4.   

    那就用渲染函数实现吧，你需要动态赋值，目前这个方法最容易了，把上面我写的radio改成checkbox就行了
      

  5.   


    <link rel="stylesheet" type="text/css" href="extjs/resources/css/ext-all.css" />
    <script type="text/javascript" src="extjs/adapter/ext/ext-base.js"></script>
    <script type="text/javascript" src="extjs/ext-all.js"></script>
    <style>
    .br{clear:both;display:block;}
    </style>
    <script>
     Ext.onReady(function() {
    var sm = new Ext.grid.CheckboxSelectionModel();             var cm = new Ext.grid.ColumnModel([ 
                    new Ext.grid.RowNumberer(), 
                    sm, 
                    {header:'编号',dataIndex:'id'}, 
                    {header:'性别',dataIndex:'sex',
                     renderer:function(v){
                     if(v=="male") return "<div class='x-form-check' style='background-position:0 -13px;'>&nbsp;</div>";
                     else  return "<div class='x-form-check'>&nbsp;</div>"
                     }}, 
                    {header:'名称',dataIndex:'name'}, 
                    {header:'描述',dataIndex:'descn'} 
                ]);             var data = [ 
                    ['1','male','name1','descn1'], 
                    ['2','female','name2','descn2'], 
                    ['3','male','name3','descn3'], 
                    ['4','female','name4','descn4'], 
                    ['5','male','name5','descn5'] 
                ];             var store = new Ext.data.Store({ 
                    proxy: new Ext.data.MemoryProxy(data), 
                    reader: new Ext.data.ArrayReader({}, [ 
                        {name: 'id'}, 
                        {name: 'sex'}, 
                        {name: 'name'}, 
                        {name: 'descn'} 
                    ])             }); 
                store.load();             var grid = new Ext.grid.GridPanel({ 
                    autoHeight: true, 
                    renderTo: 'grid', 
                    store: store, 
                    cm: cm, 
                    sm: sm 
                }); 
    });
           </script>
    <div id="grid"></div>
      

  6.   

    OK thx 搞定 其实我后来自己想明白了……开始时候大量时间在想通过 Ext.grid.CheckboxSelectionModel 来实现。
      

  7.   

    hookee 同学 你发帖的时候我刚好结贴……抱歉不能给你分数- -我知道你的方法是对的……