Javascript 使用extjs4在窗口heder中添加下拉菜单？

我需要添加下拉菜单，当我单击窗口标题右上角的图标时，它会像谷歌浏览器菜单一样显示出来。使用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();

});

Ext.require([
“Ext.form.*”
]);
Ext.onReady（函数（）{
瓦尔温；
变量选项=[
{“name”：“AAdvantage”}，
{“名称”：“PNR”，}，
{“名称”：“包文件”，}
];
Ext.regModel（'选项'{
字段：[
{类型：'string'，名称：'name'}
]
});
var store=Ext.create（'Ext.data.store'{
模型：“选项”，
数据：选项
});
var menu=Ext.create（'Ext.menu.menu'{
id:'主菜单'，
项目：[
{
文本：“搜索客户”，
核对：正确
}, '-',
{
文本：“客户信息”，
核对：正确
}, '-', {
文字：‘旅游历史’，
核对：正确
}, '-', {
案文：“决议”
}, '-', {
文本：“未来OD”
}, '-', {
文字：“历史OD”
},'-', {
文本：“帮助”，
核对：正确
}, '-', {
文本：“上载文档”，
核对：正确
}
]
});
函数showContactForm（）{
如果（！赢）{
var form=Ext.widget（'form'{
布局：{
键入：“vbox”，
对齐：“拉伸”
},
边界：错，
车身衬垫：10，
字段默认值：{
标签分离器，
labelAlign:“顶部”，
标签宽度：100，
标签样式：“字体大小：粗体”
},
默认值：{
边距：“0 10 0”
},
项目：[{
xtype:'fieldcontainer'，
fieldLabel:“搜索客户”，
labelStyle:'字体大小：粗体；填充：0'，
布局：“hbox”，
defaultType:'textfield'，
字段默认值：{
labelAlign:“顶部”
},
},
{
xtype:“组合框”，
fieldLabel:“选择选项”，
名称：'suit_options_id'，
id:“ComboboxSuiteOptions”，
typeAhead:false，
labelAlign:“顶部”，
标签分离器，
店:店,，
可编辑：false，
displayField:'名称'，
hiddenName:'id'，
valueField:'id'，
queryMode:'本地'，
听众：{
更改：函数（组合）{
log（combo.getValue（））；
}
}
},
{
xtype:'textfield'，
字段标签：“A优势编号”，
allowBlank:false
},
{
xtype:'按钮'，
文本：“搜索”，
处理程序：函数（）{
}
}]
});
win=Ext.widget（'窗口'{
标题：“FCR”，
closeAction:'隐藏'，
宽度：200，
身高：300，
身高：300，
布局：“适合”，
可关闭：错误，
工具：[
{类型：'left'，
菜单：菜单
}
],
可调整大小：正确，
莫代尔：是的，
项目：表格
});
}
win.show（）；
}
showContactForm（）；
});

该代码的含义如下：

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

此代码在顶部窗口中生成左侧图标，但ool`没有属性菜单，因此代码无法运行

定义一个显示菜单的

处理程序

函数（此代码有效，但需要进行一些调整以对齐按钮上的菜单）：

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

我收到一条警告，Ext.regModel已被弃用。现在可以通过扩展Ext.data.Model:Ext.define（“MyModel”{extend:“Ext.data.Model”，字段：[]}）来创建模型

此外，您应该更喜欢使用Ext.app.Application的启动方法来启动，而不是ExtJS版本3的Ext.onReady

---

当我在控制台上键入代码时，这对我来说是有效的。但也存在一些问题。我收到一条警告，Ext.regModel已被弃用。现在可以通过扩展Ext.data.Model:Ext.define（“MyModel”{extend:“Ext.data.Model”，字段：[]}）来创建模型另外，您应该更喜欢使用

Ext.app.Application

的

launch

方法来启动，而不是

Ext.onReady

这是ExtJS版本3Oh，我知道什么不起作用了：您希望有一个工具栏！我编辑了我的答案。我现在显示菜单。它的位置不正确，因此仍有一些调整留给您。

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