使用 extjs4 在窗口添加下拉菜单

Adding Drop down menu in the window heder using extjs4?

本文关键字:添加 下拉菜单 窗口 extjs4 使用      更新时间:2023-09-26

当我单击窗口标题上的右上角图标时,我需要添加下拉菜单,就像谷歌浏览器菜单一样显示它。使用 extjs4 在窗口标题中添加下拉菜单。 这是代码,但看不到菜单。 代码在这里:

嗨,我需要这个看起来像谷歌浏览器菜单。 当我单击窗口上的菜单时,我看不到。

Ext.require([
    'Ext.form.*'
]);
Ext.onReady(function() {
    var win;
    var options = [
                   {"name":"AAdvantage ",},
                   {"name":"PNR",},
                   {"name":"Bag File",}
               ];
     Ext.regModel('Options', {
         fields: [
             {type: 'string', name: 'name'}
         ]
     });
     var store = Ext.create('Ext.data.Store', {
         model: 'Options',
         data: options
     });

         var menu = Ext.create('Ext.menu.Menu', {
                id: 'mainMenu',
                items: [
                    {
                        text: 'Search Customer',
                        checked: true
                    }, '-',
                    {
                        text: 'Customer Information',
                        checked: true
                    }, '-', {
                        text: 'Travel History',
                        checked: true
                    }, '-', {
                        text: 'Resolution'
                    }, '-', {
                        text: 'Future OD'
                    }, '-', {
                        text: 'History OD'
                    },'-', {
                        text: 'Help',
                        checked: true
                    }, '-', {
                        text: 'Upload Document',
                        checked: true
                    }
                ]
            });
    function showContactForm() {
        if (!win) {
            var form = Ext.widget('form', {
                layout: {
                    type: 'vbox',
                    align: 'stretch'
                },
                border: false,
                bodyPadding: 10,
                fieldDefaults: {
                    labelSeparator: "",
                    labelAlign: 'top',
                    labelWidth: 100,
                    labelStyle: 'font-weight:bold'
                },
                defaults: {
                    margins: '0 0 10 0'
                },
                items: [{
                    xtype: 'fieldcontainer',
                    fieldLabel: 'Search Customer',
                    labelStyle: 'font-weight:bold;padding:0',
                    layout: 'hbox',
                    defaultType: 'textfield',
                    fieldDefaults: {
                        labelAlign: 'top'
                    },
                },
                    {
                     xtype: 'combobox',
                     fieldLabel: 'Select Option',
                     name: 'suit_options_id',
                     id: 'ComboboxSuitOptions',
                     typeAhead:false,
                     labelAlign:'top',
                     labelSeparator: "",
                     store: store,
                     editable: false,
                     displayField: 'name',
                     hiddenName: 'id',
                     valueField: 'id',
                     queryMode: 'local',
                     listeners: {
                            change: function(combo) {
                                 console.log(combo.getValue());
                            }
                        }
                    },
                    {
                         xtype: 'textfield',
                         fieldLabel: 'AAdvantage Number',
                        allowBlank: false
                    },
                    {
                        xtype: 'button',
                        text : 'Search',
                        handler: function() {
                        }
                    }]
            });
            win = Ext.widget('window', {
                title: '<center>FCR</center>',
                closeAction: 'hide',
                width: 200,
                height: 300,
                minHeight: 300,
                layout: 'fit',
                closable: false,
                tools: [
                         {  type:'left',
                            menu: menu
                         }
                ],
                resizable: true,
                modal: true,
                items: form
            });
        }
        win.show();
    }
    showContactForm();
});

代码的作用是:

tools: [
    {  type:'left',
        menu: menu
    }
],

此代码在顶部窗口中生成左侧图标,请参阅文档,但 ool'没有属性菜单,因此您的代码无法工作。

定义一个显示菜单的handler函数(此代码有效,但需要一些调整才能对齐按钮上的菜单(:

tools: [
    {  type:'left',
        handler: function(){menu.show()}
    }
],

您的代码还存在一些其他问题。

  1. 我收到警告Ext.regModel has been deprecated. Models can now be created by extending Ext.data.Model: Ext.define("MyModel", {extend: "Ext.data.Model", fields: []});.
  2. 此外,您应该更喜欢使用 Ext.app.Application 的启动方法来启动,而不是使用 ExtJS 版本 3 的 Ext.onReady