Javascript Extjs - 带有子菜单的工具栏按钮菜单下拉菜单。这是可能的？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/7753568/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Extjs - Toolbar button menu dropdown with submenus. It's possible?
提问by Abdel Raoof
I've already done a toolbar with buttons that have a dropdown menu but I need more submenu levels. It's possible to do that? Example:
我已经完成了一个带有下拉菜单的按钮的工具栏，但我需要更多的子菜单级别。有可能这样做吗？例子：
toolbarbutton ->
- menu 1 lv 1
- menu 2 lv 1
- menu 3 lv 1->
- submenu 1 lv 2
- submenu 2 lv 2
- menu 4 lv 1
工具栏按钮 ->
- 菜单 1 lv 1
- 菜单 2 lv 1
- 菜单 3 lv 1->
- 子菜单 1 lv 2
- 子菜单 2 lv 2
- 菜单 4 lv 1
and so on...
等等...
回答by Abdel Raoof
Have a look at this example! You can achieve using the Ext.menu.Menuclass. Here is an Example:
看看这个例子！您可以使用Ext.menu.Menu类来实现。这是一个例子：
{
text: 'Main Menu',
menu: {
xtype: 'menu',
items: [{
text: 'Menu One',
iconCls: 'edit'
}, {
text: 'Menu Two',
menu: {
xtype: 'menu',
items: [{
text: 'Next Level'
},{
text: 'Next Level'
},{
text: 'Next Level'
}]
}
}, {
text: 'Menu Three',
scale: 'small'
}, {
text: 'Menu Four',
scale: 'small'
}]
}
}
回答by Ronny Morán
Yes it is possible.
对的，这是可能的。
This menu is created dynamically with ExtJs, the data is loaded from Json.
这个菜单是用 ExtJs 动态创建的，数据是从 Json 加载的。
See my demo with the code.
请参阅我的演示代码。
Demo Online:https://fiddle.sencha.com/#view/editor&fiddle/2vcq
在线演示：https : //fiddle.sencha.com/#view/editor&fiddle/2vcq
Json loaded: https://api.myjson.com/bins/1d9tdd
Json 加载：https: //api.myjson.com/bins/1d9tdd
Code ExtJs:
代码 ExtJ：
//Description: ExtJs - Create a dynamical menu from JSON
//Autor: Ronny Morán <[email protected]>
Ext.application({
name : 'Fiddle',
launch : function() {
var formPanelFMBtn = Ext.create('Ext.form.Panel', {
bodyPadding: 2,
waitMsgTarget: true,
fieldDefaults: {
labelAlign: 'left',
labelWidth: 85,
msgTarget: 'side'
},
items: [
{
xtype: 'container',
layout: 'hbox',
items: [
]
}
]
});
var win = Ext.create('Ext.window.Window', {
title: 'EXTJS DYNAMICAL MENU FROM JSON',
modal: true,
width: 680,
closable: true,
layout: 'fit',
items: [formPanelFMBtn]
}).show();
//Consuming JSON from URL using method GET
Ext.Ajax.request({
url: 'https://api.myjson.com/bins/1d9tdd',
method: 'get',
timeout: 400000,
headers: { 'Content-Type': 'application/json' },
//params : Ext.JSON.encode(dataJsonRequest),
success: function(conn, response, options, eOpts) {
var result = Ext.JSON.decode(conn.responseText);
//passing JSON data in 'result'
viewMenuDinamical(formPanelFMBtn,result);
},
failure: function(conn, response, options, eOpts) {
//Ext.Msg.alert(titleAlerta,msgErrorGetFin);
}
});
}
});
//Generate dynamical menu with data from JSON
//Params: formPanelFMBtn - > Panel
// result - > Json data
function viewMenuDinamical(formPanelFMBtn,result){
var resultFinTarea = result;
var arrayCategoriaTareas = resultFinTarea.categoriaTareas;
var containerFinTarea = Ext.create('Ext.form.FieldSet', {
xtype: 'fieldset',
title: 'Menu:',
margins:'0 0 5 0',
flex:1,
layout: 'anchor',
//autoHeight: true,
autoScroll: true,
height: 200,
align: 'stretch',
items: [
]
});
var arrayMenu1 = [];
//LEVEL 1
for(var i = 0; i < arrayCategoriaTareas.length; i++)
{
var categoriaPadre = arrayCategoriaTareas[i];
var nombrePadre = categoriaPadre.nombreCategoria;
var hijosPadre = categoriaPadre.hijosCategoria;
var arrayMenu2 = [];
//LEVEL 2
for(var j = 0; j<hijosPadre.length; j++)
{
var categoriaHijo = hijosPadre[j];
var nombreHijo = categoriaHijo.nombreHijo;
var listaTareas = categoriaHijo.listaTareas;
var arrayMenu3 = [];
//LEVEL 3
for(var k = 0; k < listaTareas.length; k++)
{
var tarea = listaTareas[k];
var nombreTarea = tarea.nombreTarea;
var objFinLTres =
{
text: nombreTarea,
handler: function () {
alert("CLICK XD");
}
};
arrayMenu3.push(objFinLTres);
}
var menuLevel3 = Ext.create('Ext.menu.Menu', {
items: arrayMenu3
});
var objFinLDos;
if(arrayMenu3.length > 0)
{
objFinLDos = {
text: nombreHijo,
menu:menuLevel3
};
}
else
{
//without menu parameter If don't have children
objFinLDos = {
text: nombreHijo
};
}
arrayMenu2.push(objFinLDos);
}
var menuLevel2 = Ext.create('Ext.menu.Menu', {
items: arrayMenu2
});
var objFinLUno;
if(arrayMenu2.length > 0)
{
objFinLUno = {
text: nombrePadre,
menu:menuLevel2
};
}
else
{
//without menu parameter If don't have children
objFinLUno = {
text: nombrePadre
};
}
arrayMenu1.push(objFinLUno);
}
var mymenu = new Ext.menu.Menu({
items: arrayMenu1
});
containerFinTarea.add({
xtype: 'splitbutton',
text: 'Example xD',
menu: mymenu
});
formPanelFMBtn.add(containerFinTarea);
}
