Question

我有一个有一列复选框的网格。我使用了xtype checkcolumn

为此。请点击此处：https://fiddle.sencha.com/#view/editor&fiddle/2ano

现在我想在点击给定按钮时取消选中特定（在这种情况下为第二行）行的复选框。我尝试使用xtypes但没有运气。

最后我找到了解决方法。

store.getAt(1).data.active = false;
grid.getView().refresh();

它有效，但不确定它是否是正确的方法。我会很高兴有任何建议。谢谢。

Answer 1

根据您的代码的一种方式。

您可以使用此网格存储 store.each() ， store.clearFilter() 和 store.filter('active',true) 的方法。

在此 FIDDLE 中，您可以使用uncheck在此处查看record.set('active',false)个已选中的列。

var store = Ext.create('Ext.data.Store', {
    fields: ['name', 'email', 'phone', 'active'],
    data: [{
        name: 'Lisa',
        email: 'lisa@simpsons.com',
        phone: '555-111-1224',
        active: false
    }, {
        name: 'Bart',
        email: 'bart@simpsons.com',
        phone: '555-222-1234',
        active: true
    }, {
        name: 'Homer',
        email: 'homer@simpsons.com',
        phone: '555-222-1244',
        active: false
    }, {
        name: 'Marge',
        email: 'marge@simpsons.com',
        phone: '555-222-1254',
        active: false
    }]
});

Ext.create('Ext.grid.Panel', {
    title: 'Simpsons',
    itemId: 'test',
    renderTo: Ext.getBody(),
    store: store,
    buttons: [{
        text: 'Un check',
        handler: function () {
            var store = this.up('grid').getStore();
            store.clearFilter();
            store.filter('active', true);
            store.each(function (rec) {
                rec.set('active', false);
            });
            store.clearFilter();
        }
    }],
    columns: [{
        text: 'Name',
        dataIndex: 'name'
    }, {
        text: 'Email',
        dataIndex: 'email',
        flex: 1
    }, {
        text: 'Phone',
        dataIndex: 'phone'
    }, {
        xtype: 'checkcolumn',
        text: 'Active',
        dataIndex: 'active'
    }]
});

根据您的代码的另一种方式。

您可以selModel使用selType和grid配置。

在此 FIDDLE 中，我使用selType和selModel配置创建了一个演示。它将帮助您或指导您更多关于grid复选框的选择。

Ext.create('Ext.grid.Panel', {
        title: 'Simpsons',
        store: store,
        id: 'testGrid',
        columns: [{
            text: 'Name',
            dataIndex: 'name'
        }, {
            text: 'Email',
            dataIndex: 'email',
            flex: 1
        }, {
            text: 'Phone',
            dataIndex: 'phone'
        }],
        renderTo: Ext.getBody(),
        selModel: {
            checkOnly: false,
            //injectCheckbox: 'last',
            mode: 'SIMPLE'
        },
        selType: 'checkboxmodel',
        buttons: [{
            text: 'Select All',
            handler: function () {
                Ext.getCmp('testGrid').getSelectionModel().selectAll();
            }
        }, {
            text: 'Deselect All',
            handler: function () {
                Ext.getCmp('testGrid').getSelectionModel().deselectAll();
            }
        }]
    });

如何取消选中Ext网格中特定行的复选列

1 个答案: