複数のリストを持つページ内のリスト項目をスクロールする方法

Question

1つの項目が選択されているときに他の項目では選択できない3つのリストがページにあります。私は、そのページに移動するときに、選択されたリストアイテムに焦点を当てたコードを書いています。今、問題は焦点が合っておらず、addEventDelegateがリストのために働いていないということです。フォーカスコードが実行され、再びスクロールバーが上に移動しています。

当初、私は次のように試してみました：それは動作しませんでした

tList.addEventDelegate({ 
    onAfterRendering: function() { 
     debugger; 
     var a = sap.ui.getCore().byId("typesList").getSelectedItems()[0]; 
     if(a != undefined) { 
      $("#"+a.sId)[0].focus(); 
     } 
    } 
}, this) 
cList.addEventDelegate({ 
    onAfterRendering: function() { 
     debugger; 
     var a = sap.ui.getCore().byId("catList").getSelectedItems()[0]; 
     if(a != undefined) { 
      $("#"+a.sId)[0].focus(); 
     } 
    } 
}, cList) 
sList.addEventDelegate({ 
    onAfterRendering: function() { 
     debugger; 
     var a = sap.ui.getCore().byId("statList").getSelectedItems()[0]; 
     if(a != undefined) { 
      $("#"+a.sId)[0].focus(); 
     } 
    } 
}, sList) 

。 onAfterRenderingは決して解雇されません。私はこれを試してみました：

onRouteMatched: function(oEvent) { 
    debugger; 
    var tList = sap.ui.getCore().byId("typesList"); 
    var cList = sap.ui.getCore().byId("catList"); 
    var sList = sap.ui.getCore().byId("statList"); 
    var typesItem = sap.ui.getCore().byId("typesList").getSelectedItems()[0]; 
    if(typesItem != undefined) { 
     $("#"+typesItem.sId)[0].focus(); 
    } 
    var catItem = sap.ui.getCore().byId("catList").getSelectedItems()[0]; 
    if(catItem != undefined) { 
     var i = cList.indexOfItem(catItem); 
     //$("#"+catItem.sId)[0].focus(); 
     cList.getItems()[i].focus(); 
    } 
    var statItem = sap.ui.getCore().byId("statList").getSelectedItems()[0]; 
    if(statItem != undefined) { 
     $("#"+statItem.sId)[0].focus(); 
    } 
} 

それがうまく働いていますが、スクロールバーは、このコードを実行した後、ビューの上部に移動され、なぜ私にはわかりません。

提案がありますか？

Answer 1

使用.getDomRef().focus()

あなたは、リスト項目にスクロールしようとして注意する必要があります。あなたのビュー、リスト、または アイテムがDOMにレンダリングされていない場合、これはエラーになります。だから、それを防ぐためにいくつかのコードを書いてください。

以下の例では、選択したリスト項目のDOM参照が存在するかどうかを確認します。表示されている場合は、.focus()に電話をかけてスクロールしてください。 DOM参照が存在しない場合は、リストがレンダリングされた後に呼び出されるリストにイベントデリゲートを追加し、選択された項目にスクロールします。

_scrollToListItem: function() { 
    var oItemDomRef = this.getView().byId("list").getSelectedItem().getDomRef(); 
    if (!oItemDomRef) { 
     this.getView().byId("list").addEventDelegate({ 
      onAfterRendering: function() { 
       this._scrollToListItem(); 
      }.bind(this) 
     }); 
    } else { 
     oItemDomRef.focus(); 
    } 
}