Extjs中的EditorGridPanel高级应用

摘要：在使用EditorGridPanel里，有时我们需要在不同的条件下，对不同的列才能进行编辑。比如：在OA应用中，在一个流程执行到第一步时，只允许对第一列进行编辑，其它列为只读状态，当流程执行到第二步时，可能允许对第三、四进行编辑。那么，我们可以通过ColumnModel的isCellEditable（）函数来实现此功能。

实现方法：

1、首先，我们用一个变量来保存当前的可以编辑的步骤。

当流程执行到某一步骤时，不同的权限可以操作的内容会不一样，如超级管理员可以对所有的内容进行编辑，而一般的用户只能填写基本信息。所以，我们数据的方法来保存可以编辑的步骤。如：var EnableStep=[2];(表示当前可以对第二步进行操作)或者var EnableStep=[2,3];(表示当前可以对第二、三步进行操作)

2、定义好ColumnModel模型。

在定义ColumnModel模型时需要注意，我们需要增加一个step字段，用来保存某一列在第几部可以被编辑。如：（注意：也需要用数组的方式保存）

var J_KPI_cm = new Ext.grid.ColumnModel([new Ext.grid.RowNumberer(), 
    {header : '关键绩效指标',width : 150,dataIndex : 'Title',sortable : true,step:[1,2],
     editor : new Ext.form.TextField({allowBlank : false})
    },
    {header : '所占分值',width : 70,dataIndex : 'weight',sortable : true,align : 'center',step:[1,2],
     editor : new Ext.form.NumberField({allowBlank : false,maxLength : 3})
    },
    {header : '考核办法',width : 200,dataIndex : 'CheckMothd',sortable : true,id:'CheckMothd',renderer:TextToBr,step:[1,3],
     editor : new Ext.form.TextArea({allowBlank : false,maxLength : 2000,autoHeight   :true})
    },
    {header : '基准值',width : 70,dataIndex : 'target1',sortable : true,align : 'center',step:[1,2],
     editor : new Ext.form.TextField({allowBlank : false,maxLength : 10})
    },
    {header : '挑战值',width : 70,dataIndex : 'target2',sortable : true,align : 'center',step:[1,2],
     editor : new Ext.form.TextField({allowBlank : false,maxLength : 10})
    },
    {header : '完成情况',width : 200,dataIndex : 'Completion',sortable : true,step:[3],
     editor : new Ext.form.TextArea({allowBlank : false})
    },
    {header : '得分',width : 70,dataIndex : 'MasterScore',sortable : true,align : 'center',step:[4],
     editor : new Ext.form.NumberField({allowBlank : false,maxLength : 4})
    }
]);

3、意义isCellEditable函数

J_KPI_cm.isCellEditable=function(colIndex, rowIndex) {
    var colId=J_KPI_cm.getColumnId(colIndex);//获取ColumnID
    var step=J_KPI_cm.getColumnById(colId).step;//获取Step
    if(step!=undefined)
        for(var i=0;i<EnableStep.length;i++)
            for(var j=0;j<step.length;j++)
                if(EnableStep[i] == step[j])
                    return Ext.grid.ColumnModel.prototype.isCellEditable.call(this, colIndex, rowIndex);
    return false;
};

当然，你也可以根据自己的条件来限制是否可以编辑。

结论：Extjs非常灵活，大家在了解Extjs的功能后可以多看看http://extjs.com/learn/Ext_FAQ，以便实现你所需要的功能。