(ExtJS6.5)フローティングメニューの追加・weightedコンフィグ[modern]
今回は小ネタ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 } ] } } ] });
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 } ] } ] });
weightが小さいほうがより先頭位置になります。