在sencha触摸的可滚动面板

Question

我已经制作了一个包含多个按钮的面板，

Ext.define('BeLocal.view.Test', {
       extend: 'Ext.Panel',

       config: {
       fullScreen: true,
       height: 482,
       width: 324,
       scrollable: 'vertical',
       items: [
               {
               xtype: 'button',
               text: 'MyButton1'
               },
               {
               xtype: 'button',
               top: '30%',
               text: 'MyButton2'
               },
               {
               xtype: 'button',
               top: '50%',
               text: 'MyButton3'
               },
               {
               xtype: 'button',
               top: '96%',
               text: 'MyButton4'
               },
               {
               xtype: 'button',
               top: '110%',
               text: 'MyButton5'
               }
               ]
       }

       });

我现在只能显示3个按钮。 我希望这个面板可滚动，以便我可以通过向下滚动显示所有按钮，我已设置属性可滚动：'垂直'，但它不起作用。 当我删除所有按钮的位置，如顶部：50％滚动工作正常，但我希望所有按钮在正确的位置。 我该如何解决这个问题？

Answer 1

根据文件： http://docs.sencha.com/touch/2-1/#!/api/Ext.Button-cfg-top

  

top：Number / String   该组件的绝对顶部位置;必须是有效的CSS长度值，例如：300,100px，30％等。显式设置此值将使此组件变为“浮动”，表示其布局将不再受其所在的Container的影响英寸

尝试设置样式配置：

items: [{
        xtype: 'button',
        text: 'MyButton1'
    },{
        xtype: 'button',
        style:'margin-top: 10%;',
        text: 'MyButton2'
    },{
        xtype: 'button',
        style:'margin-top: 50%;',
        text: 'MyButton3'
    },{
        xtype: 'button',
        style:'margin-top: 96%;',
        text: 'MyButton4'
    },{
        xtype: 'button',
        style:'margin-top: 110%;',
        text: 'MyButton5'
    }]

似乎对我有用。