extjs4 動態載入樹選單和相應的按鈕是否顯示 ，到對許可權的控制粒度細化到按鈕

君墨痕發表於2013-09-05
JS
初步想到對許可權的控制的就是樹選單從資料庫載入，同時也載入相應 增刪改查 按鈕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)
	@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;
	}

}




相關文章