ext4 利用actioncolumn来实现增删改查

来源：互联网发布：世界银行预测数据编辑：程序博客网时间：2024/06/07 15:23

1，js代码

Ext.require([
   'Ext.data.*',
   'Ext.grid.*',
'Ext.form.*'
]);

Ext.onReady(function(){
Ext.create('Ext.data.Store', {
storeId:'studentStore',
fields:['name', 'sex'],
proxy: {
type: 'ajax',
url : 'allUser.fwp',
//url:'test.json',
reader: {
type: 'json'
}
},
autoLoad: true
});

Ext.create('Ext.grid.Panel', {
title: 'Action Column Demo',
store: Ext.data.StoreManager.lookup('studentStore'),
columns: [
{text: 'Name', dataIndex:'name'},
{text: 'Sex', dataIndex:'sex'},
{
xtype:'actioncolumn',
width:50,
items: [{
icon: 'images/edit.png', // Use a URL in the icon config
tooltip: 'Edit',
handler: function(grid, rowIndex, colIndex) {
var rec = grid.getStore().getAt(rowIndex);
var name = rec.get('name');
var sex = rec.get('sex');

Ext.create('Ext.form.Panel', {
title: 'Simple Form',
bodyPadding: 5,
width: 350,
// The form will submit an AJAX request to this URL when submitted
url: 'crud.fwp',

// Fields will be arranged vertically, stretched to full width
layout: 'anchor',
defaults: {
anchor: '100%'
},

// The fields
defaultType: 'textfield',
items: [{
fieldLabel: 'Name',
name: 'name',
value:name,
allowBlank: false
},{
fieldLabel: 'Sex',
name: 'sex',
value:sex,
allowBlank: false
},{
fieldLabel: 'dowhat',
name: 'dowhat',
value:1,
allowBlank: false
}],

// Reset and Submit buttons
buttons: [ {
text: 'edit',
formBind: true, //only enabled once the form is valid
disabled: false,
handler: function() {
var form = this.up('form').getForm();
if (form.isValid()) {
form.submit({
success: function(form, action) {
Ext.Msg.alert('Success', action.result.msg);

},
failure: function(form, action) {
Ext.Msg.alert('Failed', action.result.msg);
}
});
}
}
}],
renderTo: Ext.getBody()
});

}
},{
icon: 'images/delete.png',
tooltip: 'Delete',
handler: function(grid, rowIndex, colIndex) {
var rec = grid.getStore().getAt(rowIndex);
var name = rec.get('name');
alert("Terminate " + rec.get('name'));
Ext.Ajax.request({
url: 'crud.fwp',
params: {
name: name,
dowhat:2
},
success: function(response){
var text = response.responseText;
alert(text);
}
});
}
}]
}
],
width: 250,
renderTo: Ext.getBody()
});

});

2，fwp端代码

<%@ LANGUAGE=JavaScript %>
<%
debugger;
var name = Request.Form("name");
var doWhat = Request.Form("dowhat");
var obj_fv = new FrontView.FrontViewObject();
if(doWhat == 1) {
var sex = Request.Form("sex");
var sql = "insert into student values('"+name+"','"+sex+"')";
var flag = obj_fv.writeToDataBase(sql);
if(flag)
Response.Write('{"success":true, "msg":"添加成功！"}');
}
if(doWhat == 2) {
var sql = "delete from student where name = '"+name+"'";
var flag = obj_fv.writeToDataBase(sql);
if(flag)
Response.Write("删除成功!");
}
%>

3，allUser.fwp代码

<%@ LANGUAGE=JavaScript %>
<%
var obj_fv = new FrontView.FrontViewObject();
var sql = "select * from student";
var flag = obj_fv.ReadFromDataBase(sql);
var count = obj_fv.getItemCount();
var data = "";
for(var i=0; i<count; i++) {
var name = obj_fv.getItemText("name",i);
var sex = obj_fv.getItemText("sex",i);
if(i==0)
data = data + '{"name": "name","sex":"sex"}';
else
data = data + ',{"name": "name","sex":"sex"}';
}
Response.Write("["+data+"]");
//Response.Write('[{"name":"zhang","sex":"male1"},{"name":"zhang1","sex":"male1"}]');
%>