4

我做了一个面板，里面有很多按钮，就像这样，

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

4

1 回答 1

0

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

top : Number/String 该组件的绝对顶部位置；必须是有效的 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'
    }]

似乎对我有用。

于 2013-03-23T12:05:07.097 回答