modernのテーマには、theme-materialを指定することでマテリアルデザインにできますが、ボタンのUIが通常のテーマとは若干異なります。

ボタンのuiコンフィグに指定できるのは、次のようなものになります。

Ext.define(Sample.view.main.Form, {
    extend: Ext.form.Panel,
    xtype: main_form,

    requires: [
        Ext.Button
    ],

    cls: main-form,

    scrollable: true,

    defaults: {
        margin: 0 0 15 0
    },

    items: [
        {
            xtype: button,
            text: action,
            ui: action
        },
        {
            xtype: button,
            text: alt,
            ui: alt
        },
        {
            xtype: button,
            text: confirm,
            ui: confirm
        },
        {
            xtype: button,
            text: decline,
            ui: decline
        },
        {
            xtype: button,
            text: raised,
            ui: raised
        },
        {
            xtype: button,
            text: raised-confirm,
            ui: raised-confirm
        },
        {
            xtype: button,
            text: raised-decline,
            ui: raised-decline
        },
        {
            xtype: button,
            text: segmented,
            ui: segmented
        },
        {
            xtype: button,
            iconCls: md-icon-add,
            ui: fab
        },
        {
            xtype: button,
            text: mybutton1,
            ui: mybutton1
        },
        {
            xtype: button,
            text: mybutton2,
            ui: mybutton2
        }
    ]
});

f:id:sham-memo:20170314012242p:plain

fabまでは標準で用意されているUIです。

mybutton1とmybutton2は追加してみました。

.#{$prefix}button {
  text-transform: inherit !important;
}

$mybutton1-color-name: dynamic(indigo);
$mybutton1-color: dynamic(material-color(indigo, 500));
$mybutton1-foreground-color: dynamic(material-foreground-color($mybutton1-color-name));
$mybutton1-pressed-color: dynamic(rgba($mybutton1-color, .8));

@include button-ui(
    $ui: mybutton1,
    $color: $mybutton1-foreground-color,
    $background-color: $mybutton1-color,
    $pressed-background-color: $mybutton1-pressed-color
);

$mybutton2-color: dynamic(#607D8B);
$mybutton2-foreground-color: dynamic(#ffffff);
$mybutton2-pressed-color: dynamic(rgba($mybutton2-color, .8));

@include button-ui(
    $ui: mybutton2,
    $color: $mybutton2-foreground-color,
    $background-color: $mybutton2-color,
    $pressed-background-color: $mybutton2-pressed-color
);

ext/modern/theme-material/sass/var/Button.scss を見るとどのようにuiが定義されているかを追うことができると思います。

‘indigoはtheme-materialであらかじめ用意されている色で、ext/modern/theme-material/sass/etc/functions/color.scss に定義してあります。

マテリアルデザインの色については、 https://material.io/guidelines/style/color.html#color-color-palette が役に立つと思います。