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 ...
随机推荐
- .NET Core2.0 环境下MVC模式的支付宝扫码支付接口-沙箱环境开发测试
所有配置以及相关信息均可以从PC支付中获取 使用的生成二维码的组件名为QRCoder,该组件引用了一个第三方实现的System.Drawing类库,和支付宝官网类似 当面付SDK为Alipay.Aop ...
- javascript基础拾遗(三)
1.map数组映射操作 function add(x) { return x+1 } var nums = [1,3,5,7,9] result = nums.map(add) console.log ...
- Improving Performance【转】
This section provides solutions to some performance problems, and describes configuration best pract ...
- c++ primer读书笔记之c++11(三)
1 =default构造函数限定符 c++11针对构造函数提供了=default限定符,可以用于显式指定编译器自动生成特定的构造函数.析构或赋值运算函数.参考代码如下: class CtorDftTy ...
- Java获取此次请求URL以及服务器根路径的方法
http://www.jb51.net/article/71693.htm ********************************************** 本文介绍了Java获取此次请求 ...
- java 多线程 27 :多线程组件之CountDownLatch
前言 在多线程环境下,JDK给开发者提供了许多的组件供用户使用(主要在java.util.concurrent下),使得用户不需要再去关心在具体场景下要如何写出同时兼顾线程安全性与高效率的代码.之前讲 ...
- WPF 异步执行
private void Operate_OnClick(object sender, RoutedEventArgs e) { AsyncFindBox(); RadWindow.Alert(&qu ...
- java面向对象(1)
一.方法传不固定值的用法 public void Test(int a,Person ...Persons) { for(Person p:Persons){ ...
- WriteableBitmap/BitmapImage/MemoryStream/byte[]相互转换
1 WriteableBitmap/BitmapImage/MemoryStream/byte[]相互转换 2012-12-18 17:27:04| 分类: Windows Phone 8|字号 订 ...
- Android TabHost的使用 顶部选项卡
用TabHost 来实现顶部选项卡,上代码:activity_main.xml <?xml version="1.0" encoding="utf-8"? ...