在 Extjs Pivot Grid 中使用复选框的最佳方式
Best way to use checkboxes inside a Extjs Pivot Grid
我有一个枢轴网格,如果用户具有创建、读取、更新、删除“权限,用户将以这种方式分组 departaments > establishments > sectors > users 我希望用户能够编辑这个字段。
我已经尝试使用渲染器:
aggregate: [{
renderer: function(value, record, dataIndex, cell, column) {
var id = Ext.id();
Ext.defer(function() {
Ext.widget('checkbox', {
renderTo: id,
checked: value,
listeners: {
change: {
fn: function(event, target) {
//some function here
}
}
}
});
}, 100);
return Ext.String.format('<div id="{0}"></div>', id);
},
aggregator: 'aggCheckBoxR',
dataIndex: 'Incluir',
header: 'Incluir'
}]
并带有小部件列:
aggregate: [{
aggregator: 'aggCheckBoxR',
column: {
xtype: 'widgetcolumn',
widget: {
xtype: 'checkbox',
listeners: {
change: function(cb) {
//some function here
}
}
}
},
dataIndex: 'Incluir',
header: 'Incluir'
}]
我的聚合器:
aggCheckBoxR: function(records, measure, matrix, rowGroupKey, colGroupKey) {
if (records.length > 1) {
let checkAllTrue = true;
for (var i = 0; i < records.length; i++) {
if (records[i].get('Incluir') === false || records[i].get('Incluir') === 0) {
checkAllTrue = false;
}
}
return checkAllTrue;
} else {
return records[0].get('Incluir');
}
}
复选框出现在网格上,但我的问题是数据 "dont persist",每当我展开或折叠枢轴网格上的左轴时,复选框 returns 的值将恢复为其原始值,我怎样才能保存这些数据?
已尝试手动更新记录
change: function(cb) {
var nomeCmp = cb.getWidgetRecord().data._compactview_;
Ext.getStore('acesso.ColabStore').findRecord('Nome', nomeCmp).data.Incluir = true;
}
但还是不行。
编辑:必须将列对象事件侦听器更改为:
{
xtype: 'widgetcolumn',
widget: {
xtype: 'checkbox',
listeners: {
afterrender: function(component, eOpts) {
console.log('after,render');
component.getEl().on('change', function(e, el) {
console.log('change func here');
})
}
}
}
}
有了这个,只有当用户选中复选框时才会触发 change 事件,最后,我可以使用
norbeq's 回答
您可以使用以下方式手动更新记录:
record.set('Incluir',true);
如果您不想将更改发送到服务器:
record.commit();
我有一个枢轴网格,如果用户具有创建、读取、更新、删除“权限,用户将以这种方式分组 departaments > establishments > sectors > users 我希望用户能够编辑这个字段。
我已经尝试使用渲染器:
aggregate: [{
renderer: function(value, record, dataIndex, cell, column) {
var id = Ext.id();
Ext.defer(function() {
Ext.widget('checkbox', {
renderTo: id,
checked: value,
listeners: {
change: {
fn: function(event, target) {
//some function here
}
}
}
});
}, 100);
return Ext.String.format('<div id="{0}"></div>', id);
},
aggregator: 'aggCheckBoxR',
dataIndex: 'Incluir',
header: 'Incluir'
}]
并带有小部件列:
aggregate: [{
aggregator: 'aggCheckBoxR',
column: {
xtype: 'widgetcolumn',
widget: {
xtype: 'checkbox',
listeners: {
change: function(cb) {
//some function here
}
}
}
},
dataIndex: 'Incluir',
header: 'Incluir'
}]
我的聚合器:
aggCheckBoxR: function(records, measure, matrix, rowGroupKey, colGroupKey) {
if (records.length > 1) {
let checkAllTrue = true;
for (var i = 0; i < records.length; i++) {
if (records[i].get('Incluir') === false || records[i].get('Incluir') === 0) {
checkAllTrue = false;
}
}
return checkAllTrue;
} else {
return records[0].get('Incluir');
}
}
复选框出现在网格上,但我的问题是数据 "dont persist",每当我展开或折叠枢轴网格上的左轴时,复选框 returns 的值将恢复为其原始值,我怎样才能保存这些数据?
已尝试手动更新记录
change: function(cb) {
var nomeCmp = cb.getWidgetRecord().data._compactview_;
Ext.getStore('acesso.ColabStore').findRecord('Nome', nomeCmp).data.Incluir = true;
}
但还是不行。
编辑:必须将列对象事件侦听器更改为:
{
xtype: 'widgetcolumn',
widget: {
xtype: 'checkbox',
listeners: {
afterrender: function(component, eOpts) {
console.log('after,render');
component.getEl().on('change', function(e, el) {
console.log('change func here');
})
}
}
}
}
有了这个,只有当用户选中复选框时才会触发 change 事件,最后,我可以使用 norbeq's 回答
您可以使用以下方式手动更新记录:
record.set('Incluir',true);
如果您不想将更改发送到服务器:
record.commit();