The permission problem of extjs requires that the objects controlled are menus, buttons, and URLs.-JS Tutorial-php.cn

Problem-solving idea 1: Overloading the Connection class
due to extjs and the server side is all data interaction in the json format. The server side will not control page jumps. Page jumps and prompt functions are all completed by extjs and extjs. All interaction methods on the server side are
inherited from Ext.data.Connection. This class can intercept all methods of interaction with the server side. Permission control on the server side is done by acegi. If it is not passed by acegi. Verification, if there is no authorization, it will return to 403.jsp
. If you need to log in again, it will return to login.jsp. Therefore, reload the Connection class and rewrite the handleResponse method. , determine whether the returned result is 403.jsp, login.jsp, and if so, perform corresponding control. If the returned data is normal, continue to execute downwards
I personally use 403.jsp and login.jsp. One line is added with comment code
, which relies on this keyword to work The code is as follows:

Problem-solving idea 2 : The server side returns menu json data

My menu is made with tree. When initializing the main page, initialize the menu first.

//此处重载了Cunnection方法,用来拦截client与Server的交 互， 
//后台acegi拦截用户请求后,如果无权限，返回403.jsp;如果没登录，返回login.jsp; 
//通过Acegi拦截 后,才返回用户想要的Json结果 
Ext.override(Ext.data.Connection, { 
handleResponse : Ext.data.Connection.prototype.handleResponse.createInterceptor( 
function(response) { 
var resText=response.responseText; 
if (resText.length>10) { 
resText=resText.substr(0,9); 
} 
if (resText==&#39;<!--login&#39;){ 
window.top.location.href = topURL+"/login.jsp"; 
} else if (resText==&#39;<!--deny-&#39;){ 
if (resText==&#39;<!--deny-&#39;){ 
Ext.Msg.show({ 
title : &#39;错误提示&#39;, 
msg : &#39;禁止访问此功能,请和系统管理员联系&#39;, 
buttons : Ext.Msg.OK, 
icon : Ext.Msg.INFO 
}); 
}; 
} else if (resText==&#39;<!--404--&#39;){ 
Ext.Msg.show({ 
title : &#39;错误提示&#39;, 
msg : &#39;页面未找到&#39;, 
buttons : Ext.Msg.OK, 
icon : Ext.Msg.INFO 
}); 
} 
}) 
});

Copy after login

The code is as follows:

This'getJsonMenus. do' returns the menu json data. The configuration in strut2 is:

loader : new Ext.tree.TreeLoader({ 
dataUrl : &#39;getJsonMenus.do&#39; 
}),

Copy after login

menus is a

list

<action name="getJsonMenus" class="jsonSystemAction" method="getJsonMenus"> 
<result type="json"> 
<param name="root">menus</param> 
</result> 
</action>

Copy after login

JsonMenu’s attribute is:
private String text;
private boolean expanded; private String id; private boolean leaf;
private List children;
The format returned by getJsonMenus.do can meet the format requirements of tree.
The js code is as follows

In this way, the menu is obtained. Some netizens have proposed asynchronous menu solutions, and I have also included them. It is listed below

Solution idea 3: Load all TAGs synchronously and use the hidden attribute to control the display

Ext.onReady(function() { 
setTimeout(function() { 
Ext.get('loading').remove(); 
Ext.getDom('header').style.visibility = 'visible'; 
var vp = new Ext.Viewport({ 
layout : 'border', 
defaults : { 
collapsible : true, 
split : true 
}, 
items : [{ 
xtype : 'box', 
region : 'north', 
applyTo : 'header', 
height : 30, 
split : false 
}, { 
title : currentUser, 
id : 'accordion-panel', 
layout : 'border', 
region : 'west', 
margins : '2 0 5 5', 
width : 200, 
minSize : 200, 
maxSize : 250, 
bodyStyle : 'background-color:#DFE8F6', 
defaults : { 
border : false 
}, 
bbar : [{ 
text : '开始', 
iconCls : 'icon-plugin', 
menu : new Ext.menu.Menu({ 
items : [{ 
text : '关于系统', 
iconCls : 'icon-info', 
handler : function() { 
new Ext.Window({ 
closeAction : 'close', 
resizable : false, 
bodyStyle : 'padding: 7', 
modal : true, 
title : '关于本系统', 
html : '本系统采用目前较为流行的技术实现,
前台使用了ExtJs技术,所以实现了跨浏览器
' + 
' 本程序在IE6,IE7,FireFox3均测试通过!

主要技术: Struts2 + Spring + iBatis + ExtJs

' 
+ '数  据  库: Oracle 9i', 
width : 300, 
height : 200 
}).show(); 
} 
}, { 
text : '退出系统', 
iconCls : 'icon-delete', 
handler : function() { 
Ext.Msg.confirm('操作提示', '您确定要退出本系统?', function(btn) { 
if ('yes' == btn) { 
Ext.Ajax.request({ 
url : 'logout.do', 
success : function() { 
location = '/'; 
}, 
failure : function() { 
Ext.Msg.show({ 
title : '错误提示', 
msg : '退出系统失败!', 
icon : Ext.Msg.ERROR, 
buttons : Ext.Msg.OK 
}); 
} 
}); 
} 
}); 
} 
}] 
}) 
}], 
items : [{ 
layout : 'accordion', 
region : 'center', 
items : [{ 
title : '导航菜单', 
iconCls : 'icon-nav', 
border : false, 
items : [{ 
xtype : 'treepanel', 
border : false, 
rootVisible : false, 
autoScroll : true, 
loader : new Ext.tree.TreeLoader({ 
dataUrl : &#39;getJsonMenus.do&#39; 
}), 
root : new Ext.tree.AsyncTreeNode(), 
listeners : { 
'click' : function(n) { 
try { 
var sn = this.selModel.selNode || {}; 
if (n.leaf && n.id != sn.id) { 
Ext.getCmp('content-panel').layout.setActiveItem(n.id.substring(0, n.id 
.indexOf('-')) 
+ '-panel'); 
} 
} catch (e) { 
} 
} 
} 
}] 
},{ 
title : '系统设置', 
iconCls : 'icon-nav' 
}] 
}] 
}, { 
id : 'content-panel', 
region : 'center', 
layout : 'card', 
margins : '2 5 5 0', 
activeItem : 0, 
border : false, 
items : [start, p_company, p_user, p_dept, p_system, p_subject, p_category, p_resource] 
}] 
}); 
}, 250); 
});

Copy after login

All tags must be loaded synchronously before the hidden attribute of the component can be controlled. Asynchronous loading is not easy to use.

The method of synchronous loading is as follows:

The usage of TAG in js is as follows:

//FUTURE_TAG全局的TAG控制类, 控制的组件的hidden属性,key=TAG的名字,value=true(组件隐藏),false(组件显示) 
var FUTURE_TAG={tbar1: false, tbar2: true}; 
var conn = Ext.lib.Ajax.getConnectionObject().conn; 
conn.open("GET", &#39;getJsonTags.do&#39;,false); 
conn.send(null); 
future_tag= eval(&#39;(&#39; + conn.responseText + &#39;)&#39;);

Copy after login

getJsonTags.do returns a

Map

var btn_add_system = new Ext.Button({ 
text : &#39;添加&#39;, 
iconCls : &#39;icon-add&#39;, 
hidden: FUTURE_TAG.system_add, 
handler : function() { 
window_add_system.show(); 
} 
});

Copy after login

Object , key is the TAG name, value is boolean Java is written as follows:
Strut2 configuration is as follows:

tagMap=new HashMap<String,Boolean>(); 
for (int i=0;i<allTagList.size();i++){ 
tagMap.put(allTagList.get(i).getResString(), true); 
}

Copy after login

This way You can control whether the foreground components are displayed in the background, thereby achieving our purpose.

Solution 4:

<action name="getJsonTags" class="jsonSystemAction" method="getJsonTags"> 
<result type="json"> 
<param name="root">tagMap</param> 
</result> 
</action>

Copy after login

Read the server-side permission value through ajax and return data like this:

{tbar1: false, tbar2: true}
Then in extjs:
var vResult = eval('(' ajaxText ')'); //Get {tbar1: false, tbar2: true}
In this way, you can directly assign a value to tbar
disabled: vResult.tbar1
disabled: vResult.tbar2
Solution 5:
Setting module permissions is used to set the permissions that users can operate. Allows users to set the operability and inoperability of modules.
A subform for setting permissions pops up
A user must be selected before setting permissions.
Js code

Create a tree, which is placed in the center of the pop-up form.

Js code

var row = grid_user.getSelectionModel().getSelected(); 
if(!row){ 
alert(&#39;对不起，您还未选择数据!&#39;); 
return; 
} 
var row = grid_user.getSelectionModel().getSelected(); 
if(!row){ 
alert(&#39;对不起，您还未选择数据!&#39;); 
return; 
}

Copy after login

Create a pop-up subform.

Js code

var root=new Ext.tree.TreeNode({ 
id:"root", 
text:"所有操作", 
checked:false, 
iconCls:&#39;task-folder&#39; 
}); 
var tree=new Ext.tree.TreePanel({ 
frame:false, 
region:&#39;center&#39;, 
root:root, 
animate:true, 
enableDD:false, 
border:false, 
rootVisible:true, 
autoScroll:true 
}); 
var root=new Ext.tree.TreeNode({ 
id:"root", 
text:"所有操作", 
checked:false, 
iconCls:&#39;task-folder&#39; }); 
var tree=new Ext.tree.TreePanel({ 
frame:false, 
region:&#39;center&#39;, 
root:root, 
animate:true, 
enableDD:false, 
border:false, 
rootVisible:true, 
autoScroll:true 
});

Copy after login

Give prompts during data loading.

Js code

var win = new Ext.Window({ 
title:&#39;设置模块权限&#39;, 
closable:true, 
width:300, 
height:500, 
plain:true, 
layout:&#39;border&#39;, 
modal:true, 
items:[tree] 
}); 
win.show(this); 
var win = new Ext.Window({ 
title:&#39;设置模块权限&#39;, 
closable:true, 
width:300, 
height:500, 
plain:true, 
layout:&#39;border&#39;, 
modal:true, 
items:[tree] 
}); 
win.show(this);

Copy after login

Call the method with the root node, the selected user row, and the parent node flag as parameters.

Js code

Ext.MessageBox.show({ 
title:&#39;请稍候&#39;, 
msg:&#39;正在加载数据，请耐心等待...&#39;, 
progress:true 
}); 
Ext.MessageBox.show({ 
title:&#39;请稍候&#39;, 
msg:&#39;正在加载数据，请耐心等待...&#39;, 
progress:true 
});

Copy after login

obtains data from the background and displays the

method definition and method content on the client in tree form.

getNodes(row,root,&#39;root&#39;); 
getNodes(row,root,&#39;root&#39;);

Copy after login

Js code

Definition of JSON data.

Js code

function getNodes(row,root,parent){ 
//... 
} 
function getNodes(row,root,parent){ //...}

Copy after login

var record_pri = new Ext.data.Record.create([ 
{name:&#39;modelId&#39;}, 
{name:&#39;modelName&#39;}, 
{name:&#39;sort&#39;}, 
{name:&#39;canUse&#39;}, 
{name:&#39;privilegeId&#39;} 
]); 
var store_pri = new Ext.data.Store({ 
proxy: new Ext.data.HttpProxy({url:&#39;../&#39;}), 
reader: new Ext.data.JsonReader({root:&#39;rows&#39;},record_pri) 
}); 
var record_pri = new Ext.data.Record.create([ 
{name:&#39;modelId&#39;}, 
{name:&#39;modelName&#39;}, 
{name:&#39;sort&#39;}, 
{name:&#39;canUse&#39;}, 
{name:&#39;privilegeId&#39;} 
]); var store_pri = new Ext.data.Store({ 
proxy: new Ext.data.HttpProxy({url:&#39;../&#39;}), 
reader: new Ext.data.JsonReader({root:&#39;rows&#39;},record_pri) 
});

Copy after login

无刷新请求，获取数据并展现出来；并添加事件监听。当点击树某一节点时，判断是否已经从后台取得数据，如果还没有取则从后台获取数据，再根据返回的数据判断是叶子节点还是非叶子节点。然后以不同的方式展现与处理。
叶子节点和非叶子节点展现时，使用的图标不同。叶子节点没有添加单击事件，而非叶子节点添加了单击事件。
Js代码

Ext.Ajax.request({ 
url:&#39;http://www.cnblogs.com/../privilegeAction.do?method=list&#39;, 
params:{ 
userId:row.get(&#39;userId&#39;), 
parentId:parent 
}, 
success:function(response, request){ 
Ext.MessageBox.hide(); 
var res = Ext.util.JSON.decode(response.responseText); 
store_pri.loadData(res); 
for(var i=0;i<store_pri.getCount();i++){ 
var rec = store_pri.getAt(i); 
var canuse = (rec.get(&#39;canUse&#39;)==&#39;是&#39;?true:false); 
var modid = rec.get(&#39;privilegeId&#39;) + &#39;-id-&#39; + rec.get(&#39;modelId&#39;); 
var node; 
if(rec.get(&#39;sort&#39;)==&#39;菜单&#39;){ 
node = new Ext.tree.TreeNode({ 
text:rec.get(&#39;modelName&#39;), 
id:modid, 
checked:canuse, 
iconCls:&#39;task-folder&#39; 
}); 
node.on(&#39;click&#39;,function(node){ 
if(node.firstChild==null){ 
getNodes(row,node,get_mod_id(node.id)); 
} 
}); 
} else { 
node = new Ext.tree.TreeNode({ 
text:rec.get(&#39;modelName&#39;), 
id:modid, 
checked:canuse, 
iconCls:&#39;task&#39; 
}); 
} 
node.on(&#39;checkchange&#39;,function(node,check){ 
Ext.Ajax.request({ 
url:&#39;http://www.cnblogs.com/../privilegeAction.do?method=save2&#39;, 
params:{ 
privilegeId:get_rec_id(node.id), 
canuse:(check?&#39;是&#39;:&#39;否&#39;) 
}, 
success:function(response, request){ 

}, 
failure:function(){ 
Ext.MessageBox.hide(); 
alert(&#39;sorry!&#39;); 
} 
}); 
}); 
root.appendChild(node); 
} 
root.expand(); 
}, 
failure:function(){ 
Ext.MessageBox.hide(); 
alert(&#39;sorry!&#39;); 
} 
}); 
Ext.Ajax.request({ 
url:&#39;http://www.cnblogs.com/../privilegeAction.do?method=list&#39;, 
params:{ 
userId:row.get(&#39;userId&#39;), 
parentId:parent 
}, 
success:function(response, request){ 
Ext.MessageBox.hide(); 
var res = Ext.util.JSON.decode(response.responseText); 
store_pri.loadData(res); 
for(var i=0;i<store_pri.getCount();i++){ 
var rec = store_pri.getAt(i); 
var canuse = (rec.get(&#39;canUse&#39;)==&#39;是&#39;?true:false); 
var modid = rec.get(&#39;privilegeId&#39;) + &#39;-id-&#39; + rec.get(&#39;modelId&#39;); 
var node; 
if(rec.get(&#39;sort&#39;)==&#39;菜单&#39;){ 
node = new Ext.tree.TreeNode({ 
text:rec.get(&#39;modelName&#39;), 
id:modid, 
checked:canuse, 
iconCls:&#39;task-folder&#39; 
}); 
node.on(&#39;click&#39;,function(node){ 
if(node.firstChild==null){ 
getNodes(row,node,get_mod_id(node.id)); 
} 
}); 
} else { 
node = new Ext.tree.TreeNode({ 
text:rec.get(&#39;modelName&#39;), 
id:modid, 
checked:canuse, 
iconCls:&#39;task&#39; 
}); 
} 
node.on(&#39;checkchange&#39;,function(node,check){ 
Ext.Ajax.request({ 
url:&#39;http://www.jb51.net/../privilegeAction.do?method=save2&#39;, 
params:{ 
privilegeId:get_rec_id(node.id), 
canuse:(check?&#39;是&#39;:&#39;否&#39;) 
}, 
success:function(response, request){ 
}, 
failure:function(){ 
Ext.MessageBox.hide(); 
alert(&#39;sorry!&#39;); 
} 
}); 
}); 
root.appendChild(node); 
} 
root.expand(); 
}, 
failure:function(){ 
Ext.MessageBox.hide(); 
alert(&#39;sorry!&#39;); 
} });

Copy after login

当非叶子节点被点击时，递归地调用方法来获取孩子节点。
获取行的ID和模块的ID。树的节点将行的ID和模块的ID一起取出来了。不然的话，如果只取得模块ID，而不取行ID，那么在修改的时候，则不能进行正确的修改。
Js代码

function get_rec_id(str){ 
var arr = str.split(&#39;-id-&#39;); 
return arr[0]; 
} 
function get_mod_id(str){ 
var arr = str.split(&#39;-id-&#39;); 
return arr[1]; 
}

Copy after login