2

私は水平スワイプを使用している煎茶タッチカルーセルを使用しています。これは完璧に機能します。しかし、その中で私は垂直にスクロールしたいパネルを使用しています(各ページを一番下までスクロールします)。どうやってするか？次のように、各パネルに scroll:'vertical' を指定しました。

var myFirstPage = Ext.Panel({
      id:'tableId',
          iconCls:'myToolBar',
          style:'overflow:auto;' ,
          scroll:'vertical',
          items:.........});
Ext.setup( {
    onReady: function() {
      myCarouselId = new Ext.Carousel({
        fullscreen: true,
        id:'myCar',

        items : [ myFirstPage]...............});

しかし、パネルを一番下までスクロールできません。どこが間違っていますか？

水平カルーセル内の Sencha touch 垂直スクロール コンテンツ。このスタックオーバーフローの回答に従って、子コンテンツを水平カルーセルで垂直にスクロールできます。私のような同じ問題です。しかし、私はここで同じことをしていますが、スクロールできません。私の子パネルには vbox と hbox レイアウトが含まれています。

誰かが私の質問に答えることができますか?

4

2 に答える 2

7

これを試してください、それは私にとってはうまくいきました.senchフォーラムから入手しました

パネルでスクロール可能な構成を設定します

scrollable : {
      direction     : 'vertical',
      directionLock : true
}

例

var myFirstPage = Ext.Panel({
          id:'tableId',
          iconCls:'myToolBar',
          scrollable : {
            direction     : 'vertical',
            directionLock : true
         },
        items:.........});

Ext.setup( {
    onReady: function() {
      myCarouselId = new Ext.Carousel({
        fullscreen: true,
        id:'myCar',
        items : [ myFirstPage]...............});

このフィドルを参照してください

于 2013-06-17T06:16:34.133 に答える
0

編集:パネル内で「hbox」の使いやすさが必要な場合は、その幅をコンテナー内に合わせる必要があります。
独自のスクロールバーを作成する必要がある場合、作成に失敗します。

必要なのは、スクロールを別の方法で定義することです。

scrollable: {
    direction: 'vertical',
    directionLock : true
}

このような：

    var carousel = Ext.create('Ext.Carousel', {
fullscreen: true,
items : [ 
    {  xtype: 'panel',     
       scrollable: {
         direction: 'vertical',
         directionLock: true
       },
       html: 'This panel is scrollable!',
       items: [{
                xtype: 'textfield',
                name : 'first',
                label: 'First'
            },
            {
                xtype: 'textfield',
                name : 'second',
                label: 'Second'
            },{
                xtype: 'textfield',
                name : 'third',
                label: 'Third'
            },{
                xtype: 'textfield',
                name : 'first1',
                label: 'First1'
            },
            {
                xtype: 'textfield',
                name : 'second1',
                label: 'Second1'
            },{
                xtype: 'textfield',
                name : 'third1',
                label: 'Third1'
            },{
                xtype: 'textfield',
                name : 'first12',
                label: 'First12'
            },
               { xtype: 'panel',
                layout: 'hbox',
                width: 200,
                items: [{
                    xtype: 'textfield',
                    name : 'first-box',
                    label: 'First-box'
                },
                {
                    xtype: 'textfield',
                    name : 'second-box',
                    label: 'Second-box'
                },{
                    xtype: 'textfield',
                    name : 'third-box',
                    label: 'Third-box'
                }]
           }, {
                xtype: 'textfield',
                name : 'second12',
                label: 'Second12'
            },{
                xtype: 'textfield',
                name : 'third12',
                label: 'Third12'
            }]
    }, {
       xtype: 'panel',
       scroll:'vertical',  // will not work
       html: 'This panel is not scrollable!',
    }]
});

これは、 sencha ドキュメントのライブ プレビュー内で試すことができ
ます。

于 2013-06-17T06:04:08.197 に答える