OA项⽬（增删改查功能基本实现---下）⼆、岗位管理模块的 CRUD 步骤1、编写岗位管理列表的界⾯（webapp / app / view / role / List.js），内容如下： Ext.define('le.List', {
extend: 'id.Panel',
alias: 'lelist',
layout : 'fit',
id : 'rolelist',
store: 'Roles',
selModel : ate('Ext.selection.CheckboxModel'),
tbar: {
xtype: 'toolbar',
items: [{
text: '添加',
iconCls : 'icon-add',
action: 'onAddClick'
},'-',{
iconCls : 'icon-delete',
action: 'onDeleteClick'
}]
},
/
/ dockedItems: [{
bbar: [{
xtype: 'pagingtoolbar',
store: 'Roles',
dock: 'bottom',
displayMsg: '显⽰ {0} - {1} 条记录，总共 {2} 条记录',
beforePageText: "第",
afterPageText: "页，共 {0} 页",
displayInfo: true三峡大学学报
}],
columns: [{
header: 'ID',
dataIndex: 'id',
}, {
header: '岗位',黄安炀
dataIndex: 'name',
flex: 1
}, {
header: '岗位描述',
dataIndex: 'description',
flex: 1
}],
});
PS：①、 tbar 定义顶部⼯具栏
②、bbar 定义底部⼯具栏，⾥⾯要传⼊ store，⽤于分页
步骤2、编写 store层组件（webapp / app / store / Roles.js） 内容如下：
Ext.define('OA.store.Roles', {
extend: 'Ext.data.Store',
model: 'OA.model.Role',
id : 'roleStore',
pageSize: 3,
autoLoad: true,
proxy: {
type: 'ajax', // 发送 ajax 请求
api: {
read: 'roleActionListByPage.action', // 请求分页查询的 URL
},
reader: {
type:'json', // 返回 JSON 格式数据
root: 'roles', // 指定数组（集合）的 key
totalProperty: 'totalCount' // 指定返回总记录数的 key
}
}
});
PS：①、 pageSize：3 表⽰每⼀页3条记录，在发送ajax 请求时会变成 limit=3 传⼊给后台
②、autoLoad : true, 表⽰创建组件的时候就加载数据
步骤3、编写 model 层组件（webapp / app / model / Role.js），内容如下：
Ext.define('OA.model.Role', {
extend: 'Ext.data.Model',
fields: ['id', 'name', 'description']
});
步骤4、编写 view层组件（webapp / app / view / role / RoleManagerWindow.js），内容如下：
Ext.define('le.RoleManagerWindow', {
extend: 'Ext.window.Window',
alias: "lemanagerwindow",
id: 'rolemanagerwindow',
title: '添加岗位',
layout: 'fit',
autoShow: true,
width: 300,
height: 200,化学是你化学是我
bodyPadding : '10 5',
modal : true,
initComponent: function(){
this.items = [{
xtype: 'form',
fieldDefaults : {
labelAlign : 'left',
labelWidth : 90,
破茧狂龙
anchor : '100%'
},
items: [{
xtype: 'textfield',
name: 'id',
fieldLabel: "ID",
readOnly : true
},{
xtype:'textfield',
name: 'name',
fieldLabel: "岗位"
}, {
xtype:'textfield',
name: 'description',
fieldLabel: "岗位描述"
}]
}];
this.buttons = ['->',{
text:'保存',
iconCls : 'icon-save',
action: 'save'
}, {
text:'取消',
iconCls : 'icon-cancel',
scope: this,
handler: this.close
},'->'];
this.callParent(arguments);
}
});
PS：action: 'save'，当点击保存时，调⽤某⽅法实现保存，该⽅法在 controller 层定义。步骤5、编写 controller 层组件（webapp / app / controller / Roles.js），内容如下： Ext.define('OA.controller.Roles', {
extend: 'Ext.app.Controller',
models: [
'Role'
],
'Roles' //先向控制器中注册 store组件，然后在 view层才可以使⽤这个 store存储的数据 ],
views: [
'role.List',
'role.RoleManagerWindow'
],
init: function(){
'rolelist': {
itemdblclick: this.editRole
},
'rolelist button[action="onAddClick"]':{ //点击新增按钮
click: AddClick
},
'rolelist button[action="onDeleteClick"]':{ // 点击删除按钮
click: DeleteClick
},
'rolemanagerwindow button[action="save"]' : {
click: Save //点击保存按钮
}
})
},
//点击添加按钮
onAddClick: function(btn){
var win = Ext.widget('rolemanagerwindow');
var form = win.down('form').getForm();
form.findField('id').hide();
},
/
/双击 grid数据
editRole: function(grid, record){
var win = Ext.widget('rolemanagerwindow');
win.setTitle('岗位信息修改');
win.down('form').loadRecord(record);
},
//点击删除按钮
onDeleteClick: function(){
var rolelist = Cmp('rolelist');
var me = this;
firm('删除确认', '删除的记录不可恢复，继续吗？', function(btn){
if(btn == 'yes'){
笑傲江湖ol什么时候公测
波导var s = SelectionModel().getSelection();
var ids = [];
var idProperty = 'id';
for (var i = 0, r; r = s[i]; i++) {
ids.(idProperty));
}
quest({
url : 'roleActionDelete.action',
params : {
ids : ids.join(',')
},
success : function(response) {
if (sponseText != '') {
var res = Ext.JSON.sponseText);
if (res.success) {
Ext.Msg.alert('消息提⽰', '删除成功');
// ample.msg('系统信息', '{0}', "操作成功！");
} else {
Ext.Msg.alert('消息提⽰', '删除失败，原因：'+res.msg);;
}
}
});
}
});
},
onSave: function(btn){
var rolelist = Cmp('rolelist');
//1.数据校验，校验通过后发起Ajax 请求
var win = btn.up('window');
var form = win.down('form').getForm();
if(form.isValid()){
var vals = Values();
var url;
if(vals['id'] == null || vals['id'] == ""){// 没有id值的，认为是新增操作
url = "roleActionAdd.action";
} else {
url = "roleActionUpdate.action";
}
console.info(url);
quest({
url: url,
params: {
'role.id':vals['id'],
'role.name': vals['name'],
'role.description' : vals['description']
},
method: 'POST',
success : function(response) {
if (sponseText != '') {
var res = Ext.JSON.sponseText);
if (res.success) {
Ext.Msg.alert('消息提⽰', '保存成功');
win.close();
} else {
Ext.Msg.alert('消息提⽰', '保存失败，原因：'+res.msg);;
}
}
},
failure : function(response) {
Ext.Msg.alert('消息提⽰', '保存失败');;
}
});
}
}
});
PS: ①、 将以上定义的 view 层、 model层、 store层组件注册到 controller 组件中
②、添加事件监听函数，如 双击列表某⼀列， 点击添加按钮，点击删除按钮，点击保存按钮。
三、分页查询
1、分页查询请求，当点击左侧树型菜单中的 "岗位管理" 时，在主区域tabpanel 添加 xtype：'rolelist'的 gridpanel ⾯板，由于设置了autoLoad： true，因此请求在加载 store的js⽂件的时候就以及发送出去了。
豫公网安备41160202000603
站长QQ:729038198
关于我们
投诉建议