extjs4 网格 - 每行更改列编辑器 [英] extjs4 grid - changing column editor per row basis
问题描述
ExtJS4 网格预计每列都有适当的编辑器(cellEditor 或 rowEditor).如果列的标题字段是 dateField - 日期选择器将应用于该列中的每一行.
ExtJS4 grid anticipates appropriate editor (cellEditor or rowEditor) per column. If a column's header field is dateField - date selector will be applied on every row in that column.
我需要的是一个编辑器,每行而不是每列都有不同的字段编辑器.
What I need is an editor with different field editors per row, not per column.
提供了Extjs3解决方案这里 - 不幸的是不适合 Extjs4 案例.(请检查该链接以查看说明图片,因为我还不能发布图片)
The Extjs3 solution is provided here - unfortunately doesn't fit in Extjs4 case. (please check that link to see explanatory images, cause I can't post images yet)
还有一个名为 属性网格,但同样 - 它只支持一列,并且与标准的 Ext.grid 组件非常不同
There's also a single column solution called property grid, but again - it supports only one column and is very deviated from the standard Ext.grid component
我尝试通过自定义 column.field 并重新加载 grid.editingPlugin.editor 手动更改网格编辑器,但总是得到一个没有字段的空白 rowEditor 面板.
I have tried manually changing grid editor by customizing column.field and reloading grid.editingPlugin.editor, but always get a blank rowEditor panel with no fields.
//by default rowEditor applies textField to all cells - I'm trying to force custom numberFiled on apropriate row
var numberField=Ext.form.field.Number();
grid.columns[0].field=numberField;
//destroy current rowEditor's instance
delete grid.editingPlugin.editor;
//now, upon doubleClick on apropriate cell it should reinitialize itself (initEditor()) - and it does, but is an empty panel
我在这里错过了什么?一旦我删除了 editingPlugin.editor 一切都应该从头开始,就像第一次调用 rowEditor 时一样,但它会丢失所有字段
what am I missing here? once I delete editingPlugin.editor everything should start from the beginning like during the first time rowEditor is called, but it looses all the fields
推荐答案
Ext4解决方案:
我一直在寻找解决方案,这个人说属性网格有这种行为.我已经对其进行了调整,使其以一种干净的方式为我工作在我声明的 initComponent 上:
I was looking for a solution for this and this guy said the property grid has this behavior. I have adapted it to work in a clean way for me on initComponent I declared:
this.editors = {
'date' : Ext.create('Ext.grid.CellEditor', { field: Ext.create('Ext.form.field.Date', {selectOnFocus: true})}),
'string' : Ext.create('Ext.grid.CellEditor', { field: Ext.create('Ext.form.field.Text', {selectOnFocus: true})}),
'number' : Ext.create('Ext.grid.CellEditor', { field: Ext.create('Ext.form.field.Number', {selectOnFocus: true})}),
'int' : Ext.create('Ext.grid.CellEditor', { field: Ext.create('Ext.form.field.Number', {selectOnFocus: true})}),
'boolean' : Ext.create('Ext.grid.CellEditor', { field: Ext.create('Ext.form.field.ComboBox', {
editable: false,
store: [[ true, 'Sim' ], [false, 'Não' ]]
})})
};
我用这些函数来帮助我(复制):
I used these functions to help me (copied):
this.renderCell = function(val, meta, rec) {
var result = val;
if (Ext.isDate(val)) {
result = me.renderDate(val);
} else if (Ext.isBoolean(val)) {
result = me.renderBool(val);
}
return Ext.util.Format.htmlEncode(result);
};
this.getCellEditor = function(record, column) {
return this.editors[record.get('type')];
};
最后,将这些函数与列关联:
And finally, associate these functions to the column:
{text: "Valor", name : 'colunaValor', width: 75, sortable: true, dataIndex: 'valor', width:200,
renderer: Ext.Function.bind(this.renderCell, this),
getEditor: Ext.Function.bind(this.getCellEditor, this)
}
这篇关于extjs4 网格 - 每行更改列编辑器的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!