Extjs 动态加载子菜单

本文介绍如何使用ExtJS框架实现动态加载菜单功能。通过AJAX请求从后端获取菜单数据,并利用这些数据动态创建菜单项。具体实现包括前端代码示例及后端Java代码示例。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

最近在做一个项目,要求从数据库中获得菜单子项动态加载到web客户端中的菜单:
extjs如下:
//定义grid
this.grid = new FeedGrid(this, {
region:"center",
store:grid.php,
tbar:[{
text:'级别',
id:'btnLevel',
enableToggle:true,//按钮凹陷样式
iconCls: 'summary',//定义样式
pressed: false,
tooltip: {title:'添加级别',text:'按级别查看'},//button标签
handler: this.showLevel//出发动态加载子菜单事件
}
]
});


showLevel : function(e){
Ext.Ajax.request({
url: "level.do?method=getLevel",
method:'POST',
params: '',
success: function(response,options){
//获取action中传过来的数据(json格式)
var temp = Ext.util.JSON.decode(response.responseText).data;
//定义父菜单
this.levelMenu = new Ext.menu.Menu({});
//循环向父菜单添加子菜单
for(i=0;i<temp.length;i++){
var menuItem = new Ext.menu.Item({
text:temp[i].name,//显示的文本
value:temp[i].num,//真是的值
handler: function(item){//子菜单项触发的事件
Ext.MessageBox.alert('提示',item.text+"---"+item.value);
var level = item.value;//获得选中的级别,刷新grid
Ext.getCmp("grid").store.load({params:'level='+level});

}
});
levelMenu.addItem(menuItem);
}
Ext.getCmp('btnLevel').menu = this.levelMenu;

}
}); },
后台action代码如下:
public ActionForward getLevel(ActionMapping mapping, ActionForm form, HttpServletRequest request, HttpServletResponse response) throws IOException {
LevelForm levelForm = (LevelForm) form;
Set levelSet = levelService.getLevelSet();//得到不重复的级别
Iterator it = levelSet.iterator();
String jsonString="";
PrintWriter s = response.getWriter();
while(it.hasNext()){
String num =it.next().toString();
String name = "";
if(num.equals("1")){
name="重要";
}else if(num.equals("2")){
name="中等";
}else if(num.equals("3")){
name="一般";
}else{
name ="普通";
}
//拼接json格式数据 jsonString+="{\"num\":\""+num+"\",\"name\":\""+name+"\"},";
}
jsonString = jsonString.substring(0,jsonString.length()-1);
jsonString = "{success:true,data:["+jsonString+"]}";
s.write(jsonString);//向页面输出
return null;
}
好了这就实现了点击按钮动态添加菜单的功能,博文原创,如果bug还望指教!!!
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值