私のページには、展開する前にノードを非同期的にロードするツリー ビューがあります。ノードがロードされるのを待っている間に、標準の「ロード中」gif を表示する方法がわかりません。それが標準的な動作であることは理解していますが、単に機能しません。おそらくそれはいくつかのcssの問題です..
私のページは、次のように css を参照しています。
<link href="Scripts/app/ext-4/resources/ext-theme-classic/ext-theme-classic-all-debug.css" rel="stylesheet" />
他のすべてが正しくレンダリングされているため、そこにあることがわかります。その css ファイルには、次のクラスがあります。
.x-grid-tree-loading .x-tree-icon {
background-image: url('images/tree/loading.gif');
}
background-color: #ff0000;
の代わりに配置するとbackground-image: url('images/tree/loading.gif');
、アイコンが表示される場所が赤い背景になるため、このクラスが使用されていると確信しています。アイコンの URL は CSS の場所に対して相対的に設定する必要があることを理解しています。これは私のファイル構造の一部です:
- スクリプト
- アプリ
- ext-4
- 資力
- ext テーマ クラシック
- 画像
- 木
- 読み込み中.gif
- 木
- ext-theme-classic-all-debug.css
- 画像
また、次のような img タグを使用してそのアイコンを直接呼び出すと:
<img src="Scripts/app/ext-4/resources/ext-theme-classic/images/tree/loading.gif" />
読み込み中のアイコンは期待どおりに表示されます。
どんなアイデアでも大歓迎です!ありがとう!
編集:解決済み
何が問題なのかを理解することができました。ツリー ノードにカスタム アイコンを使用していたので (言及せずに申し訳ありませんが、関連性があるとは思いませんでした)、loading.gif がこれらのアイコンの下に何らかの形で表示されていました。それを解決するために、私は変更しました
.x-grid-tree-loading .x-tree-icon {
background-image: url('images/tree/loading.gif');
}
に
.x-grid-tree-loading .x-tree-icon {
background-image: url('images/tree/loading.gif') !important;
}