如果组为空extjs4网格分组，则从组头中删除展开和折叠图标

Question

如果该组没有任何子项，我想删除展开（+）和折叠（ - ）图标。有人可以帮助我实现这一目标吗？我是否必须覆盖extjs分组文件，或者我可以在CSS中进行处理并明确地将类分配给行。谢谢你的帮助。因此，在第一个图像中，红色的行实际上不应该（+）展开图标，因为它是空的，如第二个图像中所示。

Answer 1

这必须比默认的Ext分组网格多一点，因为“没有记录的组”甚至不会显示在标准分组网格中。

尽管如此，你似乎已经用css成功地将“空”组改为红色，所以你只需要从“空”行找到[+]图标的css选择器然后

.the-selector-of-expand-icon-you-found {
    display:none;
} 

或

.the-selector-of-expand-icon-you-found {
    visibility:hidden;
}

Answer 2

是的，我使用了上面的css

我找到了这个类（.x-grid-group-hd-collapsed .x-grid-group-title）和（.x-grid-group-hd-collapsible .x-grid-group-title）  并且已经为它制作了我的自定义类，jus给出了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;
}

---

-------------------------------- Overriden文件------------- ------------------------

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',