Extjs sencha touch中的可滚动面板

我做了一个面板，上面有很多按钮

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个按钮。 我希望这个面板可以滚动，这样我就可以通过向下滚动来显示所有按钮，我已经设置了属性可滚动：“垂直”，但它不起作用。 当我移除所有按钮的位置时，如top:50%滚动正常工作，但我希望所有按钮都位于正确的位置。 如何解决此问题？

根据文档：

顶部：数字/字符串 该部件的绝对顶部位置；必须是有效的CSS长度值，例如：300、100px、30%等。显式设置此值将使此组件变为“浮动”，这意味着其布局将不再受其所在容器的影响。

尝试设置样式配置：

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'
    }]

---

似乎适合我。

我要做的是添加多个样式？就像我想在单一样式中设置页边距顶部和页边距左侧一样。@master style:'margin-top:10%；左边距：20%；“，