如何在sencha touch中垂直滚动?

时间:2013-06-12 10:17:30

标签: javascript sencha-touch

我正在使用sencha touch carousel,我正在使用水平滑动。哪个效果很好。 但在此我正在使用我想垂直滚动的面板(将每个页面滚动到底部)。怎么做?我给出了滚动:每个面板中的“垂直”如下:

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 vertical scroll content in a horizontal carousel。根据这个stackoverflow答案,我们可以在水平轮播中垂直滚动子内容,像我这样的问题。但我在这里做同样的事情,我不能滚动。 我的子面板包含vbox和hbox布局。

有人可以回答我的问题吗?

2 个答案:

答案 0 :(得分:7)

试试这个,它对我有用,我从sench forum

得到它

在面板中设置可滚动配置

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]...............});

请参阅此fiddle

答案 1 :(得分: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 docs的任何实时预览中尝试此操作 希望这有帮助