[英]Sencha 6.5 (modern) how to dynamically change the items in a menu in a title bar?
Well considering a grid I create in my application: 考虑一下我在应用程序中创建的网格:
{
xtype: 'ordergrid',
itemId: 'ordergrid',
titleBar: {
shadow: false,
items: [{
align: 'right',
xtype: 'button',
text: 'Update status',
stretchMenu: true,
menu: {
itemId: 'status_menu',
defaults: {
handler: 'updateStatus'
},
indented: false,
items: [{
text: 'test1',
value: 'test1'
}, {
text: 'test2',
value: 'test2'
}, {
text: 'test3',
value: 'test4'
}]
}
}]
},
With ordergrid
being defined with: 使用以下
ordergrid
定义ordergrid
:
extend: 'Ext.grid.Grid',
xtype: 'ordergrid',
I wish to modify the items
of the menu
dynamically. 我希望动态修改
menu
items
。 I've first tried doing this through a store: 我首先尝试通过一家商店这样做:
menu: {
itemId: 'status_menu',
defaults: {
handler: 'updateStatus'
},
indented: false,
store: { type: 'status' }
Though this doesn't seem to work. 虽然这似乎不起作用。 Then I tried accessing this menu through a component query, during the
init
function of some controller: 然后,我尝试在某个控制器的
init
函数期间通过组件查询访问此菜单:
Ext.define('BinkPortalFrontend.view.main.OrderController', {
extend: 'Ext.app.ViewController',
alias: 'controller.order',
init: function () {
console.log('..... initializing ......');
const menus = Ext.ComponentQuery.query('ordergrid #status_menu');
const menu = menus[0];
menu.setItems([{
text: 'some',
value: 'some'
}, {
text: 'new',
value: 'mew'
}]);
},
};
However this returns an error: "Cannot read property 'setItems' of undefined" Debugging shows the obvious problem: it doesn't find any menu. 但是,这将返回错误:“无法读取未定义的属性'setItems'”调试显示出明显的问题:它找不到任何菜单。
What's more, even a "catch all" query like 更重要的是,甚至是“全部捕获”查询
Ext.ComponentQuery.query('menu');
or 要么
Ext.ComponentQuery.query('#status_menu');
Shows an empty array: so what's going on? 显示一个空数组:这是怎么回事? (I most definitely see the menu from its initial load).
(我绝对可以从其初始加载中看到菜单)。
There is one reason your menu is not created. 没有创建菜单的原因之一。 Menu will created whenever button will
tap
or whenever getMenu()
method get called. 菜单将创建按钮时会
tap
或当getMenu()
方法被调用。
If you want to get your menu
using Ext.ComponentQuery.query()
, so for this you need to do use initialize
event of button
and forcefully create menu using getMenu()
method like below :- 如果您想使用
Ext.ComponentQuery.query()
获取menu
,那么您需要使用button
initialize
事件并使用getMenu()
方法强制创建菜单,如下所示:-
{
xtype: 'button',
text: 'Update status',
stretchMenu: true,
menu: {
itemId: 'status_menu',
indented: false,
items: [{
text: 'test1',
value: 'test1'
}, {
text: 'test2',
value: 'test2'
}, {
text: 'test3',
value: 'test4'
}]
},
listeners: {
initialize: function(btn) {
Ext.defer(function() {
// This will print undefined because menu have not created
console.log(Ext.ComponentQuery.query('#status_menu')[0]);
//When we use getMenu method it will create menu item
btn.getMenu().hide();
// This will print menu component
console.log(Ext.ComponentQuery.query('#status_menu')[0]);
}, 10)
}
}
}
Another way you can use getMenu()
method of button
. 另一种方式,你可以使用
getMenu()
的方法button
。 It will return the menu
component. 它将返回
menu
组件。
In this FIDDLE , I have created a demo using grid
, button
and menu
. 在此FIDDLE中 ,我使用
grid
, button
和menu
创建了一个演示。 I hope this will help/guide you to achieve your requirement. 我希望这会帮助/指导您达到要求。
CODE SNIPPET 代码片段
Ext.application({
name: 'Fiddle',
launch: function () {
var store = Ext.create('Ext.data.Store', {
fields: ['name', 'email', 'phone'],
data: [{
'name': 'Lisa',
"email": "lisa@simpsons.com",
"phone": "555-111-1224"
}, {
'name': 'Bart',
"email": "bart@simpsons.com",
"phone": "555-222-1234"
}, {
'name': 'Homer',
"email": "home@simpsons.com",
"phone": "555-222-1244"
}, {
'name': 'Marge',
"email": "marge@simpsons.com",
"phone": "555-222-1254"
}]
});
Ext.create('Ext.grid.Grid', {
title: 'Change menu items dynamically',
titleBar: {
shadow: false,
items: [{
align: 'right',
xtype: 'button',
text: 'Update status',
stretchMenu: true,
itemId: 'statusbtn',
menu: {
itemId: 'status_menu',
defaults: {
// handler: 'updateStatus'
},
indented: false,
items: [{
text: 'test1',
value: 'test1'
}, {
text: 'test2',
value: 'test2'
}, {
text: 'test3',
value: 'test4'
}]
},
listeners: {
initialize: function (btn) {
Ext.defer(function () {
// This will undefined because menu has not been created
console.log(Ext.ComponentQuery.query('#status_menu')[0]);
//When we use getMenu method it will create menu item
btn.getMenu().hide();
// This will menu component
console.log(Ext.ComponentQuery.query('#status_menu')[0]);
}, 10)
}
}
}, {
xtype: 'button',
align: 'right',
text: 'Change Items',
handler: function (btn) {
var newItems = [];
store.each(rec => {
newItems.push({
text: rec.get('name'),
value: rec.get('name')
})
});
/*
* You can also get menu using button
* btn.up('titlebar').down('#statusbtn').getMenu().setItems(newItems);
*/
Ext.ComponentQuery.query('#status_menu')[0].setItems(newItems);
Ext.toast('Menu items has been change. Please check', 2000);
}
}]
},
store: store,
columns: [{
text: 'Name',
dataIndex: 'name',
width: 200
}, {
text: 'Email',
dataIndex: 'email',
width: 250
}, {
text: 'Phone',
dataIndex: 'phone',
width: 120
}],
height: 200,
layout: 'fit',
fullscreen: true
});
}
});
For more details about component you can also see this ComponentManager
有关组件的更多详细信息,您还可以看到此
ComponentManager
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.