1

ユーザーを選択するためのチェックボックス選択モデルを備えたグリッドパネルを含むフォームに取り組んでいます。送信後、ユーザー ID (およびその他のフォーム フィールド値) がサーバーに POST されます。これは完璧に機能します。

しかし、その特別な (カスタム) フィールドにカスタム検証を追加する必要があります。ユーザーが選択されていない場合は、エラー アイコンとエラー ツールチップ テキストを表示します。カスタム フィールド コンポーネントのスクリーンショットは次のとおりです。

カスタム フォーム フィールド - チェックボックス選択モデルを使用したユーザー グリッド

画像内でわかるように、タイトル ( によってxtype: label作成) と、現在テキストのないラベル (赤い四角形でマークされた領域) とグリッド自体で埋められている空のスペースがあります。ユーザー (またはそれ以上) を選択すると、その空のラベルに名前 (空白のデータ) が表示されます。

しかし、検証のプロセス内で、ユーザーが選択されていない場合、ここのどこかにツールチップ付きのエラー アイコンを表示する必要があります。

を使用して、選択したデータを確認できます

grid.getSelectionModel().getSelection().length > 0 ? true : false

したがって、選択が有効かどうかはわかりますが、そのエラーアイコンを表示する方法も、どこに表示するのが最適なのかもわかりません。そのアイコンの最適な位置は、セクション タイトル ラベル内である必要があると思います (左でも右でも、それほど重要ではありません)。

そのアイコンを表示する方法についてのヘルプは大歓迎です!

4

1 に答える 1

2

誰も答えず、自分で解決策を見つけたので、誰かがより良いアプローチについて教えてくれるように、ここに置きたいと思います.

なので検証後

if(grid.getSelectionModel().getSelection().length > 0) {
    // valid, let's submit the form...
} else {
   // invalid, let's show the error hint
}

具体的なラベルに対処し、そのテキストを設定するだけで済みます。次の呼び出しによってエラー アイコンが表示されるときと同じ具体的な HTML マークアップを追加しますform.isValid()。

label.setText(myPreviousText
    + '<span role="presentation" class="x-form-error-msg x-form-invalid-icon" data-errorqtip="&lt;ul class=&quot;x-list-plain&quot;&gt;&lt;li role=&quot;alert&quot;&gt;'
    + 'MY ERROR MESSAGE'
    + '&lt;/li&gt;&lt;/ul&gt;" style="display: inline-block;"></span>', false);

これで、スタイル付きのヒント付きのエラー アイコンが表示されます。イベントでラベル テキストを元に戻し (有効に戻して)、grid.selectイベントで再度有効性を確認しgrid.deselectます。

于 2013-08-27T08:14:52.293 に答える