4

エディター グリッドを使用したバッファー ストア。

バージョン 4.1.1 を使用しており、4.2.0.663 に移行しています。大量のデータを含むバッファー ストアを備えたエディター グリッドがあります。エディター グリッドは、行編集の例と似ています (バッファー ストアを使用する点を除いて)。しかし、移行後にグリッドの追加機能が停止し、エラーが発生します

Ext.Error: バッファリングされたストアへの挿入操作はサポートされていません。

var rowEditing = Ext.create('Ext.grid.plugin.RowEditing', {
        clicksToMoveEditor: 1,
        autoCancel: false
    });
// create the grid and specify what field you want
// to use for the editor at each column.
var grid = Ext.create('Ext.grid.Panel', {
    store: store,
    columns: [{
        header: 'Name',
        dataIndex: 'name',
        flex: 1,
        editor: {
            // defaults to textfield if no xtype is supplied
            allowBlank: false
        }
    }, {
        header: 'Email',
        dataIndex: 'email',
        width: 160,
        editor: {
            allowBlank: false,
            vtype: 'email'
        }
    }, {
        xtype: 'datecolumn',
        header: 'Start Date',
        dataIndex: 'start',
        width: 90,
        editor: {
            xtype: 'datefield',
            allowBlank: false,
            format: 'm/d/Y',
            minValue: '01/01/2006',
            minText: 'Cannot have a start date before the company existed!',
            maxValue: Ext.Date.format(new Date(), 'm/d/Y')
        }
    }, {
        xtype: 'numbercolumn',
        header: 'Salary',
        dataIndex: 'salary',
        format: '$0,0',
        width: 90,
        editor: {
            xtype: 'numberfield',
            allowBlank: false,
            minValue: 1,
            maxValue: 150000
        }
    }, {
        xtype: 'checkcolumn',
        header: 'Active?',
        dataIndex: 'active',
        width: 60,
        editor: {
            xtype: 'checkbox',
            cls: 'x-grid-checkheader-editor'
        }
    }],
    renderTo: 'editor-grid',
    width: 600,
    height: 400,
    title: 'Employee Salaries',
    frame: true,
    tbar: [{
        text: 'Add Employee',
        iconCls: 'employee-add',
        handler : function() {
            rowEditing.cancelEdit();

            // Create a model instance
            var r = Ext.create('Employee', {
                name: 'New Guy',
                email: 'new@sencha-test.com',
                start: Ext.Date.clearTime(new Date()),
                salary: 50000,
                active: true
            });

            store.insert(0, r);
            rowEditing.startEdit(0, 0);
        }
    }],
    plugins: [rowEditing],
});

どのようなアプローチを取るべきかアドバイスをお願いします。

4

3 に答える 3

2

行編集プラグインにも同様の問題があります。この問題は、変更されたバッファリングされたストア内部に関連しているようです。この問題を解決するには、次のことができます。

  1. 行編集プラグインを拡張し、データの挿入方法を変更します。データの現在のページのリロードを挿入した後など...
  2. バッファリングされたストアの使用から、グリッドの bufferedrenderer プラグインの使用に切り替えます。ここで見つけることができるこのプラグインの簡単な概要: bufferedrenderer
  3. より深い調査を行ってください。バッファリングされたストアを削除しなくても解決策がある可能性があります。

私の場合、ExtJs 4.2 のバッファリングされたストアの変更ですべてを明確にしない限り、2 番目の方法を選択します...

更新: 4.2 では、バッファリングされたストアの機能が制限されているようです。そして、彼らはまだバグがあります。今この問題があります: commit bug

于 2013-05-15T12:57:51.070 に答える
2

注意すべきことの 1 つは、バッファリングされていないストアを作成する回避策は、コードを介して実行できる場合はうまく機能しますが、この機会を得られないグリッド編集の要素がいくつかあることです。たとえば、セルまたは行の編集プラグインを使用する場合などです。 4.2 では、バッファリングされたストアを持つグリッドでは機能しなくなりました。

最終的に、バッファリングされたストア機能を取り戻すために 4.1 に戻ることになりました。再度アップグレードする前に、将来の ExtJS の更新で何が起こるかを監視します。大規模なリモート データベース (ページの読み込み中に DB 全体を読み取ることができない) でバッファ ストアを使用している場合は、4.2 へのアップグレードを慎重に検討することをお勧めします。

于 2013-07-29T17:49:54.007 に答える
2

Ext Js 4.2 に移行した後も、この問題が発生しました。バッファリングせずにバッファリングされたストアの一時コピーを作成することで解決しました。これをコードに適用すると、次のようになります。

tbar: [{
    handler : function() {
        rowEditing.cancelEdit();

        // Create a model instance
        var r = Ext.create('Employee', {
            name: 'New Guy',
            email: 'new@sencha-test.com',
            start: Ext.Date.clearTime(new Date()),
            salary: 50000,
            active: true
        });

        var storeClassName = Ext.getClassName(store);
        var tempStore = Ext.create(storeClassName, { buffered: false });
        tempStore.add(r);
        tempStore.sync({
            success: function(args) {
                 // reload your grid and scroll to the position of the new record 
                 // e.g.
                 store.data.clear();
                 store.load({
                      success: function() {
                           grid.view.bufferedRenderer.scrollTo(args.response.indexOfNewRecord, true);
                           rowEditing.startEdit(0, 0);
                      }
                 });                     
            }
        });
    }
}],

欠けているのは、インデックスの定義です。Web サービスからの同期応答で取得するので、データセット全体のインデックスの位置までスクロールできます。

于 2013-06-13T12:19:50.040 に答える