Crud组件实现:
/**
* 定义命名空间
*/
Ext.namespace("Ext.darkness");
/*
*CRUD面板基类,继承自EXT的Panel
*/
Ext.darkness.CrudPanel = Ext.extend(Ext.Panel, {
/**
*基本属性
*/
gridPanel:null,
gridPanelId: 'gridPanel' + this.ID,
gridViewConfig: {},
cm: new Ext.grid.CheckboxSelectionModel(),
sm: new Ext.grid.CheckboxSelectionModel({
dataIndex: this.ID
}),//-列选择模式
store: null,
storeMapping: null,
pageSize: null,
keywordText: null,
baseUrl: null,
width: 800,
height: 600,
//构造器
constructor: function(config){
config = config || {};
this.pageSize = config.pageSize || 10;
this.keywordText = new Ext.form.TextField({
name: 'keyword',
anchor: '95%',
maxLength: 25
});
var flag = this.store == null;
if(flag){
this.store = new Ext.data.JsonStore({
id: this.ID,
url: this.baseUrl + '?cmd=List',//默认的数据源地址,继承时需要提供
root: "data",
totalProperty: "totalCount",
remoteSort: true,
fields: this.storeMapping
});
}
this.cm.defaultSortable = true;
var viewConfig = Ext.apply({
forceFit: true
}, this.gridViewConfig);
this.gridPanel = new Ext.grid.GridPanel({
id: Ext.id(),
store: this.store,
cm: this.cm,
sm: this.sm,
trackMouseOver: false,
loadMask: true,
//超过长度带自动滚动条
autoScroll:true,
border:false,
collapsible: true,
animCollapse: false,
viewConfig: viewConfig,
listeners: {
'celldblclick': {//双击时执行修改
fn: this.onEdit,
scope: this
},
'contextmenu':function(e) {
e.stopEvent();
}
},
tbar: [{
id: 'addButton',
text: '添加',
iconCls: 'addicon',
tooltip: '添加新纪录',
handler: this.create,
scope: this
}, '-',//'-'给工具栏按钮之间添加'|'
{
id: 'editButton',
text: '编辑',
iconCls: 'editicon',
tooltip: '修改记录',
handler: this.onEdit,
scope: this
}, '-', {
text: '删除',
iconCls: 'deleteicon',
tooltip: '删除所选中的信息',
handler: this.onRemove,
scope: this
}, '-', {
text: '刷新',
iconCls: 'refreshicon',
tooltip: '刷新纪录',
handler: this.onRefresh,
scope: this
}, '->',//'->'代表让工具栏按钮到右边去
'Search: ', this.keywordText, {
text: '查询',
pressed: true,
iconCls: 'serchopenroomrecord',
handler: this.onSearch,
scope: this
}, ' '],
//分页
bbar: new Ext.PagingToolbar({
pageSize: this.pageSize,
store: this.store
})
});
//this.gridPanel.bbar = null;
if(this.view){
Ext.apply(this.gridPanel,{
view: this.view
});
}
this.store.load({
params: {
start: 0,
limit: this.pageSize
}
});
var configs = Ext.apply({
closable: true,
autoScroll: true,
layout: "fit",
items:[this.gridPanel],
/**
*渲染数据
*/
//链接
linkRenderer: function(v){
if (!v)
return "";
else
return String.format("<a href='{0}' target='_blank'>{0}</a>", v);
},
//时间
dateRender: function(format){
format = format || "Y-m-d h:i";
return Ext.util.Format.dateRenderer(format);
}
},config);
//调用父类的构造器
Ext.darkness.CrudPanel.superclass.constructor.call(this,configs);
},
/**
*事件
*/
//查询
onSearch: function(){
var keyword = this.keywordText.getValue();//得到输入框的值
this.store.load({
params: {
start: 0,
limit: 10,
keyword: keyword
}
});
},
//刷新
onRefresh: function(){
this.store.removeAll();
this.store.reload();
},
//初始化窗口(用于新增,修改时),继承后在createWin中调用该方法显示窗口
initWin: function(width, height, status){
var win = new Ext.Window({
title: "信息(" + status + ")",
width: width,
height: height,
modal: true,
shadow: true,
iconCls:"addicon",
//不可以随意改变大小
resizable:false,
//是否可以拖动
//draggable:false,
defaultType:"textfield",
labelWidth:100,
collapsible:true, //允许缩放条
closeAction : 'hide',
closable:true,
plain : true,
//弹出模态窗体
modal: 'true',
buttonAlign:"center",
bodyStyle:"padding:10px 0 0 15px",
/*
listeners:{
"show":function() {
//当window show事件发生时清空一下表单
//this.fp.getForm().loadRecord(row);
}
},*/
items: [this.fp],
buttons: [{
text: "保存",
handler: this.onSave,
scope: this
}, {
text: "清空",
handler: this.reset,
scope: this
}, {
text: "关闭",
handler: this.closeWin,
scope: this
}]
});
return win;
},
//显示(新增/修改)窗口
showWin: function(status){ //createForm()需要在继承时提供,该方法作用是创建表单
if (!this.win) {
if (!this.fp) {
this.fp = this.createForm();
}
this.win = this.createWin(status);
this.win.on("close", function(){
this.win = null;
this.fp = null;
this.store.reload();
}, this);
}
//窗口关闭时,数据重新加载
this.win.show();
},
//创建(新增/修改)窗口
create: function(){
this.showWin("Save");
this.reset();
},
//数据保存[(新增/修改)窗口]
onSave: function(){
var id = this.fp.form.findField("Id").getValue();
// if(EditTeacherInfofp.getForm().isValid())
this.fp.form.submit({
waitMsg: '正在保存。。。',
url: this.baseUrl + "?cmd=" + (id ? "Update" : "Save"),
method: 'POST',
success: function(){
this.closeWin();
this.store.reload();
},
failure:function(form,action) {
Ext.MessageBox.alert("提示!","信息操作失败!");
},
scope: this
});
},
//(新增/修改)窗口上的清空
reset: function(){
if (this.win)
this.fp.form.reset();
},
//(新增/修改)窗口上的关闭
closeWin: function(){
if (this.win)
this.win.close();
this.win = null;
this.fp = null;
this.store.reload();
},
//修改,双击行,或选中一行点击修改,
onEdit: function(){
if (this.gridPanel.selModel.hasSelection()) {
var records = this.gridPanel.selModel.getSelections();//得到被选择的行的数组
var recordsLen = records.length;//得到行数组的长度
if (recordsLen > 1) {
Ext.Msg.alert("系统提示信息", "请选择其中一项进行编辑!");
}//一次只给编辑一行
else {
var record = this.gridPanel.getSelectionModel().getSelected();//获取选择的记录集
//var id = record.get("id");
this.showWin("Update");
this.fp.form.loadRecord(record); //往表单(fp.form)加载数据
}
}
else {
Ext.Msg.alert("提示", "请先选择要编辑的行!");
}
},
//删除,deleteIds为主键值
onRemove: function(){
var store = this.store;
var baseUrl = this.baseUrl;
if (this.gridPanel.selModel.hasSelection()) {
var records = this.gridPanel.selModel.getSelections();//得到被选择的行的数组
var recordsLen = records.length;//得到行数组的长度
var deleteIds = "";
for (var i = 0; i < recordsLen; i++) {
var id = records[i].get(this.ID);
if (i != 0) {
deleteIds += "," + id;
}
else {
deleteIds = id;
}
}
//this.store.reload();这里能执行
Ext.MessageBox.confirm('系统提示信息', '确定要删除所选的记录吗?', function(btn){
if (btn == 'yes') {
var myCon = new Ext.data.Connection();
Ext.MessageBox.wait('正在删除数据中, 请稍候……'); //出现一个等待条
myCon.request({
url: baseUrl + '?cmd=Remove',
method: "POST",
params: {
'deleteIds': deleteIds
},
//callback : Function (Optional) options, success : Boolean ,response : Object
callback: function(options, success, response){
Ext.MessageBox.hide();
if (success) {
Ext.Msg.alert("提示信息", "成功删除数据!", function(){
store.reload();
}, this);
}
else {
Ext.MessageBox.alert("系统提示信息", "异步通讯失败,更新失败,请与管理员联系!");
}
}
}, this);
}//if..yes
}, this);
}
else {
Ext.Msg.alert("提示", "请先选择要删除的行!");
}
}
});
使用方式:
TeacherInfoPanel = Ext.extend(Ext.darkness.CrudPanel, {
id: "TeacherInfoPanelId",
title: "教师信息管理",
//width: 400,
//height: 300,
//这个是数据源url
baseUrl: "Data/BaseInfo/TeacherInfo.aspx",
storeMapping: ["teacherID","teacherName","teacherSex","postName","PID","teacherPassword","Id"],
ID: "Id",
createForm: function(){
var formPanel = new Ext.form.FormPanel({
plain:true,
layout:"form",
defaultType:"textfield",
labelWidth:75,
baseCls:"x-plain",
//锚点布局-
defaults:{anchor:"95%",msgTarget:"side"},
buttonAlign:"center",
bodyStyle:"padding:0 0 0 0",
items:[{
name:"teacherID",
fieldLabel:"<font color=red>教师编号</font>",
readOnly:false
},{
name:"teacherName",
fieldLabel:"<font color=red>教师姓名</font>",
allowBlank:false,
blankText:"教师姓名不允许为空",
regex:/^[\s\S]{1,10}$/,
regexText:"教师姓名请不要超过10个字符"
},{
name:"teacherSex",
xtype:"combo",
fieldLabel:"教师性别",
//传入后台真实值value field /value
hiddenName:"teacherSex",
readOnly:true,
mode:"local",
displayField:"show",
valueField:"value",
triggerAction:"all",
value:"男",
store:new Ext.data.SimpleStore({
fields:["show","value"],
data:[["男","男"],["女","女"]]
})
},{
name:"postName",
fieldLabel:"<font color=red>职称</font>",
allowBlank:false,
blankText:"职称不允许为空",
regex:/^[\s\S]{1,10}$/,
regexText:"职称请不要超过10个字符"
},{
name:"PID",
fieldLabel:"身份证号",
allowBlank:false,
blankText:"身份证号不允许为空",
regex:/^[0-9.]{15,18}$/,
regexText:"身份证号为15-18位数字组成"
},{
name:"teacherPassword",
fieldLabel:"密码",
allowBlank:false,
blankText:"密码不允许为空",
regex:/^[0-9.]{6,13}$/,
regexText:"密码为6-13位数字组成"
},{
name: "Id",
xtype: "hidden"
}]
});
return formPanel;
},
createWin: function(status){
return this.initWin(380, 300, status);
},
constructor: function(){
this.sm = new Ext.grid.CheckboxSelectionModel();
this.cm = new Ext.grid.ColumnModel([
new Ext.grid.RowNumberer(),//获得行号
this.sm,{
header:"教师编号",
dataIndex:"teacherID",
tooltip:"教师唯一标识",
//可以进行排序
sortable:true
},{
header:"教师姓名",
tooltip:"教师姓名",
dataIndex:"teacherName",
sortable:true,
renderer:function(value)
{
return "<font color=#EE9572>"+value+"</font>";
}
},{
header:"性别",
width:80,
tooltip:"性别",
dataIndex:"teacherSex",
sortable:true
},{
header:"职称",
width:220,
tooltip:"职称",
dataIndex:"postName",
//可以进行排序
sortable:true
},{
header:"身份证号",
tooltip:"教师身份证号",
width:130,
dataIndex:"PID",
sortable:true,
renderer:function(value)
{
return "<b>"+value+"</b>";
}
},{
header:"密码",
width:220,
tooltip:"密码",
dataIndex:"teacherPassword",
//可以进行排序
sortable:true
},{
dataIndex: "Id"
}
]);
TeacherInfoPanel.superclass.constructor.call(this);
}
});
使用是,new TeacherInfoPanel()就可以了,实现这样的效果只需144行代码,怎么样!
看一下效果: