extjs增删改查(自己调用extjs)
jsp页面如下：materialsDetail.jsp
<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%@ include file="/WEB-INF/views/commons/taglibs.jsp"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<script type="text/javascript" src="${ctx}/resources/loader/yepnope.min.js"></script>
<script type="text/javascript">
var businessId = "${businessId}";
var recordId = "${recordId}";
pagesize=eval('(${fields.pagesize==null?"{}":fields.pagesize})');
yepnope({
load:[
"${ctx}/resources/extjs/resources/css/ext-all.css",
// "${ctx}/resources/extjs/resources/css/yourtheme.css",
"${ctx}/resources/css/gridStyle.css",
"${ctx}/resources/extjs/adapter/ext/ext-base.js",
"${ctx}/resources/extjs/ext-all.js",
"${ctx}/resources/extjs/ext-lang-zh_CN.js",
"${ctx}/resources/extjs/ux/TabCloseMenu.js",
"${ctx}/resources/extjs/ux/Portal.js",
"${ctx}/resources/extjs/ux/SearchField.js",
"${ctx}/resources/extjs/ux/ProgressBarPager.js",
//通用
"${ctx}/resources/js/Ext.ux.override.js",
"${ctx}/resources/js/share.js",
"${ctx}/resources/js/shareux.js",
'${ctx}/plugins/project/web/resources/js/materials/MaterialsGridPanel.js',
'${ctx}/plugins/project/web/resources/js/materials/MaterialsFormWin.js'
],
complete:function(){
ctx = "${ctx}";
Ext.QuickTips.init();//支持tips提示非空
var meteriaGrid = new Ext.materials.MaterialsGridPanel({
taskId:'${param.taskId}',
parentInstanceId:'${parentInstanceId}',
nodeId:'${param.nodeId}',
isWrite:'${isWrite}',
zjl:'${zjl}',
fz:'${fz}',
parentTaskId:'${parentTaskId}',
isReadPrice:'${isReadPrice}',
isWritePrice:'${isWritePrice}',
projectId:'${projectId}'
});
new Ext.Viewport({
layout : 'fit',
items : [meteriaGrid]
});
}
});
</script>
</head>
<body>
</body>
</html>
GridPanel如下：
Ext.ns("Ext.materials");
Ext.materials.MaterialsGridPanel = Ext.extend(Ext.grid.GridPanel, {
projectId:null,
type:null,
parentInstanceId:null,
taskId:null,
nodeId:null,
isWrite:null,
zjl:null,
fz:null,
parentTaskId:null,
isReadPrice:null,
isWritePrice:null,
feeType:null,
constructor : function(_config) {
Ext.apply(this, _config || {});
this.pageSize = 20;
this.Url = {
all : ctx + '/projectMaterials/queryListForPage',// 加载所有
insertUrl : ctx + '/projectMaterials/insert',
updateUrl : ctx + '/projectMaterials/update',
deleteUrl : ctx + '/projectMaterials/delete',
getSumTotol: ctx + '/projectMaterials/getSumTotol' //获取总计一行数据
};
/** 顶部工具栏 */
if(this.isWrite==1&&this.isWritePrice==1){
this.toolbar = new Ext.Toolbar({
items:[new Ext.Action({
text : '新增',
iconCls : 'query',
scope:this,
handler : this.showAddWindow
}),new Ext.Action({
text : '修改',
iconCls : 'query',
scope:this,
handler : this.showEditWindow
}),new Ext.Action({
text : '删除',
iconCls : 'query',
scope:this,
handler : this.deleteData
})]
});
}else{
this.toolbar = new Ext.Toolbar({});
}
/** 基本信息-数据源 */
this.store = new Ext.data.Store({
remoteSort : true,
baseParams : {
start : 0,
limit : this.pageSize,
projectId:this.projectId,
feeType:this.feeType,
processInstanceId : this.parentInstanceId,
billId:recordId,
taskId:this.taskId
},
proxy : new Ext.data.HttpProxy({// 获取数据的方式
method : 'POST',
url : this.Url.all
}),
reader : new Ext.data.JsonReader({// 数据读取器
totalProperty : 'results', // 记录总数
root : 'rows' // Json中的列表数据根节点
}, ['id', 'billId', 'nameSpec','unit','amount','price','remark','alias','materialType']),
listeners:{
//增加统计一行
load:this.totalFunction,
scope : this
}
});
/** 基本信息-选择模式 */
this.selModel = new Ext.grid.CheckboxSelectionModel({
singleSelect : false
});
/** 基本信息-数据列 */
this.colModel = new Ext.grid.ColumnModel({
columns : [this.selModel, {
header:'ID',
dataIndex:'id',
hidden:true
},{
header:'提料单号',
dataIndex:'billId',
hidden:true
},{
header : '名称及规格',
dataIndex : 'nameSpec'
},{
header : '类型',
dataIndex : 'materialType',
renderer:function(value){
if(value==1){
return "材料";
}
if(value==2){
return "工具"
}
return value;
}
},{
header : '别名',
dataIndex : 'alias'
},{
header : '单位',
dataIndex : 'unit'
}, {
header:'数量',
dataIndex:'amount'
},{
header:'单价',
dataIndex:'price'
},{
header:'总价',
dataIndex:'totalPrice',
renderer:function(value,meta,record){
if(record.data.id){
value = record.data.price*record.data.amount;
}
return value;
}
},{
header : '备注',
dataIndex : 'remark',
width:300
}]
});
/**
this.searchField = new Ext.ux.form.SearchField( {
store : this.store,
paramName : 'processInstanceName',
emptyText : '请输入工作名称',
style : 'margin-left:5px;'
});
this.tbar.add(this.searchField);
*/
/** 底部工具条 */
this.bbar = new Ext.PagingToolbar({
pageSize : this.pageSize,
store : this.store,
displayInfo : true
});
Ext.materials.MaterialsGridPanel.superclass.constructor.call(this, {
store : this.store,
colModel : this.colModel,
selModel : this.selModel,
bbar : this.bbar,
tbar : this.toolbar,
autoScroll : 'auto',
region : 'center',
loadMask : true,
stripeRows : true
});
this.store.load();
},
/** 添加组件 */
showAddWindow : function() {
if (!this.addWindow) {
this.addWindow = new Ext.materials.MaterialsFormWin({
store : this.store,
saveUrl : this.Url.insertUrl
});
}
this.addWindow.reset();
this.addWindow.show();
},
/** 修改组件 */
showEditWindow : function() {
var records = this.getSelectionModel().getSelections();
if (records.length==0) {
Ext.MessageBox.show({
title : '警告',
icon : Ext.MessageBox.WARNING,
buttons : Ext.MessageBox.OK,
msg : '请选择要修改的记录'
});
return false;
}else if(records.length!=1){
Ext.MessageBox.show({
title : '警告',
icon : Ext.MessageBox.WARNING,
buttons : Ext.MessageBox.OK,
msg : '一次只能修改一条记录'
});
return false;
}else if(!records[0].data.id){
Ext.MessageBox.show({
title : '警告',
icon : Ext.MessageBox.WARNING,
buttons : Ext.MessageBox.OK,
msg : '总计一行是不可以修改的'
});
return false;
}
if (!this.editWindow) {
this.editWindow = new Ext.materials.MaterialsFormWin({
store : this.store,
saveUrl : this.Url.updateUrl
});
}
this.editWindow.reset();
this.editWindow.show();
this.editWindow.loadRecord(records[0]);
},
/** 删除信息 */
deleteData : function() {
/** 选中的记录 */
var records = this.getSelectionModel().getSelections();
if (records.length==0) {
Ext.MessageBox.show({
title : '警告',
icon : Ext.MessageBox.WARNING,
buttons : Ext.MessageBox.OK,
msg : '请选择要删除的记录'
});
return false;
}
var ids = [];
for (var i = 0; i < records.length; i++) {
ids[i]=records[i].data.id;
if(!records[i].data.id){
Ext.MessageBox.show({
title : '警告',
icon : Ext.MessageBox.WARNING,
buttons : Ext.MessageBox.OK,
msg : '总计一行是不可以删除的'
});
return false;
}
}
Ext.MessageBox.confirm('提示', '你确定要删除选中的记录吗？', function(btn) {
if (btn == 'yes') {
Ext.Ajax.request({
url : this.Url.deleteUrl,
params : {
ids : ids
},
success : function(response, options) {
var text = Ext
.decode(response.responseText);
Ext.Msg.alert('提示', text.msg,function(){
this.store.reload();
},this);
},
failure : function() {
Ext.MessageBox.alert('提示', '请求失败！');
},
scope : this
});
}
}, this);
},
//增加统计一行
totalFunction:function(){
if(this.store.getTotalCount()!=0){
Ext.Ajax.request({
url : this.Url.getSumTotol,
method : 'post',
params : {
billId:recordId
},
success : function(response, options) {
var data = Ext.decode(response.responseText).msg;
if(data!=null){
var record =new Ext.data.Record({id:'',billId:'',nameSpec:'',materialType:'总计:',alias:'',unit:'',amount:'',price:'',totalPrice:data.price,remark:''});
this.store.insert(this.store.getCount(),record);
}
},
scope : this
});
}
}
});
winForm如下：
Ext.ns('Ext.materials');
Ext.materials.MaterialsFormWin = Ext.extend(Ext.Window, {
saveUrl : null,
store:null,
constructor : function(config) {
Ext.apply(this, config || {});
/** 基本信息-详细信息的form */
this.formPanel = new Ext.form.FormPanel({
frame : false,
bodyStyle : 'padding:10px;border:0px',
labelwidth : 70,
defaultType : 'textfield',
defaults:{
anchor : '99%'
},
items : [{
xtype : 'hidden',
fieldLabel : 'ID',
name : 'id'
}, {
fieldLabel : '名称及规格',
allowBlank : false,
name : 'nameSpec',
blankText:'名称及规格是必填的'
}, {
fieldLabel : '类型',
name : 'materialType',
hiddenName:'materialType',
xtype:'combo',
triggerAction:'all',
allowBlank : false,
mode:'local',
store:new Ext.data.ArrayStore({
fields:['value','text'],
data:[
['1','材料'],
['2','工具']
]
}),
displayField:'text',
valueField:'value',
blankText:'类型是必填的',
editable:false
}, {
fieldLabel : '别名',
name : 'alias'
},{
fieldLabel:'单位',
allowBlank : false,
blankText:'单位是必填的',
name:'unit'
},{
xtype:'numberfield',
name:'amount',
fieldLabel:'数量',
allowNegative:false,
allowBlank : false,
decimalPrecision:0,
blankText:'数量是必填的',
nanText:'请输入有效数字'
},{
xtype:'numberfield',
name:'price',
fieldLabel:'单价',
allowNegative:false,
decimalPrecision:2,
allowBlank : false,
blankText:'单价是必填的',
nanText:'请输入有效数字'
},{
xtype : 'textarea',
fieldLabel : '备注',
maxLength : 128,
height : 100,
name : 'remark',
anchor : '99%'
}]
});
Ext.materials.MaterialsFormWin.superclass.constructor.call(this, {
layout : 'fit',
width : 500,
height : 350,
title : '无项目材料采购',
closeAction : 'hide',
plain : true,
modal : true,
resizable : true,
items : [this.formPanel],
buttons : [{
text : '保存',
iconCls:'disk',
handler : this.saveFun,
scope : this
}, {
text : '关闭',
iconCls:'cancel',
handler : function() {
var form = this.formPanel.getForm();
var id = form.findField("id")
.getValue();
form.reset();
if (id != '')
form.findField("id")
.setValue(id);
}
}]
});
},
saveFun : function() {
var form = this.formPanel.getForm();
if (!form.isValid()) {
return;
}
// 发送请求
this.formPanel.getForm().submit({
url : this.saveUrl,
method:'post',
params:{
billId:recordId
},
success : function(form,action) {
Ext.MessageBox.alert('提示',action.result.msg,function(){
this.store.reload();
this.hide();
},this);
},
failure : function(form, action) {
Ext.MessageBox.alert('提示', '请求失败！');
newTab.close();
waitMask.hide();
},
scope:this
});
},
reset:function(){
this.formPanel.getForm().reset();
},
loadRecord:function(record){
this.formPanel.getForm().loadRecord(record);
}
});
extjs增删改查(自己调用extjs)的更多相关文章
- Entity FrameWork 5 增删改查 & 直接调用sql语句
class="brush:csharp;gutter:true;"> #region 1.0 新增 -void Add() /// <summary> /// 1 ...
- Entity FrameWork 5 增删改查 & 直接调用sql语句 ？
#region 1.0 新增 -void Add() /// <summary> /// 1.0 新增 /// </summary> static void Add() { / ...
- 使用JDBC分别利用Statement和PreparedStatement来对MySQL数据库进行简单的增删改查以及SQL注入的原理
一.MySQL数据库的下载及安装 https://www.mysql.com/ 点击DOWNLOADS,拉到页面底部,找到MySQL Community(GPL)Downloads,点击 选择下图中的 ...
- asp.net下利用MVC模式实现Extjs表格增删改查
在网上看到有很多人写extjs下的表格控件的增删改查,但是大多数都是直接从后台读取数据,很少有跟数据库进行交互的模式. 今天就来写一个这样的例子.欢迎大家交流指正. 首先简单介绍一下MVC模式,MVC ...
- 快速开发平台WebBuilder中ExtJS表格的增删改查
使用WebBuilder可实现表格的自动增删改查功能,而无需编写前台脚本和后台SQL. WebBuilder开源项目地址:http://www.putdb.com 自动生成的页面: <!DOCT ...
- jQuery调用WebService实现增删改查的实现
第一篇博客,发下我自己写的jQuery调用WebService实现增删改查的实现. 1 <!DOCTYPE html> 2 3 <html xmlns="http://ww ...
- python 调用zabbix api接口实现主机的增删改查
python程序调用zabbix系统的api接口实现对zabbix_server端主机的增删改查,使用相关功能时候,需要打开脚本中的相关函数. 函数说明: zabbixtools() 调用zabbi ...
- Restful风格wcf调用2——增删改查
写在前面 上篇文章介绍如何将wcf项目,修改成restful风格的接口,并在上面提供了查询的功能,上篇文章中也感谢园友在评论中的提的建议,自己也思考了下,确实是那个道理.在urltemplate中,定 ...
- C#利用WinForm调用WebServices实现增删改查
实习导师要求做一个项目,用Winform调用WebServices实现增删改查的功能.写下这篇博客,当做是这个项目的总结.如果您有什么建议,可以给我留言.欢迎指正. 1.首先,我接到这个项目的时候,根 ...
随机推荐
- iOS：文本视图控件UITextView的详细使用
文本视图控件:UITextView 介绍:它是一个文本域的编辑视图,可以在该区域上进行编辑(包括删除.剪贴.复制.修改等),它与文本框UITextField的不同之处是:当它里面的每一行内容超出时,可 ...
- 解决 KendoUI TabStrip 高度 100% 问题
摘自: http://www.kendoui.com/forums/kendo-ui-web/tabstrip/forcing-tabstrip-to-take-up-100-of-it-s-pare ...
- 如何使用 awk 输出文本中的字段和列
首先我们要知道,awk 能够自动将输入的行,分隔为若干字段.每一个字段就是一组字符,它们和其他的字段由一个内部字段分隔符分隔开来. 如果你熟悉 Unix/Linux 或者懂得 bash shell 编 ...
- 封装自用的脚本ajax.js
function createxmlhttp() { xmlhttpobj = false; try{//创建对象,一个一个的试,哎,要是能统一标准都好.. xmlhttpobj = new XMLH ...
- Node.js nvshens图片批量下载爬虫1.01
//====================================================== // nvshens图片批量下载爬虫1.01 // 用最近的断点续传框架改写原有1.0 ...
- Solidworks如何添加齿轮
打开ToolBox,找到GB,动力传动,齿轮,正齿轮,然后拖放到绘图窗口(切记要在装配图里面弄,不是在单个零件里面弄) 设置齿轮的参数,一般只需要设置模数,齿数,面宽,类型,总长度(面宽就是有齿轮 ...
- 在Lucene或Solr中实现高亮的策略
一:功能背景 近期要做个高亮的搜索需求,曾经也搞过.所以没啥难度.仅仅只是原来用的是Lucene,如今要换成Solr而已,在Lucene4.x的时候,散仙在曾经的文章中也分析过怎样在搜索的时候实现高亮 ...
- .Net Framework 之 托管代码和非托管代码的区别
一.什么是托管代码(managed code)? 托管代码:是微软的中间语言(IL),即微软中间语言MSIL(Microsoft Interspace Language). “ 源代码→机器码 ”运行 ...
- C/C++中传值和传地址（引用）
C/C++中参数传递有两种方式,传值或传地址(传引用),通常我们要在被调用函数中改变一个变量的值就需要传地址调用方式,例如: void swap_by_value(int a, int b) { in ...
- 饿了么ui添加事件
最近饿了么ui挺火,连美团都有项目组再用,刚好最近项目重构,就引入了进来,刚用上就发现一个大坑,在配合vue使用时,居然无法添加自定义事件 找了半天才发现原因是需要在事件后面加上 ‘’.native ...