extjs4网格 - 每行更改列编辑器 [英] extjs4 grid - changing column editor per row basis

问题描述

ExtJS4网格预计每列有适当的编辑器（cellEditor或rowEditor）。
如果某个列的标题字段为dateField - 日期选择器将应用于该列中的每一行。

我需要的是带有不同字段编辑器的编辑器行，而不是每列。

Extjs3解决方案提供这里 - 不幸的是不适合Extjs4的情况。
（请检查该链接以查看解释性图像，因为我无法发布图像）还有一个名为属性网格，但同样 - 它只支持一列，而且非常偏离了标准的Ext.grid组件

我尝试过通过自定义column.field手动更改网格编辑器并重新加载grid.editingPlugin.editor，但总是得到一个空白的rowEditor面板没有字段。

  //默认情况下，rowEditor将textField应用于所有单元格 - 我试图强制自定义numberFiled在适当的行
 var numberField = Ext.form.field.Number（）; 
 grid.columns [0] .field = numberField; 
 //销毁当前rowEditor的实例
 delete grid.editingPlugin.editor; 
 //现在，当doubleClick在合适的单元格上时，它应该重新初始化自己（initEditor（）） - 它确实是，但是是一个空的面板
  

我在这里错过了什么？一旦我删除了editPlugin.editor，一切都应该从第一次开始的时候开始rowEditor被调用，但它会丢失所有的字段。

解决方案

<对于Ext4的解决方案：

我正在为此寻找一个解决方案，并且这个人说属性网格有这种行为。
我已经调整它在我的
上使用initComponent的干净方式声明：

  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']，[假，'Não']] 
}）}）
}; 
  

我使用这些函数来帮助我（复制）：

  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）; 
} 
返回Ext.util.Format.htmlEncode（result）; 
}; 
 
 this.getCellEditor = function（record，column）{
 return this.editors [record.get（'type'）]; 
}; 
  

最后，将这些函数关联到列：

  {text：Valor，name：'colunaValor'，width：75，sortable：true，dataIndex：'valor'，width：200，
渲染器： Ext.Function.bind（this.renderCell，this），
 getEditor：Ext.Function.bind（this.getCellEditor，this）
} 
  

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.

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)

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

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

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

解决方案

Solution for Ext4:

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屋！