如果组是空的extjs4网格分组,请从组标题中删除展开和折叠图标
如果组中没有任何子项,我想删除展开(+)和折叠(-)图标。有人能帮我实现吗?我必须重写extjs分组文件,或者我可以在CSS中解决它,并显式地将类分配给行。谢谢你的帮助。因此,在第一个图像中,红色的行实际上不应该有(+)展开图标,因为它在第二个图像中是空的如果组是空的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
这必须比默认的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链接,这将帮助我实现需求吗