extjs4 动态加载树菜单和相应的按钮是否显示 ，到对权限的控制粒度细化到按钮

初步想到对权限的控制的就是树菜单从数据库加载，同时也加载相应 增删改查 按钮setVisible和setDisabled的true or false值。

我这里演示用手动设置这些值模拟数据库查询到的值。

先说明一下，用setVisible和setDisabled来实现控制粒度细化到按钮有一点漏洞，setVisible可以通过修改html源码让它显示出来，不过setDisabled我暂时没发现，有发现的朋友通知一下，在此先谢过了……

先上效果图

、

树菜单的view

Ext.define('yang.view.frameAAA.module.FrameAAAWestChartPanelRemote', {extend : 'Ext.tree.Panel',alias : 'widget.frameAAAWestChartPanelRemote',initComponent : function() {var chartStoreRemote = Ext.create('yang.store.frameAAA.module.FrameAAAWestChartStoreRemote');var me = this;Ext.apply(me, {id : 'treeAuthentication',title : '<center>www  栏目</center>',rootVisible : true,lines : true,autoScroll : true,store : chartStoreRemote});me.callParent(arguments);}});

树菜单的store

Ext.define('yang.store.frameAAA.module.FrameAAAWestChartStoreRemote', {extend : 'Ext.data.TreeStore',autoLoad : true,fields : ['text', 'iconCls', 'xtype', 'leaf', 'addBut','deleteBut', 'modifyBut', 'queryBut'],proxy : {type : 'ajax',url : 'http://localhost:8080/b_springmvc_extjs/treeAuthentication.do',actionMethods : {read : 'POST' // 提交的方式是 POST方式},reader : {type : 'json',root : 'children'// record: 'node'}},sorters : [{property : 'text',direction : 'asc'}],root : {nodeType : 'async',text : 'treeAuthentication',// id: '00',expanded : true}});

然后是单击树菜单的事件监听，这里是核心controller。

'frameAAAWestChartPanelRemote' : {itemclick : this.westChartPanelRemoteClick}

//对权限的控制粒度再菜单的显示上细化到按钮westChartPanelRemoteClick : function(view, rec, item, index, e) {var charId = 'chartRemote_'+rec.get('text');var frameAAACenter = Ext.getCmp('frameAAACenter');var chartTabPanel=Ext.getCmp(charId);if(!chartTabPanel){chartTabPanel = frameAAACenter.add({xtype : rec.get('xtype'),id : 'chartRemote_'+rec.get('text'),title : rec.get('text')+'  报表',closable : true,moduleId:rec.get('id')});}frameAAACenter.setActiveTab(chartTabPanel);//根据后台返回来的值动态设置是否显示 增删改查 按钮Ext.getCmp(charId+'_addBut').setVisible(rec.get('addBut'));Ext.getCmp(charId+'_modifyBut').setVisible(rec.get('modifyBut'));Ext.getCmp(charId+'_deleteBut').setVisible(rec.get('deleteBut'));//根据后台返回来的值动态设置是否可以点击 增删改查 按钮Ext.getCmp(charId+'_addBut').setDisabled(!rec.get('addBut'));Ext.getCmp(charId+'_modifyBut').setDisabled(!rec.get('modifyBut'));Ext.getCmp(charId+'_deleteBut').setDisabled(rec.get('deleteBut'));},

最后后台的代码

@RequestMapping(value = "/treeAuthentication.do", method = RequestMethod.POST)@ResponseBodypublic String treeAuthentication() {List<TreeStore> list = new ArrayList<TreeStore>();int num = new Random().nextInt(10);for (int i = 1; i <= num; i++) {TreeStore t = new TreeStore();t.setId(i);t.setText("aaa-" + i);t.setLeaf(true);if (i % 2 == 0) {t.setXtype("frameAAACenterGridPanel");t.setAddBut(false);t.setDeleteBut(false);t.setModifyBut(false);t.setQueryBut(false);} else {t.setXtype("frameAAACenterGridPanel");t.setAddBut(true);t.setDeleteBut(true);t.setModifyBut(true);t.setQueryBut(true);}list.add(t);}JSONArray jsonArray = JSONArray.fromObject(list);String json = "{children:" + jsonArray.toString() + "}";System.out.println(json);return json;}

再附上TreeStore的entity

public class TreeStore implements Serializable {/** * @Fields serialVersionUID : TODO(用一句话描述这个变量表示什么) */private static final long serialVersionUID = 1L;private int id;private String text;private String xtype;private String iconCls = "user";private boolean leaf;private boolean addBut;private boolean deleteBut;private boolean modifyBut;private boolean queryBut;public int getId() {return id;}public void setId(int id) {this.id = id;}public String getText() {return text;}public void setText(String text) {this.text = text;}public String getXtype() {return xtype;}public void setXtype(String xtype) {this.xtype = xtype;}public String getIconCls() {return iconCls;}public void setIconCls(String iconCls) {this.iconCls = iconCls;}public boolean isLeaf() {return leaf;}public void setLeaf(boolean leaf) {this.leaf = leaf;}public boolean isAddBut() {return addBut;}public void setAddBut(boolean addBut) {this.addBut = addBut;}public boolean isDeleteBut() {return deleteBut;}public void setDeleteBut(boolean deleteBut) {this.deleteBut = deleteBut;}public boolean isModifyBut() {return modifyBut;}public void setModifyBut(boolean modifyBut) {this.modifyBut = modifyBut;}public boolean isQueryBut() {return queryBut;}public void setQueryBut(boolean queryBut) {this.queryBut = queryBut;}}