Question

我的extjs页面中有一个复选框模型。

var saCheckBox= Ext.create('Ext.selection.CheckboxModel', {mode: 'SINGLE'});

我在grid.Panel到selModel中使用它我想从模型中删除check all复选框我找到了this并相应地添加了一个监听器，但我仍然得到了所有复选框。

var saCheckBox= Ext.create('Ext.selection.CheckboxModel', {mode: 'SINGLE'}, {listeners: {

    afterrender: function (grid) {
       $('.x-column-header-checkbox').css('display','none');
    }
}});

我将display: none用于特定范围，该范围在Mozilla中效果不错，但在其他浏览器中效果不佳。任何人都可以提供与浏览器兼容的解决方案吗？

Answer 1

您想要使用：showHeaderCheckbox：false

见下面的例子：

Ext.create('Ext.data.Store', {
storeId: 'simpsonsStore',
fields: ['name', 'email', 'phone'],
data: {
    'items': [{
        'name': 'Lisa',
            "email": "lisa@simpsons.com",
            "phone": "555-111-1224"
    }, {
        'name': 'Bart',
            "email": "bart@simpsons.com",
            "phone": "555-222-1234"
    }, {
        'name': 'Homer',
            "email": "home@simpsons.com",
            "phone": "555-222-1244"
    }, {
        'name': 'Marge',
            "email": "marge@simpsons.com",
            "phone": "555-222-1254"
    }]
},
proxy: {
    type: 'memory',
    reader: {
        type: 'json',
        root: 'items'
    }
}
});


var grid = Ext.create('Ext.grid.Panel', {
title: 'Simpsons',
id: 'sheetproductionrestin',
store: Ext.data.StoreManager.lookup('simpsonsStore'),
selModel: Ext.create('Ext.selection.CheckboxModel', {
    checkOnly: true,
    showHeaderCheckbox: false,  //here is where it is added.
    mode: 'MULTI'
}),
listeners: {
    cellclick: function (sender, td, cellIndex, record, tr, rowIndex, e, eOpts) {
        clickedColIndex = cellIndex;
    },
        beforedeselect: function (rowmodel, record, index, eOpts) {
        return (clickedColIndex == 0);
    }
},
columns: [{
    header: 'Name',
    dataIndex: 'name',
    editor: {
        xtype: 'textfield'
    }
}, {
    header: 'Email',
    dataIndex: 'email',
    flex: 1
}, {
    header: 'Phone',
    dataIndex: 'phone'
}],
height: 200,
width: 400,
renderTo: Ext.getBody(),
plugins: [Ext.create('Ext.grid.plugin.CellEditing', {
    clicksToEdit: 1,
    pluginId: 'cellplugin'
})]
// ...
});

Answer 2

我正在使用ExtJS 6.7.0现代工具包，但我认为它可以与经典版本一起使用。

在以下代码中，我将headerCheckbox对象文字中的false设置为selectable。

Ext.define('TestCheckboc.MyGrid') {
  extend: 'Ext.grid.Grid',
  selectable: {
    columns: false,
    cells: false,
    checkbox: true,
    checkboxColumnIndex: 0,
    checkboxSelect: true,
    headerCheckbox: false,
    mode: 'single'
  },
  items[{
    // ...
  }]
});

以下是结果的屏幕截图：

删除extjs checkboxmodel中的全选复选框

2 个答案: