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 ...
随机推荐
- ExtJs--05--给window组件加入功能条以及子组件获取上级或下级组件的属性和方法
Ext.onReady(function(){ /** 1-- 给容器组件加入控制条 及 控制项 控制条 不同的方向有多种 tbar lbar rbar bbar fbar 2-- 依据组件本身拿到上 ...
- HTML5学习笔记（四）：H5中表单新增元素及改良
方便布局 表单内容可以放在表单标签之外,这样做的好处是方便设计时不用考虑一定要将表单元素放在指定的form标签之下,只要指定元素适用于哪个表单即可,如下: <form id="test ...
- MYSQL双机热备份的配置实施(问题总结)
为了实现MYSQL数据库的冗灾.备份.恢复.负载均衡等功能,喻名堂这两天一直在学习和研究mysql的双机热备,其实MYSQL的双机热备就是使用MYSQL同步功能两种方式里面的“主-主”同步方式实现的. ...
- pandas数组(pandas Series)-(1)
导入pandas import pandas as pd countries = ['Albania', 'Algeria', 'Andorra', 'Angola', 'Antigua and Ba ...
- Ubuntu 16.04 搭建KVM环境
在Ubuntu 16.04下搭建KVM环境过程记录. 1 查看CPU是否支持KVM egrep "(svm|vmx)" /proc/cpuinfo 有结果输出,如下图: 2 安 ...
- 自己动手写Android框架－数据库框架
大家在工作中基本上都有使用到数据库框架 关系型:ORMLite,GreenDao 对象型:DB4O,Perst 这些数据库用起来都非常的简单,对于我们Android上来说这些数据库足够我们使用了,但是 ...
- CentOS6.5 安装Python 的依赖包
1.CentOS6.5 安装Python 的依赖包 yum groupinstall "Development tools"yum install zlib-devel bzip2 ...
- 【Unity笔记】Terrain地形制作坍塌/深坑
Unity的Terrain组件在[set the terrain height]分页下,height高度为0时,可理解为该地形的海平面高度,此时就不能地形下榻.把height调到100,点击[flat ...
- Oracle 11gR2 ORA-12638 身份证明检索失败解决方法
1. 找到Oracle安装目录或者菜单栏,打开Oracle Net manager 2. 选择本地 ->概要文件 ->下拉选择Oracle高级安全性 -> 取消NTS 3. 菜单栏 ...
- Python3 串口模块移植并使用。
想通过 Python去控制串口模块,直接上层就使用一门语言,这样虽然执行效率低一些,但是开发速度加快 通过 buildroot 先移植 Python-serial 模块 x Symbol: BR2_P ...