ExtJS permissions issues require control of the object is the menu, button, Url_extjs

Ideas for solving Problems 1: Overloaded Connection class
Because ExtJS and server-side interactions are all JSON-formatted data interactions, the server side does not control the page's jump, page jumps, and hints are all ExtJS to complete.
ExtJS and server-side interaction methods are all inherited from Ext.data.Connection, which can intercept all methods of interacting with the server side.
Server-side permissions control with Acegi, if not through ACEGI authentication, no authorization will return to 403.jsp, need to log back to login.jsp.
So overload connection class, and rewrite the Handleresponse method, to determine whether the return of the result is 403.jsp,login.jsp, if it is the corresponding control, if the normal return data will continue to execute downward.
I personally added the annotation code <!--permission control to the first line of 403.jsp and login.jsp. The key word is to work on this keyword.
, the code is as follows:

Copy Code code as follows:

//Here Overloads the Cunnection method to intercept client-server interaction,
//background Acegi intercepts user requests, if no permissions, return to 403.jsp; if not logged in, return to login.jsp;
//After Acegi interception, returns the JSON result that the user wants
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== ' <!--login ') {
Window.top.location.href = topurl+ "/login.jsp";
} else if (restext== ' <!--deny-') {
if (restext== ' <!--deny-') {
Ext.Msg.show ({
Title: ' Error prompt ',
Msg: ' Disable access to this feature, contact your system administrator ',
Buttons:Ext.Msg.OK,
Icon:Ext.Msg.INFO
};
};
} else if (restext== ' <!--404--') {
Ext.Msg.show ({
Title: ' Error prompt ',
MSG: ' Page not found ',
Buttons:e Xt. Msg.ok,
Icon:Ext.Msg.INFO
});
}
})
});

Ideas for solving problems 2:server return menu JSON data
My menu uses tree to initialize the menu when initializing the main page.

Copy Code code as follows:

Loader:new Ext.tree.TreeLoader ({
Dataurl: ' Getjsonmenus.do '
}),
This ' getjsonmenus.do ' returns the menu JSON data, which is configured in STRUT2:
<action name= "Getjsonmenus" class= "jsonsystemaction" method= "Getjsonmenus" >
<result type= "JSON" >
<param name= "Root" >menus</param>
</result>
</action>

Menus is a list<jsonmenu>
The Jsonmenu properties are:
private String text;
Private Boolean expanded;
Private String ID;
Private Boolean leaf;
Private list<jsonmenu> children;
Getjsonmenus.do returns a format that can satisfy the tree's format requirements.
JS code is as follows

Copy Code code as follows:

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: ' Start ',
Iconcls: ' Icon-plugin ',
Menu:new Ext.menu.Menu ({
Items: [{
Text: ' About Systems ',
Iconcls: ' Icon-info ',
Handler:function () {
New Ext.window ({
Closeaction: ' Close ',
Resizable:false,
Bodystyle: ' Padding:7 ',
Modal:true,
Title: ' About this system ',
HTML: ' This system uses the current more popular technology to realize,<br> foreground uses the ExtJS technology, therefore realizes the Cross browser <br> ' +
' This procedure is tested through!<br><br> main technology in IE6,IE7,FIREFOX3: Struts2 + Spring + iBatis + extjs<br><br> '
+ ' database: Oracle 9i ',
WIDTH:300,
height:200
). Show ();
}
}, {
Text: ' Exit system ',
Iconcls: ' Icon-delete ',
Handler:function () {
Ext.Msg.confirm (' Operation Prompt ', ' Are you sure you want to exit this system? ', function (BTN) {
if (' yes ' = = btn) {
Ext.Ajax.request ({
URL: ' Logout.do ',
Success:function () {
Location = '/';
},
Failure:function () {
Ext.Msg.show ({
Title: ' False hint ',
Msg: ' Exit system failed! ',
Icon:Ext.Msg.ERROR,
Buttons:Ext.Msg.OK
});
}
});
}
});
}
}]
})
}],
Items: [{
Layout: ' Accordion ',
Region: ' Center ',
Items: [{
Title: ' Navigation Menu ',
Iconcls: ' Icon-nav ',
Border:false,
Items: [{
Xtype: ' Treepanel ',
Border:false,
Rootvisible:false,
Autoscroll:true,
Loader:new Ext.tree.TreeLoader ({
Dataurl: ' Getjsonmenus.do '
}),
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: ' System Settings ',
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);
});

So I got the menu, and the user put forward the asynchronous menu solution, I also listed it below
The idea of solving problems 3: Load all the tags synchronously, use the hidden property to control the display
All the tags must be synchronized to load before you can control the component hidden properties, asynchronous loading is not good.
The methods for loading synchronously are as follows:

Copy Code code as follows:

Future_tag Global tag Control class, control component hidden attribute, Key=tag name, Value=true (component hidden), False (component display)
var future_tag={tbar1:false, tbar2:true};
var conn = Ext.lib.Ajax.getConnectionObject (). Conn;
Conn.Open ("Get", ' getjsontags.do ', false);
Conn.send (NULL);
future_tag= eval (' (' + conn.responsetext + ') ');

The use of tag in JS is as follows:

Copy Code code as follows:

var btn_add_system = new Ext.button ({
Text: ' Add ',
Iconcls: ' Icon-add ',
Hidden:FUTURE_TAG.system_add,
Handler:function () {
Window_add_system.show ();
}
});

Getjsontags.do returns a Map object, the key is the tag name, and value is a Boolean
The Java syntax is as follows:

Copy Code code as follows:

Tagmap=new hashmap<string,boolean> ();
for (int i=0;i<alltaglist.size (); i++) {
Tagmap.put (Alltaglist.get (i). Getresstring (), true);
}

The STRUT2 configuration is as follows:

Copy Code code as follows:

<action name= "Getjsontags" class= "jsonsystemaction" method= "Getjsontags" >
<result type= "JSON" >
<param name= "Root" >tagMap</param>
</result>
</action>

This allows you to control the foreground component in the background to see if it has been shown, thus achieving our goal.
Solution Idea 4:
Using AJAX to read the server-side permission values, return such data:
{Tbar1:false, tbar2:true}
And then in the ExtJS:
var vresult = eval (' (' + ajaxtext + ') '); get {tbar1:false, tbar2:true}
So you can assign values directly to Tbar.
Disabled:vResult.tbar1
Disabled:vResult.tbar2
Solution Idea 5:
Set module permissions to set permissions that users can manipulate. Allows you to set the user's operation and operation to the module.
Popup Set Permission Subform
You must select a user before you set permissions.
JS Code

Copy Code code as follows:

var row = Grid_user.getselectionmodel (). getselected ();
if (!row) {
Alert (' Sorry, you have not selected data! ');
Return
}
var row = Grid_user.getselectionmodel (). getselected ();
if (!row) {
Alert (' Sorry, you have not selected data! ');
Return
}

Create a tree where the tree is placed in the middle of the pop-up form.
JS Code

Copy Code code as follows:

var root=new Ext.tree.TreeNode ({
ID: "Root",
Text: "All Actions",
Checked:false,
Iconcls: ' Task-folder '
});
var tree=new Ext.tree.TreePanel ({
Frame:false,
Region: ' Center ',
Root:root,
Animate:true,
Enabledd:false,
Border:false,
Rootvisible:true,
Autoscroll:true
});
var root=new Ext.tree.TreeNode ({
ID: "Root",
Text: "All Actions",
Checked:false,
Iconcls: ' Task-folder '});
var tree=new Ext.tree.TreePanel ({
Frame:false,
Region: ' Center ',
Root:root,
Animate:true,
Enabledd:false,
Border:false,
Rootvisible:true,
Autoscroll:true
});

Create a pop-up subform.
JS Code

Copy Code code as follows:

var win = new Ext.window ({
Title: ' Set module Permissions ',
Closable:true,
WIDTH:300,
HEIGHT:500,
Plain:true,
Layout: ' Border ',
Modal:true,
Items:[tree]
});
Win.show (this);
var win = new Ext.window ({
Title: ' Set module Permissions ',
Closable:true,
WIDTH:300,
HEIGHT:500,
Plain:true,
Layout: ' Border ',
Modal:true,
Items:[tree]
});
Win.show (this);

Prompts are given during data loading.
JS Code

Copy Code code as follows:

Ext.MessageBox.show ({
Title: ' Please wait ',
Msg: ' Loading data, please wait patiently ... ',
Progress:true
});
Ext.MessageBox.show ({
Title: ' Please wait ',
Msg: ' Loading data, please wait patiently ... ',
Progress:true
});

Invokes the method with the root node, the selected user row, and the parent node flag as a parameter.
JS Code
Getnodes (row,root, ' root ');
Getnodes (row,root, ' root ');
Getting data from the background and presenting it in a tree form on the client
Method definition and method content.
JS Code

Copy Code code as follows:

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

The definition of JSON data.
JS Code

Copy Code code as follows:

var record_pri = new Ext.data.Record.create ([
{name: ' ModelID '},
{name: ' ModelName '},
{name: ' Sort '},
{name: ' Canuse '},
{name: ' Privilegeid '}
]);
var store_pri = new Ext.data.Store ({
Proxy:new Ext.data.HttpProxy ({url: ' ... /'}),
Reader:new Ext.data.JsonReader ({root: ' Rows '},record_pri)
});
var record_pri = new Ext.data.Record.create ([
{name: ' ModelID '},
{name: ' ModelName '},
{name: ' Sort '},
{name: ' Canuse '},
{name: ' Privilegeid '}
]); var store_pri = new Ext.data.Store ({
Proxy:new Ext.data.HttpProxy ({url: ' ... /'}),
Reader:new Ext.data.JsonReader ({root: ' Rows '},record_pri)
});

No refresh request, get the data and show it, and add event listening. When you click on a node in the tree, to determine whether the data has been obtained from the background, if not yet taken from the background to obtain data, and then based on the data returned to judge is the leaf node or not leaf node. And then show and deal with it in a different way.
When the leaf nodes and the non leaf nodes are displayed, the icons used are different. The leaf node did not add a click event, but not a leaf node added a click event.
JS Code

Copy Code code as follows:

Ext.Ajax.request ({
URL: ' Http://www.cnblogs.com/../privilegeAction.do?method=list ',
params:{
UserId:row.get (' UserId '),
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 (' canuse ') = = ' is '? true:false);
var modid = rec.get (' privilegeid ') + '-id-' + rec.get (' modelid ');
var node;
if (rec.get (' sort ') = = ' Menu ') {
node = new Ext.tree.TreeNode ({
Text:rec.get (' modelname '),
Id:modid,
Checked:canuse,
Iconcls: ' Task-folder '
});
Node.on (' click ', Function (node) {
if (node.firstchild==null) {
Getnodes (row,node,get_mod_id (node.id));
}
});
} else {
node = new Ext.tree.TreeNode ({
Text:rec.get (' modelname '),
Id:modid,
Checked:canuse,
ICONCLS: ' Task '
});
}
Node.on (' Checkchange ', function (Node,check) {
Ext.Ajax.request ({
URL: ' Http://www.cnblogs.com/../privilegeAction.do?method=save2 ',
params:{
PRIVILEGEID:GET_REC_ID (Node.id),
Canuse: (check? ') Yes ': ' No ')
},
Success:function (response, request) {

},
Failure:function () {
Ext.MessageBox.hide ();
Alert (' sorry! ');
}
});
});
Root.appendchild (node);
}
Root.expand ();
},
Failure:function () {
Ext.MessageBox.hide ();
Alert (' sorry! ');
}
});
Ext.Ajax.request ({
URL: ' Http://www.cnblogs.com/../privilegeAction.do?method=list ',
params:{
UserId:row.get (' UserId '),
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 (' canuse ') = = ' is '? true:false);
var modid = rec.get (' privilegeid ') + '-id-' + rec.get (' modelid ');
var node;
if (rec.get (' sort ') = = ' Menu ') {
node = new Ext.tree.TreeNode ({
Text:rec.get (' modelname '),
Id:modid,
Checked:canuse,
Iconcls: ' Task-folder '
});
Node.on (' click ', Function (node) {
if (node.firstchild==null) {
Getnodes (row,node,get_mod_id (node.id));
}
});
} else {
node = new Ext.tree.TreeNode ({
Text:rec.get (' modelname '),
Id:modid,
Checked:canuse,
ICONCLS: ' Task '
});
}
Node.on (' Checkchange ', function (Node,check) {
Ext.Ajax.request ({
URL: ' Http://www.jb51.net/../privilegeAction.do?method=save2 ',
params:{
PRIVILEGEID:GET_REC_ID (Node.id),
Canuse: (check? ') Yes ': ' No ')
},
Success:function (response, request) {
},
Failure:function () {
Ext.MessageBox.hide ();
Alert (' sorry! ');
}
});
});
Root.appendchild (node);
}
Root.expand ();
},
Failure:function () {
Ext.MessageBox.hide ();
Alert (' sorry! ');
} });

When the non-leaf node is clicked, the recursive method is invoked to get the child node.
Gets the ID of the row and the module's ID. The node of the tree takes the ID of the row and the ID of the module out together. Otherwise, if you only get the module ID and not the row ID, you cannot modify it correctly when you modify it.
JS Code

Copy Code code as follows:

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