5

コントローラで更新されたセル値を取得(取得)する必要があります。(MVC)

だから私はこれを試しました、

var modified = this.getItemGrid().getStore().getUpdatedRecords();
console.log(modified); // return [] empty array

var modified = this.getItemList_Store().getUpdatedRecords();
console.log(modified); // return [] empty array

ただし、セルの値を更新しても、常に空の配列が返されます。

誰かが私が間違っていることを知っていますか?

これがビューコードの私の部分です、

Ext.define("App.view.orders.ItemList_view", {
    extend: "Ext.grid.Panel",
    alias: "widget.itemList_view",
    plugins: [
            Ext.create('Ext.grid.plugin.CellEditing', {
                clicksToEdit: 1
            })
    ],
    initComponent: function () {
        this.store = "ItemList_store";
        this.columns = [
            {
                xtype: 'checkcolumn', text: "Ship", width: 50, dataIndex: "DR"
            },
            { header: "test", width: 100, dataIndex: "test",
                editor: {
                    xtype : 'textfield'
                }
            }
        ];

        this.selModel = Ext.create("Ext.selection.CheckboxModel");
        //this.selModel = Ext.create("Ext.selection.CellModel"); // It does not works either.

        this.callParent(arguments);
    },
    .
    .
    .

ありがとうございました!

[編集]

ご回答どうもありがとうございました!エディターグリッドについてもう少し質問があります。

Ext3とは大きく異なります。だから私は今非常に混乱しています:(

Q1。編集した記録データを収集する方法(ボタンをクリック1回)?

グリッドセルが変更されると、イベントが発生します。ただし、[編集済みセルの更新]ボタンをクリックしたら、編集済みグリッドレコードを収集したいので、一度にすべてを更新したいと思います。

Ext3では、私はこのようにしました、

(button) click : function(){
    var modified = mygridStore.getModifiedRecords();

    var recordsToSend = [];
    Ext.each(modified, function(record){
        recordsToSend.push(record.data);
    });

    var grid = Ext.getCmp('grid');
    grid.el.mask('Updating','x-mask-loading');
    grid.stopEditing();

    recordsToSend = Ext.encode(recordsToSend);

    Ext.Ajax.request({
        url : '/test/test',
        params : {
            data : recordsToSend
        },
        success : function(response){
            grid.el.unmask();
            alert(response.responseText);
            mygridStore.commitChanges();
        },
        failure : function(response){
            mygridStore.rejectChanges();
        }
    });
}

Extjs4のコードを変更するにはどうすればよいですか?

Q2。変更されたチェック列を見つける方法がまだわかりません。

これを試しましたが、チェックボックスが機能しません(チェックボックスを変更した後にテストしたため)

// grid coumn
{
 xtype: 'checkcolumn', header: "My Check Column", width: 50, dataIndex: "CH"
}

-

// in control
'myGrid': {
    validateedit: function (plugin, edit) {
        console.log(edit);
    },
    checkchange: function (plugin, edit) {
        console.log(edit);
        console.log(edit.value);
    }
}

Q3。セルをクリックして編集すると、-_-;;にHTMLタグが表示されます。

ここに画像の説明を入力してください

本当にありがとうございました。貴重なお時間をありがとうございました!

4

3 に答える 3

10

編集者(セル編集者または行編集者)は、編集が完了するまで値をストアにコミットしません。つまりENTER、ページの他の場所をクリックするか、行編集者フォームの保存ボタンをクリックして、アクティブなセル編集者を押すかぼかします。

エディターで更新された値を読み取る目的が何らかの検証を実行することである場合は、ここでvalidateedit説明するように、グリッドのコントローラーでイベントをリッスンすることをお勧めします。

このイベントがハンドラーに渡す2番目の引数には、検証を実行できる編集に関する多くのデータが含まれています。編集が検証に合格しなかった場合はfalse、ハンドラーから戻ることができ、celleditorの値は元の値に戻ります。イベントはvalidateeditエディターグリッド自体から発生するため、次のようにコントローラーにイベントハンドラーを追加します。

Ext.define('MyApp.controller.MyController', {

    init: function() {

        this.control({

            'mygridpanel': {

                validateedit: function(plugin, edit) {

                    // silly validation function    
                    if (edit.value != 'A Valid Value') {
                        return false;
                    }
                },

            },

        });

    },

});

ただし、上記のリンクをチェックして、私が名前を付けた2番目の引数で使用可能なすべての異なるオブジェクトを確認する必要がありますedit

イベントは、validateeditレコードがストアにコミットされる直前ENTER、つまり、ユーザーがエディターをクリックまたはぼかした後、つまりエディターが閉じている間に発生します。

閉じ始める前にcelleditorの値を取得しようとしている場合、たとえば検証以外の理由で、次のようにアクティブなcelleditorの値を取得できます。

// myGrid is a reference to your Ext.grid.Panel instance
if (myGrid.editingPlugin.editing) {
    var value = myGrid.editingPlugin.getActiveEditor().field.value

    console.log('value: ' + value);
}

アクティブなエディターがない場合はmyGrid.editingPlugin.getActiveEditor().fieldエラーがスローされるため、条件付きでラップしました。

validatorもう1つのポイントは、エディターグリッドでの検証のために、グリッド列のeditor定義に構成を配置するのが最も簡単であることがわかりました。これにより、ユーザーがフィールドの値を設定しているときに便利な検証CSSがすべて提供され、値に問題がある場合は、保存する前に警告が表示されます。

私が何を意味するのかを理解するには、この例の日付列に文字を入力してみてください。エディターセルにマウスを合わせると、エラーメッセージが表示されます。

編集

私はあなたの元の質問を誤解したようですが、上記のあなたの質問に対する私の答えを分解します、

質問1

編集(クリックまたは)が完了すると、レコードがストアにコミットされるため、ENTERへの呼び出しは正常に機能するmygridStore.getModifiedRecords()はずです。それが機能していなかったことがわかります。これについては後で説明します。

ExtJS4には、ここでstore.sync()説明するようなメソッドがあることを指摘しておく必要があります。

変更されたレコードをストアから抽出してエンコードし、手動でajaxリクエストを実行してサーバーに保存してから手動でコミットする代わりに、このsyncメソッドを呼び出すことができます。これにより、これらすべてのアクションが自動的に処理されます。

loadストアとメソッドによって実行されるさまざまな作成、読み取り、更新、破棄操作を処理するためのさまざまなURLがある場合はsync、ストアのプロキシ構成を使用して、ここでapi説明するようにURLをこれらの操作にマップできます。または、サーバー側のコントローラーを設定して、ストアのリクエスト(読み取り操作のデフォルトはHTTP GET)と同期リクエスト(作成、更新、削除の操作のデフォルトはHTTP POST)を区別できるようにすることもできます。load

サーバー側でこれを行うには、さまざまな方法があります。私が通常行う方法は、任意のストアのGET要求用に1つのSQLストアドプロシージャを使用し、POST要求用に1つのSQLストアドプロシージャを使用することです。追加のパラメーターとしてストア名を含めると、サーバー側のコントローラーは、GET要求かPOST要求かに基づいて、適切なストアドプロシージャを実行します。

質問2

セル編集は編集をサポートしていませんcheckcolumn。その変更をリッスンするには、次のような別のハンドラーを作成する必要があります。

checkchange: function (column, rowIndex, checked) {
    var record = store.getAt(rowIndex),
        state = checked ? 'checked' : 'unchecked'

    console.log('The record:');
    console.log(record)
    console.log('Column: ' + column.dataIndex);
    console.log('was just ' + state)
}

への呼び出しでmygridStore.getModifiedRecords()もチェックの変更を取得できるはずですが、チェックされた後すぐにグリッドのストアにコミットされます。store.sync()また、checkcolumnへの変更を取得します。

質問3

何がその問題を引き起こしているのか完全にはわかりませんが、validateeditイベントで何か奇妙なことが起こっている可能性があります。ハンドラーはtrueまたはfalseを返す必要があります。

さっきも言ったように、あなたが最初にこの質問をした理由を誤解しました。編集の進行に、ある種の検証を行おうとしていると思いました。データベースに保存するためにすべての編集が完了した後、変更されたすべてのレコードをストアから取得しようとしていることを理解しました。ExtJS4では、ストアは通常、sync私が述べたように方法。

つまり、変更されたレコードのリストを取得するためにvalidateeditイベントやイベントは必要ありません。checkchange

あなたが抱えている実際の問題は、いくつかの4.07バージョンでストアのgetterメソッド( getModifiedRecords、 )に問題がある可能性があります。この投稿これを見てください。getUpdatedRecords

とはいえ、私があなたに与えることができる最善のアドバイスは、1)変更されたデータをデータベースに保存するためのstoresメソッドを試してみてくださいsync。2)ExtJS 4.1にアップグレードすると、4.07と4.1の間で修正された多くのバグがありました。これを利用できるはずですが、4.1に切り替えたときに機能させるために使用していたオーバーライドの約75%を切り取りました。

于 2012-06-25T21:27:36.357 に答える
1
EditedGrid.plugins[0].completeEdit();

これにより、アクティブな変更がコミットされ、編集イベントも呼び出されます。

于 2014-06-05T07:57:00.130 に答える
0
listeners: {
    validateedit: function (editor, e) {
        //console.log(editor);
    var oldVal = editor.originalValue;
    var newVal = editor.value;
    }
}
于 2013-03-24T11:46:19.957 に答える