Ext3.4实现增删查改（form版）
var TaskPolicyStore = new Ext.data.JsonStore( {
autoLoad : false,
url : 'PolicyServlet?method=findAllPolicy',
storeId : 'policy-store',
root : 'msg',
fields : [ {
name : 'id',
mapping : 'id'
}, {
name : 'policyName',
mapping : 'policyName'
}, {
name : 'setUpMan',
mapping : 'setUpMan'
}, {
name : 'taskCheck',
mapping : 'taskCheck'
}, {
name : 'taskDetail',
mapping : 'taskDetail'
} ]
});
TaskPolicyUi = Ext
.extend(
Ext.Panel,
{
title : 'Policy Task',
id : 'taskPolicyUi',
width : 500,
layout : 'border',
border : false,
closable : true,
initComponent : function() {
this.items = [ {
xtype : 'panel',
title : '',
region : 'center',
autoScroll : true,
closable : true,
layout : 'fit',
items : [ {
xtype : 'grid',
id : 'buildGrid',
border : false,
columnLines : true,
autoHeight : true, // 使用固定高度
autoScroll : true, // 自动显示滚动条
autoWidth : true,
loadMask: true,
store : TaskPolicyStore,
viewConfig : {
columnsText : '显示的列',
sortAscText : '升序',
sortDescText : '降序',
forceFit : true,
getRowClass : function(record, rowIndex, p,ds) {
var cls = 'white-row';
if (rowIndex % 2 == 1) {
cls = 'gray-row';
}
return cls;
}
},
tbar : [{text : '添 加',xtype : 'button',icon : 'icons/add.png',
handler : function() {
var win = Ext.getCmp('fitWin');
// 防止重复实例化
if (Ext.isEmpty(win)) {
win = new Win();
}
var policyForm = Ext.getCmp('policyForm');
policyForm.isAdd=true;
win.setTitle("新增策略信息");
win.show();
}
},
'-',
{text : '删 除',icon : 'icons/delete.png',xtype : 'button',ref: '../removeButton',disabled: true,
handler : function() {
var grid = Ext.getCmp('buildGrid');
var sm = grid.getSelectionModel();
var store = grid.getStore();
if(sm.getCount()==1){
Ext.Msg.show( {
title : '提示',
msg : "确定要删除选择的数据?"+ getSelectionPolicyRecord(),
buttons : Ext.Msg.YESNO,
fn : function(btnId) {
var record = sm.getSelected();
if (btnId == "yes") {
store.remove(record);
// 删除记录
deleteHandler(record);
// 刷新界面
grid.getView().refresh(false);
}
},
animEl : 'elId',
icon : Ext.MessageBox.QUESTION,
maxWidth : 900
});
}else{
var records = sm.getSelections();
Ext.Msg.show( {
title : '提示',
msg : "确定要删除选择的多项数据?",
buttons : Ext.Msg.YESNO,
fn : function(btnId) {
if (btnId == "yes") {
for(i=0;i<records.length;i++){
var record=records[i];
store.remove(record);
// 删除记录
deleteHandler(record);
}
// 刷新界面
grid.getView().refresh(false);
}
},
animEl : 'elId',
icon : Ext.MessageBox.QUESTION,
maxWidth : 900
});
}
}
},
'-',
{text : '修改',icon : 'icons/refresh.png',xtype : 'button',handler : loadPolicyForm}
],
sm:sm,
columns : [new Ext.grid.RowNumberer(),sm,
{hidden: true,dataIndex : 'id'},
{xtype : 'gridcolumn',header : '策略名称',dataIndex : 'policyName',sortable : true,width : 60},
{xtype : 'gridcolumn',dataIndex : 'setUpMan',header : '创建人',sortable : true,width : 60},
{xtype : 'numbercolumn',header : '检查任务',dataIndex : 'taskCheck',format : 0,sortable : true,width : 40},
{xtype : 'gridcolumn',header : '任务详情',dataIndex : 'taskDetail',sortable : true,width : 80} ]
} ]
} ];
TaskPolicyUi.superclass.initComponent.call(this);
}
});
sm=new Ext.grid.CheckboxSelectionModel({
listeners: {
selectionchange: function(sm) {
var gridRemoveButton=Ext.getCmp('buildGrid');
if (sm.getCount()) {
gridRemoveButton.removeButton.enable();
} else {
gridRemoveButton.removeButton.disable();
}
}
}})
function loadPolicyForm(){
var sm =Ext.getCmp('buildGrid').getSelectionModel();
var records = sm.getSelections();
var num=records.length;
if(num>1){
Ext.MessageBox.alert("提示","每次只能修改一条策略信息。");
}else if(num == 1){
var win = Ext.getCmp('fitWin');
// 防止重复实例化
if (Ext.isEmpty(win)) {
win = new Win();
}
var policyForm = Ext.getCmp('policyForm');
policyForm.form.reset();
policyForm.isAdd = false;
win.setTitle("修改策略信息");
win.show();
var record = sm.getSelected();
var policyId = record.get('id');
var conn = new Ext.data.Connection({
method: 'POST',
url: 'PolicyServlet?method=getPolicyById',
extraParams : {'id':policyId}
});
Ext.MessageBox.show({
msg: '正在加载数据, 请稍后...',
progressText: '提示...',
width: 300,
wait: true,
waitConfig: {interval: 100}
});
conn.request({
success: function(response) {
Ext.MessageBox.hide();
var p = Ext.decode(response.responseText);
// {"id":49,"policyName":"1","setUpMan":"1","taskCheck":1,"taskDetail":"111"}
var grid = Ext.getCmp('buildGrid');
var store = grid.getStore();
var Policy = store.recordType;
var p1 = new Policy({
id : p.msg.id,
policyName :p.msg.policyName,
setUpMan : p.msg.setUpMan,
taskCheck : p.msg.taskCheck,
taskDetail : p.msg.taskDetail
});
policyForm.getForm().loadRecord(p1);
},
failure: function(response) {
Ext.MessageBox.hide();
policyForm.destroy();
Ext.Msg.show({title: '错误', msg: response.statusText, buttons: Ext.Msg.OK, icon: Ext.MessageBox.ERROR});
return;
}
});
}
}
var getSelectionPolicyRecord = function() {
var grid = Ext.getCmp('buildGrid');
var sm = grid.getSelectionModel();
var store = grid.getStore();
var record = sm.getSelected();
var policyName = record.get('policyName');
var setUpMan = record.get('setUpMan');
var taskCheck = record.get('taskCheck');
var taskDetail = record.get('taskDetail');
var itemMsg = String.format("【策略名称:'{0}', 策略创建人:'{1}', 检查任务数量:'{2}', 任务详情:'{3}'】", policyName, setUpMan, taskCheck, taskDetail);
return itemMsg;
}
var deleteHandler=function(record) {
var id = record.get('id');
// 发送请求
var params = {
"id" : id
};
var conn = new Ext.data.Connection({
method: 'POST',
url: 'PolicyServlet?method=delPolicy',
extraParams: params
});
Ext.MessageBox.show({
msg: '正在删除策略管理记录, 请稍后...',
progressText: '正在删除...',
width: 300,
wait: true,
waitConfig: {interval: 100}
});
conn.request({
success: function(response) {
Ext.MessageBox.hide();
var responseJson = JSON.parse(response.responseText);
if (Ext.isEmpty(responseJson.errors)) {
store.commitChanges();
}
else {
Ext.Msg.show({title: '错误', msg: responseJson.errors, buttons: Ext.Msg.OK, icon: Ext.MessageBox.ERROR});
}
},
failure: function(response) {
Ext.MessageBox.hide();
Ext.Msg.show({title: '错误', msg: response.statusText, buttons: Ext.Msg.OK, icon: Ext.MessageBox.ERROR});
return;
}
});
// 排序并刷新界面
var grid = Ext.getCmp('buildGrid');
var store = grid.getStore();
store.sort('policyName', "ASC");
grid.getView().refresh(false);
}
PolicyForm = Ext.extend(Ext.form.FormPanel, {
id : 'policyForm',
xtype : "form",
fieldDefaults : {// 统一设置表单字段默认属性
labelSeparator : '：',// 分隔符
labelWidth : 80,// 标签宽度
msgTarget : 'side',
width : 300
},
bodyPadding : 5,
frame : true,
initComponent : function() {
this.items = [ {
xtype : 'textfield',
allowBlank : false,
blankText : '策略名称不能为空',
name : 'policyName',
width : 220,
fieldLabel : '策略名称'
}, {
xtype : 'textfield',
allowBlank : false,
blankText : '创建人不能为空',
name : 'setUpMan',
width : 220,
fieldLabel : '创建人'
}, {
xtype : 'numberfield',
blankText : '检查任务不能为空',
name : 'taskCheck',
width : 220,
fieldLabel : '检查任务'
}, {
xtype : 'textarea',
width : 220,
height:120,
name : 'taskDetail',
fieldLabel : '任务详情'
}, {
xtype : 'hidden',
name : 'id'
} ];
this.buttons = [ {
text : '提交',
type : "submit",
handler : function() {
// 新增策略
var policyForm = Ext.getCmp('policyForm');
if(policyForm.isAdd){
policyForm.form.submit( {
clientValidation : true,// 进行客户端验证
waitMsg : '正在提交数据请稍后',// 提示信息
waitTitle : '提示',// 标题
url : 'PolicyServlet?method=addPolicy',// 请求的url地址
method : 'POST',// 请求方式
success : function(form, action) {// 加载成功的处理函数
var win = Ext.getCmp('fitWin');
win.hide();
var flag=action.result.msg;
if (flag=='success') {
loadPolicyGridPanel();
var grid = Ext.getCmp('buildGrid');
var store = grid.getStore();
store.commitChanges();
Ext.Msg.alert('提示', '新增策略成功');
}
else {
Ext.Msg.show({title: '错误', msg: '添加失败', buttons: Ext.Msg.OK, icon: Ext.MessageBox.ERROR});
}
win.destroy();
},
failure : function(form, action) {// 加载失败的处理函数
Ext.Msg.alert('提示', '新增策略失败');
}
});
}else{
//处理修改
policyForm.form.submit( {
clientValidation : true,// 进行客户端验证
waitMsg : '正在提交数据请稍后',// 提示信息
waitTitle : '提示',// 标题
url : 'PolicyServlet?method=modifyPolicy',// 请求的url地址
method : 'POST',// 请求方式
success : function(form, action) {// 加载成功的处理函数
var win = Ext.getCmp('fitWin');
win.hide();
var flag=action.result.msg;
if (flag=='success') {
loadPolicyGridPanel();
var grid = Ext.getCmp('buildGrid');
var store = grid.getStore();
store.commitChanges();
Ext.Msg.alert('提示', '新增策略成功');
}
else {
Ext.Msg.show({title: '错误', msg: '添加失败', buttons: Ext.Msg.OK, icon: Ext.MessageBox.ERROR});
}
win.destroy();
},
failure : function(form, action) {// 加载失败的处理函数
Ext.Msg.alert('提示', '新增策略失败');
}
});
}
}
}, {
text : '关闭',
handler : function() {
var win = Ext.getCmp('fitWin');
win.destroy();
}
}, '->' ];
PolicyForm.superclass.initComponent.call(this);
}
});
loadPolicyGridPanel = function(){
var grid = Ext.getCmp('buildGrid');
var store = grid.getStore();
var policyForm = Ext.getCmp('policyForm');
var values = policyForm.form.getValues();
var index = store.find('id',values['id']);
if(index != -1){
var item = store.getAt(index);
for(var fieldName in values){
item.set(fieldName,values[fieldName]);
}
item.commit();
}else{
var Policy = store.recordType;
var p = new Policy({
id : values['id'],
policyName : values['policyName'],
setUpMan : values['setUpMan'],
taskCheck : values['taskCheck'],
taskDetail : values['taskDetail']
});
store.insert(0, p);
}
store.sort('policyName', "ASC");
grid.getView().refresh(false);
};
// 创建弹出窗口
Win = Ext.extend(Ext.Window, {
id : 'fitWin',
xtype : "window",
layout : 'fit',
width : 380,
closeAction : 'hide',
height : 280,
resizable : false,
shadow : true,
modal : true,
closable : true,
initComponent : function() {
this.items = new PolicyForm();
Win.superclass.initComponent.call(this);
}
});
TaskPolicy = Ext.extend(TaskPolicyUi, {
id : 'taskPolicy',
initComponent : function() {
TaskPolicy.superclass.initComponent.call(this);
}
});
Ext.reg('TaskPolicy', TaskPolicy);
Ext3.4实现增删查改（form版）的更多相关文章
- [课本]JDBC课程6--使用JDBC的DAO模块化--完成数据库的增删查改_工具类JDBCTools四个(Preparedstatement)功能模块的敲定版
(课本P273-任务九) /**DAO: Data Access Object * 为什么用: 实现功能的模块化,更有利于代码的维护和升级 * 是什么: 访问数据信息的类,包含对数据的CRUD(cre ...
- 3.EF 6.0 Code-First实现增删查改
原文链接:http://www.c-sharpcorner.com/UploadFile/3d39b4/crud-operations-using-entity-framework-5-0-code- ...
- 4.在MVC中使用仓储模式进行增删查改
原文链接:http://www.c-sharpcorner.com/UploadFile/3d39b4/crud-using-the-repository-pattern-in-mvc/ 系列目录: ...
- EasyUI的增删查改(后台ASP.NET)
转自:http://www.cnblogs.com/dedeyi/archive/2013/04/22/3035057.html 某某人曾经跟我说,你们做系统不就是增删查改吗. 是啊,很多时候我们就是 ...
- 一套手写ajax加一般处理程序的增删查改
倾述下感受:8天16次驳回.这个惨不忍睹. 好了不说了,说多了都是泪. 直接上代码 : 这个里面的字段我是用动软生成的,感觉自己手写哪些字段太浪费时间了,说多了都是泪 ajax.model层的代码: ...
- ASP.NET动态的网页增删查改
动态页面的增删查改,不多说了,直接上代码 跟前面的一般处理程序一样我上用的同一套三层,只是UI层的东西不一样,在纠结着要不要重新在上一次以前上过的代码: 纠结来纠结去,最后我觉得还上上吧,毕竟不上为我 ...
- 极极极极极简的的增删查改（CRUD）解决方案
去年这个时候写过一篇全自动数据表格的文章http://www.cnblogs.com/liuyh/p/5747331.html.文章对自己写的一个js组件做了个概述,很多人把它当作了一款功能相似的纯前 ...
- SSH框架的多表查询和增删查改 （方法一）中
原创作品,允许转载,转载时请务必标明作者信息和声明本文章==>http://www.cnblogs.com/zhu520/p/7774144.html 这边文章是接的刚刚前一遍的基础上敲的 ...
- JDBC+Servlet+jsp(增删查改)
先在mysql新增数据库和表先,把下面的几句代码复制去到mysql运行就可以创建成功了! 创建数据库 create database jdbc01 character set utf8 collat ...
随机推荐
- C#中自定义属性的例子
自定义属性的作用 有时候我们需要给一个类或者类中的成员加上一些属性或者附加信息,让类或者变量的功能更明确可控制的细粒度更高,打个简单的比方:数据库里面的一张表,表中的每一个字段都有很多属性,如是否主键 ...
- my stackoverflow
https://stackoverflow.com/questions/48017641/how-to-monitor-elastic-stack-without-x-pack https://sta ...
- [Windows Azure] .NET Multi-Tier Application Using Storage Tables, Queues, and Blobs - 1 of 5
.NET Multi-Tier Application Using Storage Tables, Queues, and Blobs - 1 of 5 This tutorial series sh ...
- python（49）：把文件压缩成zip格式的文件
有时需要用到压缩文件,网上搜集了一段代码: 分享一下: import os import zipfile def make_zip(localPath, pname): zipf = zipfile. ...
- lua 的 table 处理
lua 的整体效率是很高的,其中,它的 table 实现的很巧妙为这个效率贡献很大. lua 的 table 充当了数组和映射表的双重功能,所以在实现时就考虑了这些,让 table 在做数组使用时尽量 ...
- profile bashrc bash_profile 之间的区别和联系
/etc/profile:此文件为系统的每个用户设置环境信息,当用户第一次登录时,该文件被执行.并从/etc/profile.d目录的配置文件中搜集shell的设置. /etc/bashrc:为每一个 ...
- Android Manifest <meta-data>
在接入第三方渠道SDK的时候,经常会看到其配置文件AndroidManifest.xml有类似如下的定义: <!-- appid --> <meta-data android:nam ...
- tomcat8.5性能优化
主要是按照两篇文章,部分参数因适配Tomcat8.5进行了调整 一.有关 JAVA_OPTS http://www.open-open.com/lib/view/open1401931407228.h ...
- 纯CSS3打造非常炫的加载动画
纯css3打造的一款非常炫的加载图.用在需要一定时间加载的地方非常合适.先上效果图: 点击这里在线预览 代码非常简单.没有用任何javascript代码.纯css3实现. html代码: <di ...
- Android 面试知识集1
今晚在复习Android基础的时候,找到了一些很有价值的基础知识,分享给给位Android的开发者.这些是基础知识,同时也可以当做面试准备.面试题其实是很好的基础知识学习,有空会好好整理相关基础知识. ...