我有一列checkcolumn类型来启用切换布尔值。我希望能够一次切换该值的所有行。理想情况下，我可以在checkcolumn标题中添加一个复选框并监听更改。那可能吗？
我想指出，我不是在寻找一个复选框模型来选择行。
问问题
19561 次
5 回答
9
我为此创建了 Ext.ux.CheckColumn 的更新版本，只需在包含 extjs 代码后包含此代码：
Ext.define('Ext.ux.CheckColumn', {
extend: 'Ext.grid.column.Column',
alias: 'widget.checkcolumn',
disableColumn: false,
disableFunction: null,
disabledColumnDataIndex: null,
columnHeaderCheckbox: false,
constructor: function(config) {
var me = this;
if(config.columnHeaderCheckbox)
{
var store = config.store;
store.on("datachanged", function(){
me.updateColumnHeaderCheckbox(me);
});
store.on("update", function(){
me.updateColumnHeaderCheckbox(me);
});
config.text = me.getHeaderCheckboxImage(store, config.dataIndex);
}
me.addEvents(
/**
* @event checkchange
* Fires when the checked state of a row changes
* @param {Ext.ux.CheckColumn} this
* @param {Number} rowIndex The row index
* @param {Boolean} checked True if the box is checked
*/
'beforecheckchange',
/**
* @event checkchange
* Fires when the checked state of a row changes
* @param {Ext.ux.CheckColumn} this
* @param {Number} rowIndex The row index
* @param {Boolean} checked True if the box is checked
*/
'checkchange'
);
me.callParent(arguments);
},
updateColumnHeaderCheckbox: function(column){
var image = column.getHeaderCheckboxImage(column.store, column.dataIndex);
column.setText(image);
},
toggleSortState: function(){
var me = this;
if(me.columnHeaderCheckbox)
{
var store = me.up('tablepanel').store;
var isAllChecked = me.getStoreIsAllChecked(store, me.dataIndex);
store.each(function(record){
record.set(me.dataIndex, !isAllChecked);
record.commit();
});
}
else
me.callParent(arguments);
},
getStoreIsAllChecked: function(store, dataIndex){
var allTrue = true;
store.each(function(record){
if(!record.get(dataIndex))
allTrue = false;
});
return allTrue;
},
getHeaderCheckboxImage: function(store, dataIndex){
var allTrue = this.getStoreIsAllChecked(store, dataIndex);
var cssPrefix = Ext.baseCSSPrefix,
cls = [cssPrefix + 'grid-checkheader'];
if (allTrue) {
cls.push(cssPrefix + 'grid-checkheader-checked');
}
return '<div class="' + cls.join(' ') + '"> </div>'
},
/**
* @private
* Process and refire events routed from the GridView's processEvent method.
*/
processEvent: function(type, view, cell, recordIndex, cellIndex, e) {
if (type == 'mousedown' || (type == 'keydown' && (e.getKey() == e.ENTER || e.getKey() == e.SPACE))) {
var record = view.panel.store.getAt(recordIndex),
dataIndex = this.dataIndex,
checked = !record.get(dataIndex),
column = view.panel.columns[cellIndex];
if(!(column.disableColumn || record.get(column.disabledColumnDataIndex) || (column.disableFunction && column.disableFunction(checked, record))))
{
if(this.fireEvent('beforecheckchange', this, recordIndex, checked, record))
{
record.set(dataIndex, checked);
this.fireEvent('checkchange', this, recordIndex, checked, record);
}
}
// cancel selection.
return false;
} else {
return this.callParent(arguments);
}
},
// Note: class names are not placed on the prototype bc renderer scope
// is not in the header.
renderer : function(value, metaData, record, rowIndex, colIndex, store, view){
var disabled = "",
column = view.panel.columns[colIndex];
if(column.disableColumn || column.disabledColumnDataIndex || (column.disableFunction && column.disableFunction(value, record)))
disabled = "-disabled";
var cssPrefix = Ext.baseCSSPrefix,
cls = [cssPrefix + 'grid-checkheader' + disabled];
if (value) {
cls.push(cssPrefix + 'grid-checkheader-checked' + disabled);
}
return '<div class="' + cls.join(' ') + '"> </div>';
}
});
那么复选框列的示例设置将如下所示：
{
xtype: "checkcolumn",
columnHeaderCheckbox: true,//this setting is necessary for what you want
store: (you need to put the grids store here),
sortable: false,
hideable: false,
menuDisabled: true,
dataIndex: "value_flag",
listeners: {
checkchange: function(column, rowIndex, checked){
//code for whatever on checkchange here
}
}
}
看起来像这样：
于 2012-07-11T20:20:08.150 回答
3
我根据@Reimius 提供的代码创建了一个补丁。它只在必要时调用 getStoreIsAllChecked 方法以稍微提高性能。它还支持 Extjs 4.2 希望对您有所帮助。
于 2014-02-25T16:43:51.060 回答
1
如果您使用 ExtJS 6.5.2 或更高版本，则应使用此设置。
{
xtype: 'checkcolumn',
headerCheckbox: true, // THIS OPETION SHOW YOU CHECKBOX ON HEADER.
sortable: false, // THIS OPTION DISABLE SORTING.
hideable: false, // THIS OPTION EXCLUDE COLUMN FORM MENU.
menuDisabled: true, //THIS OPTION HIDE MENU ON THE HEADER.
dataIndex: 'isChecked',
width: 25
}
输出将是这样的。
如果你喜欢这个建议，请竖起大拇指。
于 2017-11-24T10:04:26.887 回答
0
使用上面 bocong 的方法对我来说开箱即用不起作用：标题复选框显示为未选中，并且在单击时没有切换其状态（它看起来也有点时髦，在左侧被切断了一点点） .
我修改（并大大简化了）上面 bocong 的代码，以使其适用于 ExtJS 4.2.1（从常规行的复选框中复制必要的标记）：
getHeaderCheckboxImage: function (allChecked) {
return '<img class="x4-grid-checkcolumn ' + ( allChecked ? 'x4-grid-checkcolumn-checked' : '' ) + '">';
}
它似乎工作得很好！
于 2016-04-14T06:28:51.337 回答
-1
做
**
selModel: {
selType: 'checkboxmodel',
showHeaderCheckbox: true
}
**
更多详情请参考：
http://docs.sencha.com/extjs/5.1.0/api/Ext.selection.CheckboxModel.html#cfg-showHeaderCheckbox
于 2017-11-27T15:58:50.273 回答