web-dev-qa-db-ja.com

ExtJS 4 RowEditingは、レコードに基づいて1つの列の編集を無効にします

ほとんどの行で編集可能な最後の4つの列を持つグリッドパネルを実装しています。問題は、編集を無効にできるようにしたいことです。たとえば、record.get( 'status')= 4がファイナライズされ、2つの列のみが編集可能である場合の最初の例を考えてみましょう。

それらの行の編集の表示を無効にする方法はありますか? CellEditingを使用して実行できますが、RowEditingプラグインを引き続き使用したいと考えています。

よろしく、クリスチャン

21
Asken

beforeedit イベントを使用:

grid.on('beforeedit', function(editor, e) {
  if (e.colIdx === 0 && e.record.get('status') == 4)
    return false;
});

[〜#〜]更新[〜#〜]
上記のソリューションは、rowEditorでは機能しません。
ただし、beforeeditで必要なフィールドを無効にすることができます。これを行うには、行編集プラグインにアクセスできる必要があります。 pluginIdをプラグインに割り当てます。

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

次に、いくつかの条件が満たされた場合に必要なフィールドを無効にします。

grid.on('beforeedit', function(editor, e) {
    if (e.record.get('status') === 4 ){
         grid.getPlugin('rowEditing').editor.form.findField('fieldToDisable').disable();
    }
    else{
        grid.getPlugin('rowEditing').editor.form.findField('fieldToDisable').enable();
   });

これが demo です(最初の行を編集してみてください)。

編集

上記のJSFiddleが機能しない場合は、 その更新バージョン を試してください。

38
Molecular Man

(前の例に基づく)別の方法は、エディターのbeforeeditリスナーを構成することです。

listeners: {
    beforeedit: function(editor, context) {
        var form   = editor.getEditor().form;
        var field  = form.findField('column_name');
        var status = parseInt(context.record.data.status);
        if(status === 4){field.disable();} else {field.enable();}
    }
}
1
Martin Zeitler