4

ユーザーが構成可能な一連の列を持つextjsグリッドパネルを作成しています。このコンポーネントは、まさにこの目的のためExt.grid.Panelの便利なメソッドを提供します。reconfigure(store, columns)

このメソッドは、グリッドを完全に破棄して再作成することなく、グリッドのストア/列を再構成するために期待どおりに機能します。ただし、Ext.grid.plugins.RowEditingプラグインを使用してインライン行編集を提供している場合、グリッドが新しい列で再構成された後、列が同期しなくなります。

RowEditing プラグインはすでに列の追加/削除/サイズ変更を監視し、それらを正しく処理しているため、これは特にイライラします。これは、ExtJ の現在の 4.1 リリースで見落とされているだけだと思います。

私が望むのは、グリッドが新しい列で再構成されたときに、グリッド/ビューを破棄/再作成せずに、RowEditor がエディターのリストと幅を更新することです。

多くのグーグル検索の後、インライン編集をサポートする簡単に再構成可能な列リストを探しているのは私だけではないようです。

4

2 に答える 2

10

は、メソッドが呼び出されExt.grid.Panelた後に発生する「再構成」イベントを提供します。reconfigure()ただし、ExtJs の現在の 4.1 リリースでは、RowEditing プラグインはこのイベントにフックしません!

自分たちで重い物を持ち上げる必要があるようです。最終的なコードにたどり着くまでに数時間かかりましたが、最終的な解決策はかなり単純です。

RowEditing プラグインは、RowEditor コンポーネントのインスタンスを作成します (わかりましたか? この 2 つを別々に覚えておいてください。名前は似ていますが、コンポーネントは異なります)。RowEditing プラグインは、行エディタなどを表示するタイミングを知るために必要なイベントにフックするグリッドに結び付けるものです。RowEditor は、グリッドでのインライン編集のために行の上にポップアップするビジュアル コンポーネントです。

最初に、行エディタの再構成を試みましたが、おそらく十数通りの方法がありました。内部メソッド、init メソッド、サイズ変更メソッドなどを呼び出してみました。すると、アーキテクチャの良い点に気付きました。RowEditor インスタンスへの単一の内部参照があり、必要に応じて行エディターと遅延ロードを取得するメソッドがあります。それが鍵でした！

RowEditing プラグインを破棄せずに RowEditor を破棄して (プラグインを動的にロード/アンロードすることはできません)、RowEditor を再作成できます。

もう 1 つ落とし穴があります。Ext グリッドの編集プラグインは、各列にいくつかの拡張メソッドを追加し、各列の正しいエディター タイプを取得/設定するために使用されますgetEditor()。setEditor()グリッドを再構成すると、適用された拡張メソッドはすべて「なくなり」ます (これらのメソッドが適用されていない新しい列がいくつかあります)。initFieldAccessors()そのため、プラグインでメソッドを呼び出して、これらのアクセサー メソッドを再適用する必要もあります。

グリッド パネルの再構成イベントのハンドラーは次のとおりです。

/**
* @event reconfigure
* Fires after a reconfigure.
* @param {Ext.grid.Panel} this
* @param {Ext.data.Store} store The store that was passed to the {@link #method-reconfigure} method
* @param {Object[]} columns The column configs that were passed to the {@link #method-reconfigure} method
*/
onReconfigure: function (grid, store, columnConfigs) {
    var columns = grid.headerCt.getGridColumns(),
        rowEditingPlugin = grid.getPlugin('rowEditor');

    //
    // Re-attached the 'getField' and 'setField' extension methods to each column
    //
    rowEditingPlugin.initFieldAccessors(columns);

    //
    // Re-create the actual editor (the UI component within the 'RowEditing' plugin itself)
    //
    // 1. Destroy and make sure we aren't holding a reference to it.
    //
    Ext.destroy(rowEditingPlugin.editor);
    rowEditingPlugin.editor = null;
    //
    // 2. This method has some lazy load logic built into it and will initialize a new row editor.
    //
    rowEditingPlugin.getEditor();
}

構成リスナーを使用して、これをグリッド パネルに添付しました。

listeners: {
    'reconfigure': Ext.bind(this.onReconfigure, this)
}
于 2012-08-15T03:49:04.270 に答える
1

この問題はその後、最新の ExtJS バージョンで修正されたようです。バージョン 4.1.1a には、少なくとも Ben Swayne の実装と同様の機能が統合されています。

于 2013-02-07T20:10:58.447 に答える