Scrollable panel in sencha touch

Question

i had made a panel with number of buttons in it like this,

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

       });

i can show only 3 buttons now. i want this panel scrollable so that i can show all the buttons by scrolling it down, i had set property scrollable: 'vertical' , but it doesn't work. When i remove position of all buttons like top:50% scroll works properly, but i want all the buttons on proper position. how can i fix this problem ?

Malay Shah Malay Shah · Accepted Answer · 2013-03-23T12:05:07

As per the documentation: http://docs.sencha.com/touch/2-1/#!/api/Ext.Button-cfg-top

top : Number/String The absolute top position of this Component; must be a valid CSS length value, e.g: 300, 100px, 30%, etc. Explicitly setting this value will make this Component become 'floating', which means its layout will no longer be affected by the Container that it resides in.

Try setting style config:

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

Seems to works for me.

Scrollable panel in sencha touch

1 Answers