带有复选框列的 Ext JS 网格面板

Question

我的页面中有一个网格，上面设置了 CheckboxModel。它显示名称和复选框，但我不知道如何将商店中的布尔列绑定到选择模型中的列。我找到了使用 CheckColumn 的示例，但这会引发一个错误，表明它没有构造函数。应该是v4的改动。非常感谢您对此提供一些帮助。

Ext.define('Roles', {
    extend: 'Ext.data.Model',
    fields: ['Id', 'Name', 'Selected'],
    proxy: {
        type: 'ajax',
        url: '/tpn/Types/AjaxList',
        reader: {
            type: 'json',
            root: 'rows',
            totalProperty: 'total',
            successProperty: 'success'
        },
        listeners: {
            exception: function (proxy, type, action, options, response, arg) {
                Ext.MessageBox.alert('Error', Ext.decode(type.responseText).error);
            }
        }

    }
});

var roleStore = Ext.create('Ext.data.Store', {
    model: 'Roles'
});

var sm = Ext.create('Ext.selection.CheckboxModel');

var grid = Ext.create('Ext.grid.Panel', {
    store: roleStore,
    selModel: sm,
    columns: [{
        header: 'Name',
        dataIndex: 'Name',
        flex: 1
    }],
    renderTo: 'RoleGrid',
    autoHeight: false,
    height: 200,
    frame: false
});

Answer 1

您可以在网格的 afterrender 事件（或绑定存储的 load 事件）上放置一个侦听器，以遍历存储以获取布尔检查值并调用 < strong>GridPanel.selectRecords() 方法来选择 UI 中的所有这些记录。这将检查他们的复选框。