如何在 extjs 网格（单元格编辑）中将完整列显示为可编辑？

Posted 2023-02-26

【中文标题】如何在 extjs 网格（单元格编辑）中将完整列显示为可编辑？

【英文标题】：How to show complete column as editable in extjs grid(cell editing)?

【发布时间】：2013-06-25 15:07:00

【问题描述】：

我正在使用单元格编辑插件来编辑单元格。但这就像当我们单击该列时，它将进入编辑模式。我想显示带有可编辑文本框的完整列。

目前我正在使用以下代码使其可编辑。

selType: 'cellmodel',
plugins: [
   Ext.create('Ext.grid.plugin.CellEditing', 
      clicksToEdit: 1
   )
],


columns: [
     text: ... ,
     text: ... ,
     text: ... ,
     text: 'TText', flex: 1, dataIndex: 'TText',
        editor: 
            xtype: 'textfield',
            allowBlank: false
        
    

]

【问题讨论】：

您的意思是希望列的所有行都处于可编辑模式？

是的。处于可编辑模式的列的所有行

我们在列中的单元格周围设置了一个黑色边框，这是否足以满足您的需求？我可以告诉你我们是怎么做到的

@Reimius 我认为这是一个不错的选择，你能展示一下这个解决方案吗？

【参考方案1】：

我认为这对你的场景来说已经足够好了：

columns: [
     text: ... ,
     text: ... ,
     text: ... ,
     text: 'TText', flex: 1, dataIndex: 'TText',
        editor: 
            xtype: 'textfield',
            allowBlank: false
        ,
        renderer: function(value, metaData)
            metaData.style = "border: 1px gray solid;";
            return value;
        
    

]

【参考方案2】：

等待beforeedit 事件，然后

... Ext.grid.plugin.CellEditing', 
              clicksToEdit: 1,
              listeners: 
                 beforeedit: function( oEditor, oOptions ) 

// for each record start the edit mode 'startEdit()' 
    

查看文档：startEdit()

【讨论】：

'startEdit()' 要求对象。但我无法理解它想要什么对象。我在 beforeedit 函数中放置了一个调试器。但只有当我单击该行时它才会击中。我需要在加载网格本身时每行列都应显示为可编辑。谢谢