Ext2.0.2 在表头中标题上下文菜单隐藏列增加全选功能
希望在月度上方增加全选功能
勾选时：月度、物料、业务方向、等其他字段在表格中显示。
取消勾选时：月度、物料、业务方向、等其他字段在表格中隐藏。
Ext2.0.2版本。
给grid添加render事件，然后用js添加全选的功能项到列弹出层中，题主只需要将injectJsEvent函数导入页面，给grid listeners添加render事件
listeners: {
render: injectJsEvent////////////////////注入js事件
}
大概写了个示例，由于extjs限制必须要有一个列，所以不能全部取消所有列，必须保留一个，效果如下，有帮助麻烦点个采纳【本回答右上角】，谢谢~~有其他问题可以继续交流~
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>Editor Grid Example</title>
<link rel="stylesheet" type="text/css" href="../../resources/css/ext-all.css" />
<!-- GC -->
<!-- LIBS -->
<script type="text/javascript" src="../../adapter/ext/ext-base.js"></script>
<!-- ENDLIBS -->
<script type="text/javascript" src="../../ext-all.js"></script>
<link rel="stylesheet" type="text/css" href="grid-examples.css" />
<!-- Common Styles for the examples -->
<link rel="stylesheet" type="text/css" href="../examples.css" />
</head>
<body>
<script>
Ext.onReady(function () {
window. Plant = Ext.data.Record.create([
{name: 'common', type: 'string' },
{ name: 'botanical', type: 'string' },
{ name: 'light' },
{ name: 'price', type: 'float' }, // automatic date conversions
{name: 'availDate', mapping: 'availability', type: 'date', dateFormat: 'm/d/Y' },
{ name: 'indoor', type: 'bool' }
]);
// create the Data Store
window. store = new Ext.data.Store({
// load using HTTP
url: 'plants.xml',
autoLoad: true,
// the return will be XML, so lets set up a reader
reader: new Ext.data.XmlReader({
// records will have a "plant" tag
record: 'plant'
}, Plant),
sortInfo: { field: 'common', direction: 'ASC' }
});
var grid = new Ext.grid.EditorGridPanel({
store: store, //数据来源store
renderTo: document.body,
columns: [
{ id: 'No', header: "文件名称", editor: new Ext.form.TextField({ allowBlank: false }), sortable: true, dataIndex: 'common' },
{ header: "公司名称", editor: new Ext.form.TextField({ allowBlank: false }), sortable: true, dataIndex: 'botanical' },
{
header: "保荐公司", editor: new Ext.form.TextField({
allowBlank: false,
listeners: {
render: function (p) {
var nowElement = p;
p.getEl().on("click", function (p) {
var record = grid.getSelectionModel();
alert(record.get("selNow"));
var win = new Ext.Window({
layout: 'fit',
width: 600,
height: 400,
closeAction: 'hide',
modal: true,
title: "选择公司",
plain: true,
items: new Ext.Panel({
frame: true,
autoScroll: true,
buttonAlign: "center",
id: "id",
items: [wingrid]
})
});
win.show();
});
}
},
mode: 'remote'
}), sortable: true, dataIndex: 'light'
}],
width: 540,
height: 200,
listeners: {
render: injectJsEvent////////////////////注入js事件
}
});
});
///////////下面为主要代码
function injectJsEvent(component) {
var container = component.el.dom;//grid容器，给下拉菜单中的列添加全选
var menu;//弹出菜单
function aClick() {//添加箭头点击事件，只有第一次点击后才会生成箭头弹窗层
//添加过后解绑事件，无需重复添加
for (var el of arrows) el.removeEventListener('click', aClick);
setTimeout(function () {//延时获取，要不获取不到，因为自己加的事件先于生成菜单的执行
menu = document.querySelector('.x-menu:last-of-type ul');
//给列菜单项添加mouseover事件
menu.querySelector('.x-menu-item-arrow').addEventListener('mouseover', colMouseOver);
}, 100);
}
function colMouseOver() {
menu.querySelector('.x-menu-item-arrow').removeEventListener('mouseover', colMouseOver);//移除事件
setTimeout(function () {
var colMenu = document.querySelector('.x-menu:last-of-type ul');//列弹出层
colMenu.addEventListener('click', function (e) { setTimeout(allChecked, 10); });
function allChecked() {
var cols = colMenu.querySelectorAll('li');
var allck = true;
for (var col of cols)
if (col != ckall) {
if (!col.classList.contains('x-menu-item-checked')) {
allck = false;
break;
}
}
ckall.classList[allck ? 'add' : 'remove']('x-menu-item-checked');
}
var ckall = document.createElement('li');
ckall.className = 'x-menu-list-item x-menu-item-checked';
ckall.innerHTML = '<a href="#" class="x-menu-item x-menu-check-item"><img class="x-menu-item-icon ">全选</a>';
colMenu.querySelectorAll('li')[0].insertAdjacentElement('beforeBegin', ckall);
function fireEvent(el) {
const event = document.createEvent('HTMLEvents');
event.initEvent('click', true, false);
el.dispatchEvent(event);
}
ckall.onclick = function (e) {
e.stopPropagation();
var checked = ckall.classList.contains('x-menu-item-checked');
var cols = colMenu.querySelectorAll('li');
for (var col of cols)
if (col != ckall) {
if (checked) {//取消全选
if (col.classList.contains('x-menu-item-checked'))//已勾选的触发click事件
fireEvent(col);
}
else {//执行全选
if (!col.classList.contains('x-menu-item-checked'))//未勾选的触发click事件
fireEvent(col);
}
}
allChecked();
return false;
}
}, 230);
}
var arrows = container.querySelectorAll('.x-grid3-hd-btn');//下拉箭头
for (var el of arrows) el.addEventListener('click', aClick);}
</script>
</body>
</html>
可以的。我先安装个向日葵