0

当我单击窗口标题上的右上角图标时，我需要添加下拉菜单，像 Google Chrome 浏览器菜单一样显示它。使用 extjs4 在窗口标题中添加下拉菜单。这是代码，但无法看到菜单。代码在这里：

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

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();

});
4

1 回答 1

0

该代码的含义是：

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
于 2013-10-10T16:32:53.817 回答