extjs 的權(quán)限問題 要求控制的對象是 菜單，按鈕，URL
更新時間：2010年03月09日 20:32:03 作者：
這兩天在解決extjs 的權(quán)限問題。要求控制的對象是 菜單，按鈕，URL
解題思路1 ： 重載Connection類
由于extjs和server端交互全都是 json格式的數(shù)據(jù)交互，server端不會控制頁面的跳轉(zhuǎn)，頁面跳轉(zhuǎn)，提示功能全都有extjs來完成。
extjs和server端的交互方法全都是繼承自 Ext.data.Connection,這個類中可以攔截所有和server端交互的方法。
server端的權(quán)限控制用acegi做的，如果沒通過acegi的驗證，沒有授權(quán)會返回到403.jsp,需要重登錄會返回到 login.jsp。
因此重載Connection類，并改寫其中的 handleResponse 方法，判斷返回的結(jié)果是否是 403.jsp,login.jsp, 如果是就進(jìn)行相應(yīng)的控制，如果是正常的返回數(shù)據(jù)就繼續(xù)向下執(zhí)行。
我個人在403.jsp 和login.jsp 的第一行加上了 注釋代碼<!--權(quán)限控制自定義關(guān)鍵字-->,就是靠這個關(guān)鍵字來工作的
，代碼如下：
復(fù)制代碼 代碼如下:
//此處重載了Cunnection方法,用來攔截client與Server的交 互，
//后臺acegi攔截用戶請求后,如果無權(quán)限，返回403.jsp;如果沒登錄，返回login.jsp;
//通過Acegi攔截 后,才返回用戶想要的Json結(jié)果
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 : '錯誤提示',
msg : '禁止訪問此功能,請和系統(tǒng)管理員聯(lián)系',
buttons : Ext.Msg.OK,
icon : Ext.Msg.INFO
});
};
} else if (resText=='<!--404--'){
Ext.Msg.show({
title : '錯誤提示',
msg : '頁面未找到',
buttons : Ext.Msg.OK,
icon : Ext.Msg.INFO
});
}
})
});
解題思路2： server端返回菜單json數(shù)據(jù)
我的菜單用tree來做的，在初始化主頁面時先初始化菜單，
復(fù)制代碼 代碼如下:
loader : new Ext.tree.TreeLoader({
dataUrl : 'getJsonMenus.do'
}),
這個'getJsonMenus.do'返回菜單json數(shù)據(jù)，在strut2中的配置為：
<action name="getJsonMenus" class="jsonSystemAction" method="getJsonMenus">
<result type="json">
<param name="root">menus</param>
</result>
</action>
menus是個list<JsonMenu>,
JsonMenu的屬性為：
private String text;
private boolean expanded;
private String id;
private boolean leaf;
private List<JsonMenu> children;
getJsonMenus.do 返回的格式是可以滿足tree的格式要求的。
js代碼如下
復(fù)制代碼 代碼如下:
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 : '關(guān)于系統(tǒng)',
iconCls : 'icon-info',
handler : function() {
new Ext.Window({
closeAction : 'close',
resizable : false,
bodyStyle : 'padding: 7',
modal : true,
title : '關(guān)于本系統(tǒng)',
html : '本系統(tǒng)采用目前較為流行的技術(shù)實現(xiàn),<br>前臺使用了ExtJs技術(shù),所以實現(xiàn)了跨瀏覽器<br>' +
' 本程序在IE6,IE7,FireFox3均測試通過!<br><br>主要技術(shù): Struts2 + Spring + iBatis + ExtJs<br><br>'
+ '數(shù) 據(jù) 庫: Oracle 9i',
width : 300,
height : 200
}).show();
}
}, {
text : '退出系統(tǒng)',
iconCls : 'icon-delete',
handler : function() {
Ext.Msg.confirm('操作提示', '您確定要退出本系統(tǒng)?', function(btn) {
if ('yes' == btn) {
Ext.Ajax.request({
url : 'logout.do',
success : function() {
location = '/';
},
failure : function() {
Ext.Msg.show({
title : '錯誤提示',
msg : '退出系統(tǒng)失敗!',
icon : Ext.Msg.ERROR,
buttons : Ext.Msg.OK
});
}
});
}
});
}
}]
})
}],
items : [{
layout : 'accordion',
region : 'center',
items : [{
title : '導(dǎo)航菜單',
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 : '系統(tǒng)設(shè)置',
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);
});
這樣就得到了菜單，還有網(wǎng)友提出了異步菜單解決方法，我也把它列到下面
解題思路3 ： 同步加載所有的TAG,用hidden屬性控制顯示
所有的tag必須要同步加載后才可以控制component的hidden屬性，異步加載不好用。
同步加載的方法如下：
復(fù)制代碼 代碼如下:
//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", 'getJsonTags.do',false);
conn.send(null);
future_tag= eval('(' + conn.responseText + ')');
在js中TAG的用法如下：
復(fù)制代碼 代碼如下:
var btn_add_system = new Ext.Button({
text : '添加',
iconCls : 'icon-add',
hidden: FUTURE_TAG.system_add,
handler : function() {
window_add_system.show();
}
});
getJsonTags.do 返回一個Map對象，key是TAG名字，value是boolean
java的寫法如下：
復(fù)制代碼 代碼如下:
tagMap=new HashMap<String,Boolean>();
for (int i=0;i<allTagList.size();i++){
tagMap.put(allTagList.get(i).getResString(), true);
}
strut2配置如下：
復(fù)制代碼 代碼如下:
<action name="getJsonTags" class="jsonSystemAction" method="getJsonTags">
<result type="json">
<param name="root">tagMap</param>
</result>
</action>
這樣就可以在后臺控制前臺的組件是否顯示了，從而達(dá)到了我們的目的。
解決思路4：
通過ajax讀取服務(wù)器端的權(quán)限值，返回這樣的數(shù)據(jù)：
{tbar1: false, tbar2: true}
然后在extjs中：
var vResult = eval('(' + ajaxText + ')'); //得到{tbar1: false, tbar2: true}
這樣就可以直接給tbar賦值了
disabled: vResult.tbar1
disabled: vResult.tbar2
解決思路5：
設(shè)置模塊權(quán)限用于設(shè)置用戶可以操作的權(quán)限。允許設(shè)置用戶對模塊的可操作與不可操作。
彈出設(shè)置權(quán)限子窗體
設(shè)置權(quán)限之前須選擇一個用戶。
Js代碼
復(fù)制代碼 代碼如下:
var row = grid_user.getSelectionModel().getSelected();
if(!row){
alert('對不起，您還未選擇數(shù)據(jù)!');
return;
}
var row = grid_user.getSelectionModel().getSelected();
if(!row){
alert('對不起，您還未選擇數(shù)據(jù)!');
return;
}
創(chuàng)建一棵樹，樹放置在彈出窗體的中央。
Js代碼
復(fù)制代碼 代碼如下:
var root=new Ext.tree.TreeNode({
id:"root",
text:"所有操作",
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:"所有操作",
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
});
創(chuàng)建彈出子窗體。
Js代碼
復(fù)制代碼 代碼如下:
var win = new Ext.Window({
title:'設(shè)置模塊權(quán)限',
closable:true,
width:300,
height:500,
plain:true,
layout:'border',
modal:true,
items:[tree]
});
win.show(this);
var win = new Ext.Window({
title:'設(shè)置模塊權(quán)限',
closable:true,
width:300,
height:500,
plain:true,
layout:'border',
modal:true,
items:[tree]
});
win.show(this);
在加載數(shù)據(jù)期間，給予提示。
Js代碼
復(fù)制代碼 代碼如下:
Ext.MessageBox.show({
title:'請稍候',
msg:'正在加載數(shù)據(jù)，請耐心等待...',
progress:true
});
Ext.MessageBox.show({
title:'請稍候',
msg:'正在加載數(shù)據(jù)，請耐心等待...',
progress:true
});
將根節(jié)點(diǎn)，所選擇的用戶行，父節(jié)點(diǎn)標(biāo)志作為參數(shù)調(diào)用方法。
Js代碼
getNodes(row,root,'root');
getNodes(row,root,'root');
從后臺中取得數(shù)據(jù)并以樹形式在客戶端展現(xiàn)
方法定義與方法內(nèi)容。
Js代碼
復(fù)制代碼 代碼如下:
function getNodes(row,root,parent){
//...
}
function getNodes(row,root,parent){ //...}
JSON 數(shù)據(jù)的定義。
Js代碼
復(fù)制代碼 代碼如下:
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)
});
無刷新請求，獲取數(shù)據(jù)并展現(xiàn)出來；并添加事件監(jiān)聽。當(dāng)點(diǎn)擊樹某一節(jié)點(diǎn)時，判斷是否已經(jīng)從后臺取得數(shù)據(jù)，如果還沒有取則從后臺獲取數(shù)據(jù)，再根據(jù)返回的數(shù)據(jù)判斷是葉子節(jié)點(diǎn)還是非葉子節(jié)點(diǎn)。然后以不同的方式展現(xiàn)與處理。
葉子節(jié)點(diǎn)和非葉子節(jié)點(diǎn)展現(xiàn)時，使用的圖標(biāo)不同。葉子節(jié)點(diǎn)沒有添加單擊事件，而非葉子節(jié)點(diǎn)添加了單擊事件。
Js代碼
復(fù)制代碼 代碼如下:
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')=='是'?true:false);
var modid = rec.get('privilegeId') + '-id-' + rec.get('modelId');
var node;
if(rec.get('sort')=='菜單'){
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?'是':'否')
},
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')=='是'?true:false);
var modid = rec.get('privilegeId') + '-id-' + rec.get('modelId');
var node;
if(rec.get('sort')=='菜單'){
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://m.dhdzp.com/../privilegeAction.do?method=save2',
params:{
privilegeId:get_rec_id(node.id),
canuse:(check?'是':'否')
},
success:function(response, request){
},
failure:function(){
Ext.MessageBox.hide();
alert('sorry!');
}
});
});
root.appendChild(node);
}
root.expand();
},
failure:function(){
Ext.MessageBox.hide();
alert('sorry!');
} });
當(dāng)非葉子節(jié)點(diǎn)被點(diǎn)擊時，遞歸地調(diào)用方法來獲取孩子節(jié)點(diǎn)。
獲取行的ID和模塊的ID。樹的節(jié)點(diǎn)將行的ID和模塊的ID一起取出來了。不然的話，如果只取得模塊ID，而不取行ID，那么在修改的時候，則不能進(jìn)行正確的修改。
Js代碼
復(fù)制代碼 代碼如下:
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];
}
您可能感興趣的文章:
- jQuery EasyUI API 中文文檔 - MenuButton菜單按鈕使用介紹
- 單擊按鈕顯示隱藏子菜單經(jīng)典案例
- js使用DOM設(shè)置單選按鈕、復(fù)選框及下拉菜單的方法
- js+css實現(xiàn)有立體感的按鈕式文字豎排菜單效果
- jQuery EasyUI 菜單與按鈕之創(chuàng)建簡單的菜單和鏈接按鈕
- 輕松學(xué)習(xí)jQuery插件EasyUI EasyUI創(chuàng)建菜單與按鈕
- 基于Android實現(xiàn)點(diǎn)擊某個按鈕讓菜單選項從按鈕周圍指定位置彈出
- javascript+css3 實現(xiàn)動態(tài)按鈕菜單特效
- Bootstrap入門書籍之（四）菜單、按鈕及導(dǎo)航
- 第七章之菜單按鈕圖標(biāo)組件
相關(guān)文章
這篇文章主要介紹了extjs 時間范圍選擇自動判斷的實現(xiàn)代碼,需要的朋友可以參考下2014-06-06
使用ExtJS技術(shù)實現(xiàn)的拖動樹結(jié)點(diǎn)
在本文將介紹TreePanel組件非常有意思的一個功能：結(jié)點(diǎn)拖放。要使TreePanel組件的結(jié)點(diǎn)可以拖放非常簡單，只需要將TreePanel類的enableDD選項參數(shù)設(shè)為true即可。當(dāng)然，要想實現(xiàn)更復(fù)雜的功能，還需要配合其他的參數(shù)和事件。2010-08-08
ExtJS Column布局使用說明，需要的朋友可以參考下。2009-10-10
導(dǎo)入extjs、jquery 文件時$使用沖突問題解決方法
在html頁面中，沒有導(dǎo)入jquery文件時，可以正常保存，而導(dǎo)入jquery文件后，則不能不存了，發(fā)現(xiàn)導(dǎo)入的jquery文件和現(xiàn)有的extjs文件沖突了2014-01-01
應(yīng)用extjs需要在頁面中引入extjs的樣式及extjs庫文件2009-04-04
只需將textfield的hidden和hideLabel配置為true就可以了。只設(shè)置hidden:true時會顯示出來一個：的標(biāo)簽。2008-12-12
ANT 壓縮(去掉空格/注釋)JS文件可提高js運(yùn)行速度
在解決這個有很多優(yōu)化方法，今天來說其中一種，那就是在Ant腳本打包的時候，把js中空格、注釋去掉、以及合并，合并今天不說了，還未實現(xiàn)這個，在研究中2013-04-04
Extjs學(xué)習(xí)筆記之一 初識Extjs之MessageBox
去官網(wǎng)下載好extjs的壓縮包，解壓縮之后得到如下目錄結(jié)構(gòu)。2010-01-01
Ext JS框架程序中阻止鍵盤觸發(fā)回退或者刷新頁面的代碼分享
鍵盤上的F5或者退格鍵等按鍵一般來說會觸發(fā)頁面的后退或者刷新事件,然而這些在前端用代碼是可以給屏蔽掉的,這里我們就來看一下Ext JS框架程序中阻止鍵盤觸發(fā)回退或者刷新頁面的代碼分享2016-06-06
Iframe 有的時候還是須要的，比如在Tab中嵌入報表、嵌入其它系統(tǒng)的界面。下面代碼是項目中一段。希望對用ExtJS開發(fā)的兄弟做個參考。2010-03-03