私はExt.form.Panel
内部を持っていますExt.window
。フォームの高さがウィンドウの高さよりも大きいため、ウィンドウを垂直スクロールします。
フォーム フィールドの検証時 (validitychange
イベント時) に、スクロールが一番上にジャンプします。
この動作を回避するにはどうすればよいですか?
私のフォームの1つがスクロールアップし、他のフォームがスクロールしなかった理由を理解しようとしました。レイアウト マネージャーを明示的に指定するのを忘れており、デフォルトのレイアウト マネージャー (アンカー) は有効性の変更時に一番上にスクロールされましたが、vbox
レイアウトはそうではありませんでした。すべてがまったく同じように見えましたが (vbox とalign: 'stretch'
)、エラーが表示されるか非表示になると動作が異なります。
私も同じ問題を抱えてる :(
私は不気味な回避策を作成しました(80%まで機能します)それでもトップにジャンプすることがあります。'form'のレイアウトのウィンドウがあることを知っておく必要があります。たとえば、xtypeが「form」の「fit」のレイアウトのウィンドウがある場合は、コードを少し変更する必要があります。たとえば、行el.child( "。x-window-body"、fasle)は機能しません。
init: function() {
this.control({
...
/** My Ext.window.Window is called reservationwindow **/
'reservationwindow': {
afterrender: function(comp) {
// comp is this Ext.Component == wrapper
var el = comp.getEl();
//extjs adds the scrollbar to the body element...
var elForm = el.child(".x-window-body", false);
// or el.child(".x-panel-body", false);
//we are listinig to the scroll-event now
this.myFormEl = elForm;
this.safeScroll = {top:0, left:0};
elForm.on('scroll', function() {
console.log("save");
this.safeScroll = this.myFormEl.getScroll();
}, this);
elForm.on('click', function() {
var resWin = this.getResWin();
resWin.scrollBy(0,this.safeScroll.top,false);
console.log("reset");
}, this);
elForm.on('keyup', function() {
var resWin = this.getResWin();
resWin.scrollBy(0, this.safeScroll.top, false);
console.log("reset");
}, this);
}
ご覧のとおり、私はスクロールイベントを聞いており、安全でスクロールバーをリセットしています。時々(特にテキストボックスに非常に速く書いている場合)、イベントは異なる順序で来て、ページはまだ一番上にジャンプします。また、ちらつきが見られることもあります(元の位置に戻すのに時間がかかりすぎる場合)。
だから....私が言ったように、それは不気味な回避策です。より良い解決策を見つけたら、私に知らせてください。
編集
また、textareafieldのgrowオプションが問題の原因の1つであることがわかりました。
{
id: this.id + '-details',
xtype: 'textareafield',
// grow: true, now it isn't jumping
name: 'message',
fieldLabel: 'Zusätzliche Informationen',
labelAlign: 'top',
renderder: 'htmlEncode',
disabled: isDisabled,
anchor: '100%'
}