extjs4 動態載入樹選單和相應的按鈕是否顯示 ,到對許可權的控制粒度細化到按鈕
阿新 • • 發佈:2019-02-08
初步想到對許可權的控制的就是樹選單從資料庫載入,同時也載入相應 增刪改查 按鈕setVisible和setDisabled的true or false值。
樹選單的view
樹選單的store
然後是單擊樹選單的事件監聽,這裡是核心controller。
最後後臺的程式碼
再附上TreeStore的entity
我這裡演示用手動設定這些值模擬資料庫查詢到的值。
先說明一下,用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)
@ResponseBody
public 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;
}
}