我在一个需要动态创建的面板中设置了一个菜单系统。我已经创建了一个客户端喜欢的模拟静态菜单,但菜单类别和项目需要通过JSON从商店加载。
以下是我静态设置的前几个菜单项:
Ext.define('SimpleSearch.view.FacetSDL' ,{
extend: 'Ext.panel.Panel',
alias : 'widget.facetsdl', //alias is referenced in MasterList.js
requires: ['SimpleSearch.store.SDLResults', 'FacetData' ],
title: 'Facet Search',
html: null,
frame: true,
layouts: 'fit',
items: [
{
id: 'group-menu',
title: 'Browse',
xtype: 'menu',
plain: true,
floating: false,
layouts: 'fit',
items: [
{
text: 'Security',
listeners:
{
click: function() {
var groupmenu = Ext.ComponentQuery.query('#group-menu')[0];
groupmenu.hide()
var securitymenu = Ext.ComponentQuery.query('#security-menu')[0];
securitymenu.setPosition(0,-groupmenu.getHeight(),false);
securitymenu.show()
}
},
menu: { // <-- submenu by nested config object
items: [
{
text: 'Classification',
listeners:
{
click: function() {
var groupmenu = Ext.ComponentQuery.query('#group-menu')[0];
groupmenu.hide()
var securitymenu = Ext.ComponentQuery.query('#security-menu')[0];
var classificationmenu = Ext.ComponentQuery.query('#classification-menu')[0];
classificationmenu.setPosition(0,-groupmenu.getHeight() - securitymenu.getHeight(),false);
classificationmenu.show()
}
我在想,也许创建一个加载所有必要数据的类,然后为“items”字段遍历该类可能是一种方法,但我不确定这是否可行。
3条答案
按热度按时间mfpqipee1#
您应该考虑使用Tree和TreeStore。然后使用
ui:'menu'
或e1d1e配置属性将其与常规树区分开来。然后根据客户的需求进行设计。这样,您就可以免费使用所有机制来动态处理数据和所有子菜单,只需在CSS方面稍稍创新即可。
bvjxkvbb2#
我让它这样工作:
然后将
scrollMenu
添加到表单或容器中。希望这有帮助!9udxz4iz3#
此菜单是使用ExtJ动态创建的,数据是从Json加载的。
查看我的演示和代码。
**在线演示:**https://fiddle.sencha.com/#view/editor&fiddle/2vcq
Json加载:https://api.myjson.com/bins/1d9tdd
代码ExtJ: