前几天,有论坛水友问Extjs4的权限系统,本人学extjs4也有段时间了,写了个权限系统,供大家参考,写的不好,请大家修改,指证后台是用ssh写的,(集成多项目的平台,贴出代码对大家也没有多少用),具体的实现过程就不贴了,只贴主要的部分,有看不明白了,留言
(注:本权限系统是为集成平台一库多项目设计,其中数据表前辍来区分,我尽量写一项目用的)
1. 数据库表
(1),M_Menu_Info(图) (注:其中menutype为菜单类型(菜单or按钮),superid为上级菜单,iconcls可设置这个菜单(or按钮)的图片)
(2),M_User_Info(图) 简单的用户表,如果一个用户只有一个角色,就在表中写入一个角色表Id(roleId),如果一个人多个角色,请配置多对多的表
(3),HX_Authority_RoleInfo(图) 简单的角色表
(4),HX_Authority_RoleMenu角色权限表,HX_Authority_UserMenu用户独立权限表(图)
2. 前台
(1),先做个菜单管理的treegrid,方便管理系统中的菜单,代码就不共享了,不会的同学,请去学习一下treegrid,付图
(2),做 用户管理的增删改查,角色的增删查,(对数据的维护)
(3),做权限管理的菜单 , tabpanel 中分又装个一个tabpanel,写两个tab,角色权限和用户独立权限,
实现过大概如下,通过上面combo中的数据,加载出HX_Authority_RoleMenu(or HX_Authority_UserMenu) 相应的权限,显示到treegrid 中,用户可以通过treegrid方便分个角色的权,如果是用第二个tab,用户独立权限,他的权限,包含相应的角色权限,显示grid,
保存数据就可以了,数据格式如 权限表图
(4),动态显示菜单和页中的按钮 在用户登录成功后,先动态加载treepanel(accordion布局,一级菜单),然后在各自的treepanel中加载它下面的权限菜单,显示出来就行了, 付图
(5),页面权限按钮的显示 写段脚本吧,
SetToolButtons = function(tbr) {
Ext.Ajax.request({
url : '/movie/bookDeclareKey.do?action=gridButton',//请求按钮的权限地址
callback : function(options,success,response){//回调函数
var btnJSONArr= Ext.JSON.decode(response.responseText);
for (var i = 0; i < btnJSONArr.length; i++) {
if(btnJSONArr.handler!=''){
btnJSONArr =Ext.create('Ext.button.Button',{
text: btnJSONArr.text,
iconCls: btnJSONArr.iconCls,
handler : eval('('+btnJSONArr.handler+')')
});
}else{
btnJSONArr =Ext.create('Ext.button.Button',{
text: btnJSONArr.text,
iconCls: btnJSONArr.iconCls});
}
tbr.add(btnJSONArr);
}
}
});
}
var gridbar = Ext.create('Ext.container.ButtonGroup',{
width : 700,
height : 28
});
SetToolButtons(gridbar);
以上基本写的差不多了吧,
大家尽量写写,如果有完成不了,交流一下!
上次论坛有个水友,共享个登录的页面,(写的真是丑),我也共享个我想的吧,,(只共享js了)付图
login.js
function reloadcode() {// 刷新验证码函数
var verify = document.getElementById('safecode');
verify.setAttribute('src', "/theaters/code/CheckCode?now=" + new Date());
}
Ext.onReady(function() {
var select_status = new Ext.data.JsonStore({
url : "/theaters/code/CheckCode?now=" + new Date(),
fields : ['name', 'value'],
totalProperty : "total",
root : "result",
id : "name"
});
var textfield =
Ext.QuickTips.init();
var login = new Ext.FormPanel({
id : 'login',
name : 'login',
//layout:'form',
baseCls : 'x-plain',
bodyStyle : 'padding:5 5 0 0',
width : 350,
border : false,
defaults : {
autoFitErrors : false,
labelSeparator : ':',
labelWidth : 50,
labelAlign : 'left',
width : 230,
allowBlank : false,
msgTarget : 'side'
},
defaultType : 'textfield',// 默认字段类型
items : [{
fieldLabel : "用户名",
fieldCls : 'loginKeyCss',
disabled : this.mydisabled,
name : "userName",
id:"unameid",
blankText : "请输入用户名"
}, {
fieldLabel : "密 码",
fieldCls : 'verifyKeyCss',
disabled : this.mydisabled,
name : "userPsw",
id:"upassid",
blankText : "请输入密码",
inputType : "password"
}, {
cls : 'key',
fieldCls : 'checkCodeCss',
name : 'checkCode',
id : 'randCode',
fieldLabel : '验证码',
emptyText : "请输入验证码",
maxLength : 4,
blankText : '验证码不能为空!'
}],
buttons : [{
text : '登录',
handler : submit_login
}, {
text : '取消',
handler : function() {
login.form.reset();
}// 重置表单
}],
bbar : [{
html : '<font size=1 color=gray>版权所有(C) 2011-2012 上海海锐信息技术有限公司 v11.1</font>'
}]
});
var win = new Ext.Window({
id : 'win',
title : '<div align="center"><font size=2>电影数据综合业务处理系统--用户登录</font></div>',
layout : 'fit',
width : 280,
height : 220,
bodyStyle : 'padding:5px;',
maximizable : false,
closeAction : 'close',
closable : false,
resizable:false,
collapsible : true,
modal:true,
//plain : true,
//buttonAlign : 'center',
items : login
});
win.show();
var bd = Ext.getDom('randCode');
var bd2 = Ext.get(bd.parentNode);
bd2.createChild([{
tag : 'span',
html : ' <a href="javascript:reloadcode();">'
}, {
tag : 'img',
id : 'safecode',
src : "/theaters/code/CheckCode?now=" + new Date(),
align : 'absbottom'
}, {
tag : 'span',
html : '</a> <b>点击图片可刷新</b>'
}]);
function submit_login() {
if (win.getComponent('login').form.isValid()) {
win.getComponent('login').form.submit({
url : '/theaters/checklogin.do?action=checklogin',
waitTitle : '提示',
method : 'POST',
waitMsg : '正在登录验证,请稍候...',
success : function(form, action) {
var loginResult = action.result.success;
if (loginResult == false) {
Ext.MessageBox.alert('提示', action.result.message);
} else if (loginResult == true) {
Ext.MessageBox.alert('提示', action.result.message);
window.location.href = "/theaters/checklogin.do?action=login";
}
},
failure : function(form, action) {
Ext.MessageBox.alert('提示', action.result.message);
win.getComponent('login').form.reset();
reloadcode();
}
});
}
}
var map = new Ext.util.KeyMap('login', {
key: 13, // or Ext.EventObject.ENTER
fn: submit_login,
scope: this
});
Ext.getCmp("unameid").setValue("hxadmin");
Ext.getCmp("upassid").setValue("1");
});