如果该组没有任何子项，我想删除展开（+）和折叠（-）图标。有人可以帮我实现吗？我是否必须覆盖 extjs 分组文件，或者我可以在 CSS 中解决它并将类显式分配给行。谢谢大家的帮助。因此，在第一张图片中，红色的行实际上不应该有 (+) 扩展图标，因为它是空的，如第二张图片所示。
【问题讨论】：
标签： extjs extjs4 extjs4.1 extjs4.2 extjs-mvc
这必须比默认的 Ext 分组网格多一点，因为“没有记录的组”甚至不会显示在标准分组网格中。
尽管如此，您似乎已经成功地使用 css 将“空”组设为红色，因此您只需要从“空”行向下找到 [+] 图标的 css 选择器，然后
.the-selector-of-expand-icon-you-found {
display:none;
}
或
.the-selector-of-expand-icon-you-found {
visibility:hidden;
}
【讨论】：
是的，我使用了上面的css
我找到了类 (.x-grid-group-hd-collapsed .x-grid-group-title) 和 (.x-grid-group-hd-collapsible .x-grid-group-title) 并为它制作了我的自定义类，只是为上述类提供了 background-image:none 使得展开折叠符号对于我想要的所有项目都不可见。我想要有孩子的团体的展开折叠标志。所以。我制作了以下自定义类并覆盖了 EXT.grid.feature.Grouping 文件，
----------------------------CSS 文件----------------- --------------------------
.x-grid-group-hd-collapsed-no-image .x-grid-group-title {
background:none;
background-image:none;
}
.x-grid-group-hd-collapsible-no-image .x-grid-group-title{
background:none;
background-image:none;
}
--------------------------------覆盖的文件------------- ------------------------------------
Ext.define('overrides.grid.feature.EvalGroupingHeader', {
extend: 'Ext.grid.feature.Grouping',
alias: 'feature.evalgroupingheader',
hdCollapsedNoImageCls: Ext.baseCSSPrefix + 'grid-group-hd-collapsed-no-image',
collapsibleNoImageCls: Ext.baseCSSPrefix + 'grid-group-hd-collapsible-no-image',
setupRowData: function(record, idx, rowValues) {
debugger;
var me = this,
data = me.refreshData,
groupInfo = me.groupInfo,
header = data.header,
groupField = data.groupField,
dataSource = me.view.dataSource,
grouper, groupName, prev, next;
rowValues.isCollapsedGroup = false;
rowValues.summaryRecord = null;
if (data.doGrouping) {
grouper = me.view.store.groupers.first();
// This is a placeholder record which represents a whole collapsed group
// It is a special case.
if (record.children) {
groupName = grouper.getGroupString(record.children[0]);
rowValues.isFirstRow = rowValues.isLastRow = true;
//In the statement below,(record.children[0].data.field) == field which you want to put condition on to display these the expand collapse icons, I am checking if field is empty then dont display these icons(hdCollapsedNoImageCls-our custom class), and if not empty then display these icons(hdCollapsedCls-their internal class)
rowValues.itemClasses.push(Ext.isEmpty(record.children[0].data.field) ? me.hdCollapsedNoImageCls: me.hdCollapsedCls);
rowValues.isCollapsedGroup = rowValues.needsWrap = true;
rowValues.groupInfo = groupInfo;
groupInfo.groupField = groupField;
groupInfo.name = groupName;
groupInfo.groupValue = record.children[0].get(groupField);
groupInfo.columnName = header ? header.text : groupField;
//In the statement below,(record.children[0].data.field) == field which you want to put condition on to display these the expand collapse icons, I am checking if field is empty then dont display these icons(collapsibleNoImageCls-our custom class), and if not empty then display these icons(collapsibleCls-their internal class)
rowValues.collapsibleCls = me.collapsible ?
(Ext.isEmpty(record.children[0].data.field) ? me.collapsibleNoImageCls: me.collapsibleCls)
: me.hdNotCollapsibleCls;
rowValues.groupId = me.createGroupId(groupName);
groupInfo.rows = groupInfo.children = record.children;
if (me.showSummaryRow) {
rowValues.summaryRecord = data.summaryData[groupName];
}
return;
}
groupName = grouper.getGroupString(record);
// If caused by an update event on the first or last records of a group fired by a GroupStore, the record's group will be attached.
if (record.group) {
rowValues.isFirstRow = record === record.group.children[0];
rowValues.isLastRow = record === record.group.children[record.group.children.length - 1];
}
else {
// See if the current record is the last in the group
rowValues.isFirstRow = idx === 0;
if (!rowValues.isFirstRow) {
prev = dataSource.getAt(idx - 1);
// If the previous row is of a different group, then we're at the first for a new group
if (prev) {
// Must use Model's comparison because Date objects are never equal
rowValues.isFirstRow = !prev.isEqual(grouper.getGroupString(prev), groupName);
}
}
// See if the current record is the last in the group
rowValues.isLastRow = idx == dataSource.getTotalCount() - 1;
if (!rowValues.isLastRow) {
next = dataSource.getAt(idx + 1);
if (next) {
// Must use Model's comparison because Date objects are never equal
rowValues.isLastRow = !next.isEqual(grouper.getGroupString(next), groupName);
}
}
}
if (rowValues.isFirstRow) {
groupInfo.groupField = groupField;
groupInfo.name = groupName;
groupInfo.groupValue = record.get(groupField);
groupInfo.columnName = header ? header.text : groupField;
rowValues.collapsibleCls = me.collapsible ?
(Ext.isEmpty(record.get(fieldyouwanttoputconditionon)) ? me.collapsibleNoImageCls: me.collapsibleCls)
: me.hdNotCollapsibleCls;
rowValues.groupId = me.createGroupId(groupName);
if (!me.isExpanded(groupName)) {
rowValues.itemClasses.push(Ext.isEmpty(record.get(fieldyouwanttoputconditionon)) ? me.hdCollapsedNoImageCls: me.hdCollapsedCls);
rowValues.isCollapsedGroup = true;
}
// We only get passed a GroupStore if the store is not buffered
if (dataSource.buffered) {
groupInfo.rows = groupInfo.children = [];
} else {
groupInfo.rows = groupInfo.children = me.getRecordGroup(record).children;
}
rowValues.groupInfo = groupInfo;
}
if (rowValues.isLastRow) {
// Add the group's summary record to the last record in the group
if (me.showSummaryRow) {
rowValues.summaryRecord = data.summaryData[groupName];
}
}
rowValues.needsWrap = (rowValues.isFirstRow || rowValues.summaryRecord);
}
},
constructor: function() {
debugger;
this.callParent(arguments);
}
});
我已经为我的自定义类分配了以下内容，并在代码中的正确位置使用了它们，条件是我想要显示它们并且不想显示它们。
hdCollapsedNoImageCls: Ext.baseCSSPrefix + 'grid-group-hd-collapsed-no-image',
collapsibleNoImageCls: Ext.baseCSSPrefix + 'grid-group-hd-collapsible-no-image',
【讨论】：