今回は小ネタ2つです。

メニュー

これまでmodernのメニューといえば、ActionSheetを画面外からスライドイン(http://examples.sencha.com/extjs/6.5.0/examples/kitchensink/?modern#actionsheets)する形式がほとんどでしたが、今回classicのようなフローティング形式のメニューが使えるようになりました。これもmodernをPCブラウザでも使えるようにという点から追加されたものでしょう。

classicにとってはあまり目新しい機能があるわけではありませんが、↓のような感じで使います。

Ext.define(Sample.view.main.Main, {
    extend: Ext.Panel,
    xtype: app-main,

    items: [
        {
            xtype: button,
            text: menu,
            menu: {
                floated: false,
                items: [
                    {
                        text: item1
                    },
                    {
                        text: item2(disabled),
                        disabled: true
                    },
                    {
                        text: item3(uncheck),
                        checked: false,
                        separator: true
                    },
                    {
                        text: item4(checked),
                        checked: true
                    },
                    {
                        text: item5,
                        menu: {
                            items: [
                                {
                                    text: subitem1
                                },
                                {
                                    text: subitem2
                                }
                            ]
                        }
                    },
                    {
                        group: mygroup,
                        text: item6(group),
                        value: item6,
                        checked: true,
                        separator: true
                    },
                    {
                        group: mygroup,
                        text: item7(group),
                        value: item7
                    },
                    {
                        group: mygroup,
                        text: item8(group),
                        value: item8
                    },
                    {
                        text: Open Google,
                        href: http://www.google.com,
                        separator: true
                    }
                ]
            }
        }
    ]
});

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

Exampleでは、Ext.menu.Itemのtargetコンフィグを使うようなコードが紹介されていてtarget: ‘_blankとしてありましたが、効きませんでした。そりゃまあバグは残ってますよね。

Ext.Containerのweightedコンフィグ

Ext.Containerのweightedコンフィグをtrueにすると、アイテムコンポーネントに指定されたweightの値で、順番を制御できるようになります。これもclassicでは既に存在する設定で、modernでも使えるようにしたようですね。

Ext.define(Sample.view.main.Main, {
    extend: Ext.Panel,
    xtype: app-main,

    layout: fit,

    items: [
        {
            xtype: container,
            layout: vbox,
            weighted: true,
            items: [
                {
                    xtype: button,
                    text: ボタン1,
                    weight: 20
                },
                {
                    xtype: button,
                    text: ボタン2,
                    weight: 10
                }
            ]
        }
    ]
});

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

weightが小さいほうがより先頭位置になります。