ExtJs button level permissions

- End all code files attached

Features:

• First of all buttons hidden away, because my project can involve three buttons: normal button (the button that is individually packaged), special buttons (* right menu button, actioncolumn button ), so hide the button corresponding with the disabled in different ways. Then open the button for the project by permission module for the role, when a user logs on, the process is assigned to buttons or display enabled. So as to achieve access control buttons. Hereinafter will focus on the processing of the special buttons.

Note: This article is part of the problems encountered personal work, hereby recorded. Writing is limited, if wrong hope that the junior partner timely correction. QQ: 1113905744 (always-on)

Renderings:

• Right menu button Permissions : gray button (not assigned, you can not click) Colored buttons (Assigned)
  
• actioncolumn buttons permissions : gray button (not assigned, you can not click) Colored buttons (Assigned)
  

Description:

1. Background request interface function:

<1> with the returned data comprising menu buttons, where all buttons for screening.
<2> passed to an array of all buttons, special buttons (right-click menu button, the button in actioncolumn) requires special handling in this array
<3> push buttons can be displayed directly, given the special button.
<4> The third step will not match the button error, there needs to throw an exception

2. invocation:

<1> FIG introduced onto the JS

<2> function call

3. Right menu button authority Screenshot :

<1> button event, context menu button must be this type of event
<2> request interface function encapsulated in a background array

4. actioncolumn buttons permissions screenshot

Implementation code:

• Request backstage function :

var buttonArr = [];
//按钮级别权限控制
function controlToolButtons() {
    Ext.Ajax.request({
        async: false,   
        url : getServerHttp() + "/1111111111111,//请求按钮的权限地址
        callback : function(options,success,response){//回调函数
            //后台返回该为该用户分配的所有按钮
            var btnJSONArr= Ext.JSON.decode(response.responseText);
            Ext.each(btnJSONArr, function(el) {
                if(el.menu_code.substr(0,3) =='001'){ 
                    try {
                        var temp = String(el.menu_code);
                        buttonArr.push(temp);
                        Ext.getCmp(temp).show(); 
                         
                    } catch(err) {
                        //后台返回的数组中匹配不到前台的按钮，所以要捕获异常
                        console.log("存在未匹配到的按钮");
                    }
                   
                }
			});
        }                
    });
} 

function getAdult(buttonArr){
   
}       

• Right menu button Permissions

listeners : {
			itemcontextmenu : function(view, rec, node, index, e) {
				e.stopEvent();
				e.preventDefault();
				// 添加一个节点（叶子）  
				var chlidNodeClickMenu = Ext.create('Ext.menu.Menu', {
					items : [ {
						text : '查看详情',
						disabled:true,
						icon : jcapp.getIcon("vcard_edit.png"),
						listeners: {
							afterRender:function(btn, obj, eOpts){
								if (buttonArr.includes('001003001002') ) {
									btn.setDisabled ( false);
								}
							}
						},
						handler : function() {
							myEdit1(rec.get('kid'));
						}
					},{
						text : '新增子节点',
						disabled:true,
						icon : jcapp.getIcon("add.png"),
						listeners: {
							afterRender:function(btn, obj, eOpts){
								if (buttonArr.includes('001003001003') ) {
									btn.setDisabled ( false);
								}
							}
						},
						handler : function() {
							myAdd(rec.get("id"));
						}
					}, 
					{
						text : '修改该节点',
						disabled:true,
						icon : jcapp.getIcon("vcard_edit.png"),
						listeners: {
							afterRender:function(btn, obj, eOpts){
								if (buttonArr.includes('001003001004') ) {
									btn.setDisabled ( false);
								}
							}
						},
						handler : function() {
							myEdit(rec.get('kid'));
						}
					}, {
						text : '删除该节点',
						disabled:true,
						icon : jcapp.getIcon("vcard_delete.png"),
						listeners: {
							afterRender:function(btn, obj, eOpts){
								if (buttonArr.includes('001003001005') ) {
									btn.setDisabled ( false);
								}
							}
						},
						handler : function() {
							myDel(rec.get('kid'));
						}
					} ]
				});
				//menu的showAt，不要忘记  
				chlidNodeClickMenu.showAt(e.getPoint());
				return false;
			},
			
		} 

• actioncolumn buttons rights

{xtype : "actioncolumn",align : "center",text : '操作',id: '001001002009',
				items : [ 
					{xtype : 'button',tooltip : '编辑',icon : jcapp.getIcon("application_form_edit.png"),
						isDisabled: function (view, rowIndex, colIndex, item, rec) {
							if (buttonArr.includes('001001002003') ) {
								return false; //显示
							}else {
								return true; //禁用
							}
						}, 
						handler : function(grid, rowIndex, colIndex) {
							var rec = grid.getStore().getAt(rowIndex);
							myEdit(rec.get('kid')); 
						}
					},
					{xtype : "container"},
					{xtype : 'button',tooltip : '删除',icon : jcapp.getIcon("cross.png"),
						isDisabled: function (view, rowIndex, colIndex, item, rec) {
							if (buttonArr.includes('001001002002') ) {
								return false; //显示
							}else {
								return true; //禁用
							}
						}, 
						handler : function(grid, rowIndex, colIndex) {
							var rec = grid.getStore().getAt(rowIndex);
							myDel(rec.get('kid'));
						}
					}  
				]
			} 

Permission assignments: Finally, we can assign group permissions button, button front desk to the effect of dynamic allocation