我有一个启用了rowediting插件的网格面板。我想知道是否可以根据从服务器返回的数据在同一单元格中显示checkbox控件或numberfield。我之前没有见过这样的东西,谷歌搜索没有产生任何结果,所以根本不可能。看起来我必须指定不同的编辑器类型,不是每列而是每个单元格。
我怎样才能做到这一点?
P.S。我必须有机会编辑该单元格,即更改数字值或选中/取消选中复选框。
答案 0 :(得分:2)
这很容易实现,您需要使用网格列的getEditor
方法并让它返回您想要的表单字段:
示例:
{
xtype: 'gridcolumn',
getEditor: function(record) {
var grid = this.up('grid'),
cellediting = grid.findPlugin('cellediting'),
editors = cellediting.editors,
editor = editors.getByKey(this.id),
fieldType;
if (editor) {
// Do this to avoid memory leaks
editors.remove(editor);
}
fieldType = isNaN(parseFloat(record.get('salary'))) ? 'textfield' : 'numberfield';
return {
xtype: fieldType,
allowBlank: false
};
},
dataIndex: 'salary',
text: 'Salary',
flex: 1
}
我已经创建了一个演示如何使用此方法的小提琴,如果列Salary包含一个字符串,它将使用文本字段进行编辑,如果它包含一个数字,它将使用Numberfield进行编辑。
希望有所帮助
小提琴:https://fiddle.sencha.com/#fiddle/c2m
答案 1 :(得分:1)
非常感谢Guilherme Lopes开始使用的优秀代码。以下是我最终得到的样本:
var data = [{
name: 'Richard Wallace',
age: 24,
hired: '9/21/2013',
active: true,
salary: 1,
checkbox: true
}, {
name: 'Phyllis Diaz',
age: 29,
hired: '1/27/2009',
active: false,
salary: 41244,
checkbox: false
}, {
name: 'Kathryn Kelley',
age: 23,
hired: '9/14/2011',
active: false,
salary: 98599.9,
checkbox: false
}, {
name: 'Annie Willis',
age: 36,
hired: '4/11/2011',
active: true,
salary: 0,
checkbox: true
}];
var store = Ext.create('Ext.data.Store', {
data: data,
fields: [{
name: 'name'
}, {
type: 'float',
name: 'age'
}, {
type: 'date',
name: 'hired'
}, {
type: 'boolean',
name: 'active'
}, {
name: 'salary'
}]
});
Ext.define('MyApp.view.MyGridPanel', {
extend: 'Ext.grid.Panel',
alias: 'widget.mygridpanel',
height: 315,
width: 784,
title: 'Employees',
store: store,
viewConfig: {
listeners: {
beforecellclick: function (view, cell, cellIndex, record, row, rowIndex, e) {
if (cellIndex == 4 && record.get('checkbox')) {
if (record.get('salary')) {
record.set('salary', 0);
} else {
record.set('salary', 1);
}
return false;
}
return true;
}
}
},
columns: [{
xtype: 'gridcolumn',
dataIndex: 'name',
text: 'Name',
flex: 1,
editor: {
xtype: 'textfield'
}
}, {
xtype: 'gridcolumn',
dataIndex: 'age',
text: 'Age'
}, {
xtype: 'datecolumn',
dataIndex: 'hired',
text: 'Hired',
flex: 1
}, {
xtype: 'checkcolumn',
dataIndex: 'active',
text: 'Active'
}, {
xtype: 'gridcolumn',
getEditor: function (record) {
var fieldType = record.get('checkbox') ? 'checkboxfield' : 'textfield';
return Ext.create('Ext.grid.CellEditor', {
field: {
xtype: fieldType,
allowBlank: false
}
});
},
renderer: function (value, metaData) {
if (metaData.record.get('checkbox')) {
if (metaData.record.get('salary')) {
return '<div style="text-align: center"><img class="x-grid-checkcolumn x-grid-checkcolumn-checked" src="data:image/gif;base64,R0lGODlhAQABAID/AMDAwAAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw=="></div>';
} else {
return '<div style="text-align: center"><img class="x-grid-checkcolumn" src="data:image/gif;base64,R0lGODlhAQABAID/AMDAwAAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw=="></div>';
}
}
return value;
},
dataIndex: 'salary',
text: 'Salary',
flex: 1
}],
plugins: [{
ptype: 'cellediting',
autoCancel: false,
clicksToEdit: 1
}]
});
Ext.create('MyApp.view.MyGridPanel', {
renderTo: Ext.getBody()
});
关于Sencha's fiddle https://fiddle.sencha.com/#fiddle/c3p
的工作示例答案 2 :(得分:0)
编辑器包含一个字段,此编辑器用于整个列。您无法为一列指定两个xtypes或多个编辑器。
尽管如此,这并非完全不可能,但需要一些工作。 您必须使用自定义xtype定义新的自定义字段。 告诉此字段要么渲染一个复选框字段,要么是一个数字字段,具体取决于值。
这将要求您覆盖/实现Ext.form.field.Base具有的大部分功能......