如果组是空的extjs4网格分组,请从组标题中删除展开和折叠图标

如果组是空的extjs4网格分组,请从组标题中删除展开和折叠图标,extjs,extjs4,extjs4.1,extjs4.2,extjs-mvc,Extjs,Extjs4,Extjs4.1,Extjs4.2,Extjs Mvc,如果组中没有任何子项,我想删除展开(+)和折叠(-)图标。有人能帮我实现吗?我必须重写extjs分组文件,或者我可以在CSS中解决它,并显式地将类分配给行。谢谢你的帮助。因此,在第一个图像中,红色的行实际上不应该有(+)展开图标,因为它在第二个图像中是空的 这必须比默认的Ext分组网格多一点,因为“没有记录的组”甚至不显示在标准分组网格中 尽管如此,您似乎已经成功地使用css将“空”组设置为红色,因此您只需从“空”行向下找到[+]图标的css选择器,然后 .the-selector-of-exp

如果组中没有任何子项,我想删除展开(+)和折叠(-)图标。有人能帮我实现吗?我必须重写extjs分组文件,或者我可以在CSS中解决它,并显式地将类分配给行。谢谢你的帮助。因此,在第一个图像中,红色的行实际上不应该有(+)展开图标,因为它在第二个图像中是空的


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

尽管如此,您似乎已经成功地使用css将“空”组设置为红色,因此您只需从“空”行向下找到[+]图标的css选择器,然后

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


是的,我使用了上面的css

我找到了类(.x-grid-group-hd-collapsed.x-grid-group-title)和(.x-grid-group-hd-collapsable.x-grid-group-title) 我为它做了一个自定义类,只是给了背景图片:上面的类都没有让我不想要的所有项目的展开-折叠符号不可见。我想要有孩子的团体的“扩展-崩溃”标志。所以我创建了以下自定义类并覆盖了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);
        }


    });

--------------------------------覆盖文件-------------------------------------

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

您好,我是您在图中所示的需求,您能给我一些参考URL或一些JSFIDLE链接,这将帮助我实现需求吗