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);
}
});
