ExtJS 中获取多选行的行信息

以checkbox的形式选择多行，然后点击按钮显示选择行的信息：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>无标题文档</title>
    <link href="ext-3.4.0/resources/css/ext-all.css" rel="stylesheet" />

    <script type="text/javascript" src="ext-3.4.0/adapter/ext/ext-base.js"></script>

    <script type="text/javascript" src="ext-3.4.0/ext-all.js"></script>

    <script type="text/javascript" src="CheckColumn.js"></script>

    <script type="text/javascript">
        Ext.onReady(function() {
            function formatDate(value) {
                return value ? value.dateFormat('M d, Y') : '';
            }

            // var fm = Ext.form;

            // the column model has information about grid columns
            // dataIndex maps the column to the specific data field in
            // the data store (created below)
            var sm = new Ext.grid.CheckboxSelectionModel();
            var cm = new Ext.grid.ColumnModel([
    new Ext.grid.RowNumberer(),
    sm,
    {
        header: "编号",
        dataIndex: "id",
        editor: {
            xtype: 'textfield',
            allowBlank: false
        }
    }, {
        header: "性别",
        dataIndex: "sex",
        renderer: changeSex,
        editor:
        {
            xtype: 'textfield'
        }
    }, {
        header: "名称",
        dataIndex: "name",
        editor: {
            xtype: 'textfield',
            allowBlank: false
        }
    }, {
        header: "描述",
        dataIndex: "descn",
        width: 140,
        editor: {
            xtype: 'textfield',
            allowBlank: false
        }
    },
    {
        //这里是替代方法，感觉应该有封装好的，但是没有找到。这里用的是actioncolumn组件将icon路径设对就可以显示出来
        menuDisabled: true,
        sortable: false,
        xtype: 'actioncolumn',
        header: 'save',
        width: 50,
        items: [{
            icon: 'ext-3.4.0/resources/images/access/tree/drop-yes.gif',  // Use a URL in the icon config
            tooltip: 'save',
            handler: function(grid, rowIndex, colIndex) {
                var rec = store.getAt(rowIndex);
                Ext.MessageBox.alert('save', 'save successfuly!');
            }
}]
        },
    {
        menuDisabled: true,
        sortable: false,
        xtype: 'actioncolumn',
        header: 'delete',
        width: 50,
        items: [{
            icon: 'ext-3.4.0/resources/images/access/tree/drop-no.gif',  // Use a URL in the icon config
            tooltip: 'delete',
            handler: function() {
                Ext.MessageBox.confirm('delete', 'confirm delete?');
            }
}]
        }


        ]);
            cm.defaultSortable = true;
            function changeSex(value) {
                if (value == 'male') {
                    return "<span style='color:red;font-weight:bold;'>男</span>";
                } else {
                    return "<span style='color:green;font-weight:bold;'>女</span>";
                }
            }


            //JsonData
            var jsondata = {
                'coders': [
        { 'id': '1', 'sex': 'male', 'name': 'McLaughlin', 'descn': 'brett@newInstance.com' },
        { 'id': '2', 'sex': 'male', 'name': 'Hunter', 'descn': 'jason@servlets.com' },
        { 'id': '3', 'sex': 'female', 'name': 'Harold', 'descn': 'elharo@macfaq.com' },
        { 'id': '4', 'sex': 'female', 'name': 'Harolds', 'descn': 'elhaross@macfaq.com' },
        { 'id': '5', 'sex': 'male', 'name': 'Karolds', 'descn': 'lhaross@macfaq.com' },
        { 'id': '6', 'sex': 'female', 'name': 'Yarolds', 'descn': 'elaross@macfaq.com' },
        { 'id': '7', 'sex': 'male', 'name': 'Jarolds', 'descn': 'elharss@macfaq.com' },
        { 'id': '8', 'sex': 'male', 'name': 'Larolds', 'descn': 'elhass@macfaq.com' },
        { 'id': '9', 'sex': 'female', 'name': 'Haroldws', 'descn': 'elhaross@macfaq.com' },
        { 'id': '10', 'sex': 'male', 'name': 'WHarolds', 'descn': 'elhaross@macfaq.com' }
    ],
                'musicians': [
        { 'id': '1', 'name': 'Clapton', 'descn': 'guitar' },
        { 'id': '2', 'name': 'Rachmaninoff', 'descn': 'piano' }
    ]
            };

            // ArrayReader
            var store = new Ext.data.Store({
                proxy: new Ext.data.MemoryProxy(jsondata),
                reader: new Ext.data.JsonReader({ root: 'coders' }, [
        { name: 'id' },
        { name: 'sex' },
        { name: 'name' },
        { name: 'descn' }
    ])

            });
            store.load();
            var tbar = [
                    new Ext.Toolbar.TextItem('Tools bar:'),
                { xtype: "tbfill" }, {
                    pressed: true,
                    text: "Refresh",
                    handler: function() {
                        Ext.Msg.alert("Refresh", "Refresh!")
                    }
                }, {
                    xtype: "tbfill"
                }, {
                    pressed: true,
                    text: "Selection",
                    handler: selectionclick
                }, {
                    xtype: "tbseparator"
                }, {

                    pressed: true,
                    text: "Add",
                    handler: function() { Ext.Msg.alert("Add", "add infro!") }
                }, {
                    xtype: "tbseparator"
                }, {
                    pressed: true,
                    text: "save",
                    handler: function() {
                        Ext.Msg.alert("Save", "save infro successed!!!")
                    }
                }, {
                    xtype: "tbseparator"
                }
                 ];

            // create the editor grid
            var grid = new Ext.grid.EditorGridPanel({
                draggable: true,
                store: store,
                cm: cm,
                sm: sm,
                renderTo: 'editor-grid',
                width: 630,
                height: 330,
                tools: [{ id: "save" }, {
                    id: "help",
                    handler: function() { Ext.Msg.alert("Help", "Need help!") }
                }, {
                    id: "close",
                    handler: function() { grid.hide(); }
}],
                    tbar: tbar,
                    bbar: [
                    //new Ext.Toolbar.TextItem("haha:"),
                {xtype: "tbfill" }, {
                    text: " Reset this grid"
                }
             ],
                    collapsible: true,
                    multiSelect: true,
                    title: 'Edit Plants',
                    frame: true,
                    clicksToEdit: 2,
                    trackMouseOver: true,
                    //viewConfig: {
                    stripeRows: true,
                    enableTextSelection: true
                    // }

                });

                grid.addListener('cellclick', cellclick);
                function cellclick(grid, rowIndex, columnIndex, e) {
                    var record = grid.getStore().getAt(rowIndex);
                    var fieldName = grid.getColumnModel().getDataIndex(columnIndex);
                    var data = record.get(fieldName);
                    Ext.MessageBox.alert('show', '当前选中的数据是' + data);
                }
                function selectionclick() {
                    var arr = grid.getSelectionModel().getSelections();
                    for (var i = 0; i < arr.length; i++) {

                        Ext.Msg.alert("title", arr[i].get("sex"));
                        return;
                    }
                }

            });
    </script>

</head>
<body>
    <div id="hello">
        <div id="editor-grid">
        </div>
    </div>
</body>
</html>