Javascript 使ExtJS GridPanel的某些单元格不可编辑

我目前有一个带有Ext.ux.RowEditor插件的GridPanel。行编辑器中存在四个字段：端口、ip地址、子网和DHCP。如果选中所选行的DHCP字段（复选框），我需要使其他三个字段不可编辑

我一直试图在触发beforeedit事件时执行此代码，但没有效果。。。我只找到了使整个列不可编辑的方法。到目前为止，我的代码是：

this.rowEditor.on({
    scope: this,
    beforeedit: this.checkIfEditable
});

checkIfEditable:function(rowEditor, rowIndex) {
    if(this.getStore().getAt(rowIndex).get('dhcp')) {
        // this function makes the entire column un-editable:
        this.getColumnModel().setEditable(2, false); 

        // I want to make only the other three fields of the current row 
        // uneditable.
    }
 }

如果需要任何澄清，请告诉我

---

任何可能扩展RowEditor以实现目标功能的帮助都将不胜感激

只需将columnModel/columns中的列设置为可编辑：对于不应编辑的字段，设置为false

columns: [ 
  { header: "Ticker", width: 60, editable:false },
  { header: "Company Name", width: 150, id: 'company'},
  { header: "Market Cap."},
  { header: "$ Sales", renderer: money},
  { header: "Employees", resizable: false}
]

列：[
{标题：“Ticker”，宽度：60，可编辑：false}，
{标题：“公司名称”，宽度：150，id:'公司'}，
{标题：“市值。”}，
{标题：“$Sales”，渲染器：money}，
{标题：“员工”，可调整大小：false}
]

如文件所述：

如果侦听器返回false 编辑器将不会被激活

所以

仅返回false就足以取消编辑功能

---

明白了

有趣的想法-实施起来有点麻烦，但可能

您需要从两个方向着手：

1）编辑开始

2）复选框已选中/未选中

对于第一部分，我认为您可以使用与上面几乎相同的代码，删除“return false”并使用对rowEditor的引用来循环遍历items集合，禁用（对其调用disable方法）不是您的checkbox字段的字段

---

第二部分是将处理程序添加到复选框中，该复选框将执行相同的操作。

您可以在函数

startEditing

中添加对函数的调用

isCellEditable

//.... RowEditor.js
startEditing: function(rowIndex, doFocus){
//.... search for the starting of the below loop into the source code
            var cm = g.getColumnModel(), fields = this.items.items, f, val;
            for(var i = 0, len = cm.getColumnCount(); i < len; i++){
                val = this.preEditValue(record, cm.getDataIndex(i));
                f = fields[i];
                f.setValue(val);

                // *** here add a call to isCellEditable *** //
                f.setDisabled(!cm.isCellEditable(i, rowIndex));
                // ***************************************** //

                this.values[f.id] = Ext.isEmpty(val) ? '' : val;
            }
//....

---

我遇到了同样的问题。我没有将GridPanel与Ext.ux.RowEditor插件一起使用，而是使用Ext.grid.EditorGridPanel。在这种情况下，可以使用beforeshow事件处理程序为列模型中的其他三个字段（端口、ip地址和子网）指定编辑器，如下所示：

  editor: new Ext.form.TextArea({
    height:80,
    allowBlank: false,
    listeners:{
      beforeshow: function(column) {
        if (column.gridEditor.record.get('dhcp')) {
          column.gridEditor.cancelEdit();
        }
      }
    }
  })

哈!！ 我做了一个脏的，我添加了一个事件this.firevent（'starting'，this，fields，record）；在开始的最后

startEditing: function(rowIndex, doFocus){
    if(this.editing && this.isDirty()){
        this.showTooltip(this.commitChangesText);
        return;
    }
    if(Ext.isObject(rowIndex)){
        rowIndex = this.grid.getStore().indexOf(rowIndex);
    }
    if(this.fireEvent('beforeedit', this, rowIndex) !== false){
        this.editing = true;
        var g = this.grid, view = g.getView(),
            row = view.getRow(rowIndex),
            record = g.store.getAt(rowIndex);

        this.record = record;
        this.rowIndex = rowIndex;
        this.values = {};
        if(!this.rendered){
            this.render(view.getEditorParent());
        }
        var w = Ext.fly(row).getWidth();
        this.setSize(w);
        if(!this.initialized){
            this.initFields();
        }
        var cm = g.getColumnModel(), fields = this.items.items, f, val;
        for(var i = 0, len = cm.getColumnCount(); i < len; i++){
            val = this.preEditValue(record, cm.getDataIndex(i));
            f = fields[i];
            f.setValue(val);
            this.values[f.id] = Ext.isEmpty(val) ? '' : val;
        }
        this.verifyLayout(true);
        if(!this.isVisible()){
            this.setPagePosition(Ext.fly(row).getXY());
        } else{
            this.el.setXY(Ext.fly(row).getXY(), {duration:0.15});
        }
        if(!this.isVisible()){
            this.show().doLayout();
        }
        if(doFocus !== false){
            this.doFocus.defer(this.focusDelay, this);
        }
        /*I ADDED THIS EVENT ---- contains the fields and record

---

以下操作可使特定单元格不可编辑（将事件添加到行编辑器）：

---

使用ExtJS4和RowEditing插件，我成功地实现了这一点

rowEditor.on('beforeedit', function (context) {
       this.editor.query('textfield')[0].setDisabled(/* your condition here */);
});

---

记录数据可通过context.record.data获得。从ExtJS 3.4开始，您只需覆盖isCellEditable即可，如下例所示：

---

以下是更简单的版本：

为单元格提供以下条件以使其不可编辑：

grid.on('beforeedit', function(editor, e) {
  if (e.record.get('phone') == '555-111-1224')
    return false;
});

---

我希望能够动态更改“可编辑”属性。当用户将复选框设置为true时，我希望使除单击的字段之外的所有其他字段都不可编辑（对于当前行）。有什么想法吗？这和我想做的很接近。唯一的问题是我需要行中的一个字段保持可编辑状态-复选框字段。网格中有四个字段，其中一个是复选框。所有字段通常都是可编辑的，但是如果选中复选框字段，我需要使其他三个字段不可编辑（但仍然允许复选框字段可编辑）。如果再次选中复选框字段，则上述三个字段应再次可编辑。如果需要任何澄清，请让我知道，谢谢你的帮助。根据你的反馈更新了原始答案。是的，这是我希望做的，但我不确定如何检索项目集合。this.items.items似乎无法获取集合（正如它们在rowdeditor.js源代码中所做的那样）。抱歉这么天真，我不熟悉Javascript和ExtJS。。。我应该使用哪个函数来获取项目？也许扩展RowEditor是最好的方法？任何帮助都将不胜感激。。。如果需要任何澄清，请告诉我。我可以使用您的解决方案使我的专栏不可编辑，这正是我想要的。谢谢

var editor = new Ext.ux.grid.RowEditor({
    saveText: 'Update',
    listeners : {
        'starting' : function(rowEditor, fields, record){
            if(!record.data.equipo_id){
                fields[4].setDisabled(false);
            }else{
                fields[4].setDisabled(true);
            }
        },

    beforeedit: function (roweditor, rowIndex) {
        var data = roweditor.grid.store.getAt(rowIndex).data;
        var cm = roweditor.grid.getColumnModel();

        // disable the first column (can not be edited)
        if (** make your check here ***) {
            var c = cm.getColumnAt(0);
            c.editor.disable();
        }
        roweditor.initFields();
    }

rowEditor.on('beforeedit', function (context) {
       this.editor.query('textfield')[0].setDisabled(/* your condition here */);
});

plugins: [
    Ext.create('Ext.grid.plugin.CellEditing', {
        clicksToEdit: 1
        ,pluginId: 'editing'
    })
]

grid.on('beforeedit', function(editor, e) {
  if (e.record.get('phone') == '555-111-1224')
    return false;
});