Sencha Touch - データビュー内にカルーセルまたは水平スクロール？

Question

私は、最新の（Sencha Touch）ツールキットを使用するExtJS 6.0.2アプリを持っています。

私はデータビューを持っています。スワイプすると、いくつかのアクションボタンが表示されます。たとえば、iOSのGmailアプリに似ています。

現在、私はXTemplateに2つのdivを持っていますが、最初は1つが表示され、もう1つは非表示のままです。スワイプすると最初のdivが隠され、div.style.displayを更新して2番目のdivを表示します。これは、隠れたdivがアニメーション化されていないことを除いてうまく動作し、カルーセルコンポーネントのようにスワイプしているときには表示されません。

スワイプを使用して別のdiv要素をビューにスライドするために、カルーセルを追加したり、データビューの各レコードに対して水平スクロールを有効にする方法はありますか？

ありがとうございました！

Answer 1

これは問題を解決するようです。

Ext.create('Ext.dataview.DataView', { 
     fullscreen: true, 
     itemTpl: 
      '<div style="height: 64px; border-bottom:1px solid black;">{name}</div>', 
     data: data, 
     listeners:{ 
      swipe:{ 
       element:'element', 
       delegate:'.x-dataview-item', 
       fn:fn:function(event,target){ 
        if(event.direction==='left'){ 
         var target=Ext.get(target); 

         var button=Ext.create('Ext.Button',{ 
          text:'Boo', 
          height:64, 
          width:200, 
          floated:true, 
          handler:function(button){this.hide()}, 
          showAnimation:{ 
           type:'slideIn', 
           from: { 
            top: target.getY() 
           }, 
          }, 
          hideAnimation:{ 
           type:'slideOut', 
           direction:'right' 
          } 
         }); 
         this.add(button); 
         button.show(); 
        } 
       } 
      } 
     } 
    }); 

唯一の問題は、スクロールに対応していないことです。これをサポートする必要があるかどうかは不明です。あなたはスクロールしようとすると、スクロールを再配置したり、スクロールを開始するときに表示されているボタンを非表示にすることができます。