使用 extjs4 在窗口添加下拉菜单
Adding Drop down menu in the window heder using extjs4?
当我单击窗口标题上的右上角图标时,我需要添加下拉菜单,就像谷歌浏览器菜单一样显示它。使用 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()}
}
],
您的代码还存在一些其他问题。
- 我收到警告
Ext.regModel has been deprecated. Models can now be created by extending Ext.data.Model: Ext.define("MyModel", {extend: "Ext.data.Model", fields: []});
. - 此外,您应该更喜欢使用 Ext.app.Application 的启动方法来启动,而不是使用 ExtJS 版本 3 的 Ext.onReady 。
相关文章:
- 我尝试将引导下拉按钮添加到 但下拉菜单不起作用.我该怎么做
- 在javascript中动态添加一个选择下拉菜单
- 使用 d3.js 添加下拉菜单
- 使用Selenium WebDriver单击下拉菜单不会激活Javascript来添加或删除页面中的项目
- 使用窗体向下拉菜单添加值
- Javascript和HTML - 添加一个下拉菜单,我在这里做错了什么
- 将 :focus 添加到下拉菜单中的列表项
- 将自定义下拉菜单添加到 tinyMCE 并插入动态内容
- 使用 extjs4 在窗口添加下拉菜单
- 动态添加下拉菜单,并根据一个下拉菜单中的选择在另一个下拉列表中选择选项
- I'I’我正在尝试向网站添加下拉菜单;m构建(HTML/CSS/JavaScript)
- 添加下拉菜单会导致未定义的错误
- 调整屏幕大小后未添加下拉菜单
- Rails 4 / JS / HTML无法添加下拉菜单,所以它为HTML表创建了一个过滤器
- 没有得到mvc3中动态添加下拉菜单的onchange事件
- 如何在博客中添加下拉菜单的子菜单
- 向jqGrid添加下拉菜单
- 如何在Bootstrap中添加下拉菜单淡出动画
- 如何在jsp中单击按钮时添加下拉菜单
- 如何在选项卡中添加下拉菜单