Javascript Extjs-工具栏按钮菜单下拉菜单和子菜单。它'；有可能吗？
我已经做了一个工具栏按钮，有一个下拉菜单，但我需要更多的子菜单级别。有可能吗？例如：Javascript Extjs-工具栏按钮菜单下拉菜单和子菜单。它'；有可能吗？,javascript,extjs,drop-down-menu,toolbar,Javascript,Extjs,Drop Down Menu,Toolbar,我已经做了一个工具栏按钮，有一个下拉菜单，但我需要更多的子菜单级别。有可能吗？例如： 工具栏按钮-> 菜单1 lv 1 菜单2第1级 菜单3第1级-> 子菜单1 lv 2 子菜单2 lv 2 菜单4第1级 等等…看看这个！您可以通过使用类来实现。 以下是一个例子： { text: 'Main Menu', menu: { xtype: 'menu',
- 工具栏按钮->
- 菜单1 lv 1
- 菜单2第1级
- 菜单3第1级->
- 子菜单1 lv 2
- 子菜单2 lv 2
- 菜单4第1级
{
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'
}]
}
}
//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);
}
//Description:ExtJs-从JSON创建动态菜单
//自动：罗尼·莫兰
外部应用程序({
名字：“小提琴”，
启动：函数（）{
var formPanelFMBtn=Ext.create（'Ext.form.Panel'{
车身衬垫：2，
waitMsgTarget：是的，
字段默认值：{
labelAlign:'左'，
标签宽度：85，
msgTarget:“侧边”
},
项目：[
{
xtype:'容器'，
布局：“hbox”，
项目：[
]
}
]
});
var win=Ext.create（'Ext.window.window'{
标题：“来自JSON的EXTJS动态菜单”，
莫代尔：是的，
宽度：680，
closable:是的，
布局：“适合”，
项目：[formPanelFMBtn]
}).show（）；
//使用GET方法从URL使用JSON
Ext.Ajax.request({
网址：'https://api.myjson.com/bins/1d9tdd',
方法：“get”，
超时：400000，
标题：{'Content-Type'：'application/json'}，
//params:Ext.JSON.encode（dataJsonRequest），
成功：功能（连接、响应、选项、EOPT）{
var result=Ext.JSON.decode（conn.responseText）；
//在“result”中传递JSON数据
视图纵向（formPanelFMBtn，结果）；
},
故障：功能（连接、响应、选项、EOPT）{
//Ext.Msg.alert（标题栏、MSGERROGETFIN）；
}
});
}
});
//使用JSON中的数据生成动态菜单
//参数：formPanelFMBtn->Panel
//结果->Json数据
函数视图纵向（formPanelFMBtn，结果）{
var resultfinterea=结果；
var arrayCategoriaTareas=ResultIntrea.categoriaTareas；
var containerfinterea=Ext.create（'Ext.form.FieldSet'{
xtype:“字段集”，
标题：“菜单：”，
边距：'0 5 0'，
弹性：1，
布局：“锚定”，
//自动高度：正确，
autoScroll：是的，
身高：200，
对齐：“拉伸”，
项目：[
]
});
var arrayMenu1=[]；
//一级
对于（变量i=0；i0）
{
objFinLUno={
文本：nombrePadre，
菜单：菜单级别2
};
}
其他的
{
//如果没有子项，则不带菜单参数
objFinLUno={
正文：nombrePadre
};
}
arrayMenu1.push（objFinLUno）；
}
var mymenu=新建Ext.menu.menu({
项目：阵列数量1
});
ContainerIntrea.add({
xtype:“拆分按钮”，
文本：“示例xD”，
菜单：我的菜单
});
formPanelFMBtn.add（集装箱进口区）；
}