ホームページ >ウェブフロントエンド >jsチュートリアル >Extjs リストの詳細ウィンドウを作成後に自動的にロードするソリューション_extjs

Extjs リストの詳細ウィンドウを作成後に自動的にロードするソリューション_extjs

WBOY
WBOYオリジナル
2016-05-16 18:30:351069ブラウズ

Extjsでは、現在のページのグリッドページに新しいデータ行を作成した後、フォームから詳細ページの編集を入力し、自動的に詳細ページを開いて編集できるようにしました。 3 時間を費やして、最終的に Extjs の最適な解決策を見つけました。結果はわずか 3 文ですが、おそらくこれは多くの Extjs 愛好家が知りたいこと、またはすでに知っていることだと思います。そのため、これを共有します。 extjs コミュニティのアイデアに私自身のアイデアを貢献してください。

リストの作成後、通常はプロンプトが表示されます。結果を直接確認したい場合は、最後の計画までスキップしてください。 >
オプション 1 (放棄)。新しいデータを作成した後、id 値を createform メソッドに送信します。これは一般の Web 開発者が最初に考える方法かもしれません。詳細ページにパラメータを渡し、詳細は ID を元にライブラリから該当するデータを検索してページに表示します。しかし、調査の結果、ページは現在のページのサブウィンドウを介して表示されており、2番目を表示したい場合は、グリッドの各行のデータを介してサブウィンドウのデータが渡されることがわかりました。 -level ページでは、まずデータをグリッドに表示する必要があり、値全体をレコードとして渡します。データを追加した後、リスト自体を更新する必要があります。リスト内の最新のデータを直接読み取って、それを直接渡す方が良いでしょう。これで 2 番目の計画になります ~

計画 2 (成功しました)。データが作成され、リストが更新された後、リスト内の最初の項目 (作成時間に従って並べ替えられるため) を選択状態に設定し、最初の項目をクリックするのと同じである onEdit メソッドを呼び出します。グリッド内のデータの行を編集し、[編集] ボタンをクリックすると、効果が得られます (追記: 私は非常に才能があるのでしょうか?)。データを保存した後、grid.selModel.selectRow(0) を呼び出し、次に Grid.onEdit() (独自に定義した編集メソッド。grid.getSelectionModel().getSelected() を通じて選択した行を取り出し、渡します)フォームのパラメータ)、ここで直接選択すると、選択したリストが更新される前の最初の項目になることに注意してください(必要な更新後の最初の項目ではありません)~~ ストアの負荷が読み込まれるため非同期で、笑、ここでは、次のようにこれら 2 つのメソッドを setTimeout 関数に入れる必要があります:

コードをコピー コードは次のとおりです:
setTimeout(function(){
Ext.getCmp("gridPanel").sm.selectRow(0);
Ext.getCmp("gridPanel")。 onEdit() ;
},300);

遅延を設定してから、選択および編集メソッドを実行するだけです。 this.grid の代わりに getCmp を使用していることに気づきましたか? js の setTimeout のスコープはグローバルであるため、ここでローカル変数が使用されると、js は「未定義のオブジェクトまたはメソッド」というエラーを報告します。ただ、使ってみると遅延時間が少し長く感じられ、遅延があるとどうしても不快に感じてしまうのですが、この機能を使わないとダメなのでしょうか?それ以来、究極の計画がリリースされようとしています!これは私が苦労して見つけた方法です、ちょっとご都合主義な気がします、笑わないでください、笑〜
私も最近 Extjs を勉強したばかりの初心者です。 js にあまり詳しくないので、経験豊富な人にとっては、これらの小さな問題は些細なことであり、真剣に受け止められることはないと思いますが、専門家はそれを無視して私のとりとめのない話を聞いてくれないので、それでも私は達成感を感じます。はは~
オプション 3 (最良) Extjs メッセージ ウィンドウのコールバック関数でリストを選択し、詳細を開きます。これが私の最善の解決策です。 Ext が Ext.Msg.alert() メソッドに 4 つのパラメータ、つまり title、msg、fn、scope を提供していることがわかったためです (参考ブログ投稿を参照)。このうち fn はコールバック関数ブロックの内容であり、これは次のようになります。ボタンをクリックした後に呼び出される関数をコールバック関数に記述しました。これにより、読み込みの遅延とユーザー エクスペリエンスという 2 つの大きな問題が解決されました。

コードをコピー コードは次のとおりです。
Ext.Msg.alert("プロンプト メッセージ", " 正常に作成されました。詳細情報を入力してください。", function() {
this.grid.sm.selectRow(0);
this.grid.onEdit();
}, this);

コードはほんの数行に見えますが、この解決策を見つけるために、私は何十回も試し、デバッグしました。便利です。いいねすることを忘れないでください~
問題を解決する過程で、次のブログ投稿を参照しました:
ExtJS Ext.MessageBox.alert() ポップアップ ダイアログ ボックスの詳細な説明
声明:
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。