1.
/**
* @author sux
* @time 2011-1-14
* @desc 部门信息显示
*/
deptInfoGridPanel = Ext.extend(Ext.grid.EditorGridPanel,{
id: 'deptInfoPanel',
//renderTo: Ext.getBody(), //渲染到body
constructor: function(){
Ext.QuickTips.init();
this['store'] = new Ext.data.JsonStore({
url: 'dept_list.action',
root: 'root',
totalProperty: 'totalProperty',
//record
fields: ['deptId','deptName',
'deptNum','deptMgr','deptRemark']
});
var rowNumber = new Ext.grid.RowNumberer(); //序列号
var checkbox = new Ext.grid.CheckboxSelectionModel(); //{默认是多选singleSelect: false}
deptInfoGridPanel.superclass.constructor.call(this,{
width: Ext.getCmp('mainTab').getActiveTab().getInnerWidth(),
height: Ext.getCmp('mainTab').getActiveTab().getInnerHeight(),
/**表格高度自适应 document.body.clientHeight浏览器页面高度 start**/
monitorResize: true,
doLayout: function() {
this.setWidth(document.body.clientWidth-);
this.setHeight(document.body.clientHeight-);
Ext.grid.GridPanel.prototype.doLayout.call(this);
} ,
/**end**/
viewConfig: {
forceFit: true,
columnsText : "显示/隐藏列",
sortAscText : "正序排列",
sortDescText : "倒序排列"
},
sm: checkbox,
columns: [
rowNumber, checkbox,
{
header: '部门编号',
dataIndex: 'deptId',
align: 'center'
},{
header: '部门名称',
dataIndex: 'deptName',
align: 'center'
},{
header: '部门人数',
dataIndex: 'deptNum',
align: 'center'
},{
header: '部门经理',
dataIndex: 'deptMgr',
align: 'center'
},{
header: '备注',
dataIndex: 'deptRemark',
name: 'deptRemark',
renderer: Ext.hrmsys.grid.tooltip.subLength,
align: 'center'
}],
tbar: new Ext.Toolbar({
style: 'padding: 5px;',
id: 'departToolbar',
items: ['条目:',{
xtype: 'combo',
width: ,
triggerAction: 'all',
editable: false,
mode: 'local',
store: new Ext.data.SimpleStore({
fields: ['name','value'],
data: [[" ","全部"],["deptId","部门编号"],["deptName","部门名称"],["deptMgr","部门经理"]]
}),
id: 'condition_dept',
displayField: 'value',
valueField: 'name',
emptyText: '请选择'
},'内容:',{
id: 'condition_dept_value',
xtype: 'textfield',
listeners : {
specialkey : function(field, e) {//添加回车事件
if (e.getKey() == Ext.EventObject.ENTER) {
queryDeptFn();
}
}
}
},{
text: '查询',
tooltip: '查询部门',
iconCls: 'search',
hidden: 'true',
id: 'dept_query',
handler: queryDeptFn
},{
text: '删除',
tooltip: '删除部门',
id: 'dept_delete',
iconCls: 'delete',
hidden: 'true',
handler: delDeptFn
},{
text: '添加',
tooltip: '添加部门',
id: 'dept_add',
hidden: 'true',
iconCls: 'add',
handler: addDeptFn
},{
text: '修改',
id: 'dept_update',
iconCls: 'update',
hidden: 'true',
tooltip: '修改部门',
handler: updateDeptFn
}]
}),
bbar: new PagingToolbar(this['store'], )
});
this.getStore().load({
params:{
start: ,
limit:
}
});
//new Ext.Viewport().render();
}
}); addDeptFn = function(){
deptAddWin = new DeptAddWin();
deptAddWin.show();
}; delDeptFn = function(){
gridDel('deptInfoPanel','deptId', 'dept_delete.action');
}; updateDeptFn = function(){
deptAddWin = new DeptAddWin();
deptAddWin.title = '部门信息修改';
var selectionModel = Ext.getCmp('deptInfoPanel').getSelectionModel();
var record = selectionModel.getSelections();
if(record.length != ){
Ext.Msg.alert('提示','请选择一个');
return;
}
var deptId = record[].get('deptId');
Ext.getCmp('deptAddFormId').getForm().load({
url: 'dept_intoUpdate.action',
params: {
deptId: deptId
}
})
deptAddWin.show();
}; queryDeptFn = function(){
var condition = Ext.getCmp('condition_dept').getValue();
var conditionValue = Ext.getCmp("condition_dept_value").getValue();
Ext.getCmp("deptInfoPanel").getStore().reload({
params: {
condition: condition,
conditionValue : conditionValue,
start: ,
limit:
}
})
};
2.添加一个新的部门窗口
Ext.namespace("hrmsys.dept.add");
//新建一个window窗口
DeptAddWin = Ext.extend(Ext.Window,{
id: 'deptAddWinId',
addForm: null,
constructor: function(){
addForm = new DeptAddForm();
DeptAddWin.superclass.constructor.call(this,{
title: '部门录入',
width: 400,
modal: true,
height: 350,
collapsible: true,
colsable: true,
layout: 'form',
items: [addForm]
})
}
})
//窗口里包含一个Form面板
DeptAddForm = Ext.extend(Ext.form.FormPanel,{
id: 'deptAddFormId',
constructor: function(){
Ext.QuickTips.init();
//加载后台数据，进行转换
var reader = new Ext.data.JsonReader({},[{
name: 'dept.deptId' , mapping: 'deptId'
},{
name: 'dept.deptName', mapping: 'deptName'
},{
name: 'dept.deptMgr', mapping: 'deptMgr'
},{
name: 'dept.deptRemark', mapping: 'deptRemark'
}]);
DeptAddWin.superclass.constructor.call(this, {
labelWidth: 80,
padding: '20 0 0 50',
reader: reader,
labelAlign: 'right',
border: false,
frame: true,
items: [{
xtype: 'textfield',
fieldLabel: '部门编号',
allowBlank: false,
msgTarget: 'side',
blankText: '不能为空',
emptyText: '不能为空',
width: 150,
name: 'dept.deptId'
},{
xtype: 'textfield',
fieldLabel: '部门名称',
allowBlank: false,
msgTarget: 'side',
blankText: '不能为空',
emptyText: '不能为空',
width: 150,
name: 'dept.deptName'
},{
xtype: 'textfield',
width: 150,
fieldLabel: '部门经理工号',
id: 'empId',
msgTarget: 'side',
listeners: {'blur': blurFn}
},{
xtype: 'textfield',
fieldLabel: '部门经理姓名',
width: 150,
id: 'empName',
name: 'dept.deptMgr',
readOnly: true
},{
xtype: 'textarea',
fieldLabel: '备注',
width: 150,
height: 150,
name: 'dept.deptRemark'
}],
buttonAlign: 'center',
buttons: [{
text: '保存',
handler: function(){
//验证表单填写的数据是否有效
if(!Ext.getCmp('deptAddFormId').getForm().isValid()){
return;
}
//提交表单
Ext.getCmp('deptAddFormId').getForm().submit({
url: 'dept_save.action',
method: 'post',
waitMsg: '正在保存数据...',
waitTitle: '提示',
scope: this,
success: saveDeptSuccessFn,
failure: save_failure
})
}
},{
text: '关闭',
handler: function(){
Ext.getCmp('deptAddWinId').destroy();
}
}]
})
}
});
//提交表单成功处理函数
saveDeptSuccessFn = function(form, action){
//消息提示框
Ext.Msg.confirm('提示', action.result.msg, function(button, text){
if(button == "yes"){
form.reset();
//销毁面板
Ext.getCmp('deptAddWinId').destroy();
//reload()重新加载数据时
Ext.getCmp('deptInfoPanel').getStore().reload();//刷新部门显示列表
}
});
};
//提交失败处理函数
save_failure = function(form, action){
Ext.Msg.alert('提示',"连接失败", function(){
});
};
//工号失焦点事件
blurFn = function(value){
var empId = value.getRawValue();
Ext.Ajax.request({
url: 'emp_isExist.action',
method: 'post',
params: {
empId: empId
},
success: isExistSuccessFn,
failure: save_failure
})
};
isExistSuccessFn = function(response, options){
if(response.responseText != "")
Ext.get('empName').dom.value = response.responseText;
else{
////成批设置表单字段为验证无效
Ext.getCmp('empId').markInvalid('此工号不存在');
}
};3.删除部门
/**
* 删除表格中选中的内容
* @param {Object} panelId 表单面板的Id
* @param {Object} delId 数据库的删除时依据的属性
* @param {Object} url 提交的URL
* @return {TypeName}
*/ function gridDel(panelId, delId, url){
//中某一行值
var oSelMode = Ext.getCmp(panelId).getSelectionModel();
//某一列的值
var oRecords = oSelMode.getSelections();
var ids = "";
for(var i=0;i<oRecords.length;i++){
ids += oRecords[i].get(delId);
if(i != oRecords.length-1) ids += ",";
};
if(ids != null && ids != ""){
Ext.Msg.confirm("提示","确定删除",function(button, text){
if(button == "yes"){
Ext.Ajax.request({
url: url,
success: function(response, options){
var datas = Ext.util.JSON.decode(response.responseText);
Ext.Msg.alert("提示", datas.msg, function(){
Ext.getCmp(panelId).getStore().reload();
})
},
failure: function(response, options){
Ext.Msg.alert("提示", '连接失败', function(){})
},
params: {
ids: ids
}
})
}
})
}else{
Ext.Msg.alert("提示","请先选择",function(){});
}
};
/**
* 分页栏类
* @param {Object} store 表格存储store
* @param {Object} pageSize 页面大小
* @memberOf {TypeName}
*/
PagingToolbar = Ext.extend(Ext.PagingToolbar, {
constructor: function(store, pageSize){
PagingToolbar.superclass.constructor.call(this, {
store: store,
pageSize: pageSize, //页面大小
displayInfo: true,
displayMsg : '共<font color="red"> {2} </font>条记录,当前页记录索引<font color="red"> {0} - {1}</font> ',
emptyMsg: '没有数据',
refreshText: '刷新',
firstText: '第一页',
prevText: '前一页',
nextText: '下一页',
lastText: '最后一页'
})
}
})
4.部门信息jsp页面
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<script type="text/javascript">
var deptPanel = new deptInfoGridPanel();
var tabId = Ext.getCmp('mainTab').getActiveTab().id.split('_')[1];
juage(tabId,"dept",deptPanel,"tab");
//deptPanel.render("tab");
</script>
<div id="tab" ></div>
5.
/**
* 根据用户权限显示不同的页面
* 前后得到的菜单节点id和后台用户的角色id查询数据库获得用户权限
* @param {Object} id 页面id,本质是菜单节点的id
* @param {Object} page 按钮id前缀
* @param {Object} cmp 组件
* @param {Object} renderId 渲染的id
*/
function juage(id,page,cmp, renderId){
//设置遮罩，当按钮隐藏之后，再隐藏遮罩
var myMask = new Ext.LoadMask('mainTab', {msg:"请稍等..."});
myMask.show();
Ext.Ajax.request({
url: 'permission_permission.action',
method: 'post',
success: function (response, options){
var datas = response.responseText;
if(datas != ''){
var fn = datas.split(' ');
for(var i = 0; i< fn.length; i++){
var comp = Ext.getCmp(page+'_'+fn[i]);
if(comp){
comp.show(); //将没有权限的按钮隐藏hiden
}
}
}
//1.调用组件的render方法
//renderer可以格式化该列显示的数据格式或者按照你自定义的脚本显示最终数据样子，个人是这么理解，如果你不是可以看下本文
cmp.render(renderId);
myMask.hide();
},
failure: function(response, options){
Ext.Msg.alert('提示','连接后台失败');
},
params: {
menuId: id
}
})
};