【发布时间】：2011-10-13 11:42:55
【问题描述】：
我已经完成了一个带有下拉菜单按钮的工具栏，但我需要更多的子菜单级别。有可能这样做吗？示例：
-
工具栏按钮 ->
- 菜单 1 lv 1
- 菜单 2 lv 1
- 菜单 3 lv 1->
- 子菜单 1 lv 2
- 子菜单 2 lv 2
- 菜单 4 lv 1
等等……
【问题讨论】：
标签： javascript extjs drop-down-menu toolbar
【发布时间】：2011-10-13 11:42:55
【问题描述】：
看看这个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'
}]
}
}
【讨论】：
-
谢谢。我所需要的。我必须练习我的网络搜索！！
-
如何将链接中的每个选项链接到新网页？
-
@Shamsan 使用 href: '
'
是的，这是可能的。
这个菜单是用ExtJs动态创建的，数据是从Json加载的。
查看我的演示代码。
在线演示： https://fiddle.sencha.com/#view/editor&fiddle/2vcq
Json 加载： https://api.myjson.com/bins/1d9tdd
代码 ExtJs：
//Description: ExtJs - Create a dynamical menu from JSON
//Autor: Ronny Morán <ronney41@gmail.com>
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);
}
【讨论】：