Change vertical sapacing in Ext.Menu in sencha touch

Question

I am developing a sencha touch project using sencha architect. I have created a menu using class Ext.Menu. I was successfully able to generate the menu with different buttons , however when the menu is created there is a sapce/padding between differnt buttons. I refered to the docs and looks like I need to change

$sheet-button-spacing and $sheet-padding

I am not sure how to do that in architect. Also is there any other way to do that. Below is the screenshot of my menu

- This is how my panel looks like:

Here is my panel code

    Ext.define('MyApp.view.MyPanel', {
    extend: 'Ext.Panel',
    alias: 'widget.mylistpanel',

    requires: [
        'Ext.Button'
    ],

    config: {
        layout: 'vbox',
        items: [
            {
                xtype: 'button',
                text: 'MyButton2'
            },
            {
                xtype: 'button',
                text: 'MyButton3'
            }
        ]
    }

});

This is how I am creating the menu

    console.log("Menu for side");
var items = [
    {
        xtype: 'panel',
        docked:'left',
        style: {

        },
        items: [
            {
               // xtype: 'mainmenu'
                xtype:'mylistpanel'
            }
        ]
    }
];

var className = 'Ext.Menu';

return Ext.create(className, {

    items: items

    });

Answer 1

You can use class :

layout : 'vbox',
class : 'buttonPadding',

Define class in your css:

.buttonPadding{
padding: 2px; //as per requirement
}

Or

You can directly use style:

layout: 'vbox',
style: 'padding:2px',

And

I am not sure but I think for:

$sheet-button-spacing and $sheet-padding

this is in scss so you need to change in scss file.

But if you change in scss file, it will reflect to all button present on sheet.

Hope it will help you!!!