问题描述
- extjs4页面和数据库交互
-
var store;
var grid;
var pageSize = 2;
var str = "";
function search(){
str = document.getElementById("sstj").value;
//alert(str);
store.reload({params:{
start: 0,
limit: pageSize,
str:str
}});
}
Ext.onReady(function() {Ext.QuickTips.init();
Ext.state.Manager.setProvider(new Ext.state.CookieProvider());
var form = new Ext.form.FormPanel({
baseCls: 'x-plain',
layout:'absolute',
url:'save-form.php',
defaultType: 'textfield',items: [{ x: 60, y: 0, id:'id', name: 'to', anchor:'100%' // anchor width by percentage },{ x: 0, y: 5, xtype:'label', text: '用户编号:' },{ x: 60, y: 0, id:'userid', name: 'to', anchor:'100%' // anchor width by percentage },{ x: 0, y: 35, xtype:'label', text: '用户名:' },{ x: 60, y: 30, id:'username', name: 'username', anchor: '100%' // anchor width by percentage },{ x: 0, y: 65, xtype:'label', text: '性别:' },{ x: 60, y: 60, id:'usergender', name: 'usergender', anchor: '100%' // anchor width by percentage },{ x: 0, y: 95, xtype:'label', text: '部门:' },{ x: 60, y: 90, id:'useraction', name: 'useraction', anchor: '100%' // anchor width by percentage },{ x: 0, y: 125, xtype:'label', text: '籍贯:' },{ x: 60, y: 120, id:'userbirthplace', name: 'userbirthplace', anchor: '100%' // anchor width by percentage },{ x: 0, y: 155, xtype:'label', text: '出生日:' },{ x: 60, y: 150, id:'userbirth', name: 'userbirth', anchor: '100%' // anchor width by percentage }] }); var window = new Ext.Window({ title: '信息编辑', width: 500, modal:true, closeAction:'hide', height:300, minWidth: 300, minHeight: 200, layout: 'fit', plain:true, bodyStyle:'padding:5px;', buttonAlign:'center', items: form, buttons: [{ text: '保存', handler:function(){ var id = Ext.getCmp("id").getValue(""); var userid = Ext.getCmp("userid").getValue(""); var username = Ext.getCmp("username").getValue(""); var usergender = Ext.getCmp("usergender").getValue(""); var useraction = Ext.getCmp("useraction").getValue(""); var userbirthplace = Ext.getCmp("userbirthplace").getValue(""); var userbirth = Ext.getCmp("userbirth").getValue(""); var url = 'http://localhost:8080/extjs/AddStudent?id='+id+'&userid='+userid+'&username='+username+'&usergender='+usergender+'&useraction='+useraction+'&userbirthplace='+userbirthplace+'&userbirth='+userbirth; $.ajax({ type:'post', url:'http://localhost:8086/extjs/CheckStudent?id='+id+'&userid='+userid, success:function(str1){ if(str1!=""){ alert("用户编号不能重复!"); }else{ $.ajax({ type:'post', url:encodeURI(encodeURI(url)), success:function(){ window.hide(); store.load({ params: { start: 0, limit: pageSize} }); } }); } } }); } },{ text: '取消', handler:function(){ window.hide(); } }] }); var buttons = []; for (var i = 0; i < 3; i++) { if(i==0){ buttons.push({ text: '新增', width:40, handler: function(b) { /*Ext.getCmp("id").setValue(""); Ext.getCmp("userid").setValue(""); Ext.getCmp("username").setValue(""); Ext.getCmp("useraddress").setValue(""); Ext.getCmp("userphone").setValue(""); Ext.getCmp("useremail").setValue(""); Ext.getCmp("userrole").setValue(""); Ext.getCmp('id').setVisible(false);*/ form.getForm().reset(); window.show(); } }) } if(i==1){ buttons.push({ text: '修改', width:40, handler: function(b) { //alert('You clicked ' + b.text); var s = grid.getSelectionModel().getSelections(); if(s!=""){// alert(s[0].data.id);
var id = s[0].data.id;
var userid = s[0].data.userid;
var username = s[0].data.username;
var usergender = s[0].data.usergender;
var useraction = s[0].data.useraction;
var userbirthplace = s[0].data.userbirthplace;
var userbirth = s[0].data.userbirth;
Ext.getCmp("id").setValue(id);
Ext.getCmp("userid").setValue(userid);
Ext.getCmp("username").setValue(username);
Ext.getCmp("usergender").setValue(usergender);
Ext.getCmp("useraction").setValue(useraction);
Ext.getCmp("userbirthplace").setValue(userbirthplace);
Ext.getCmp("userbirth").setValue(userbirth);
Ext.getCmp('id').setVisible(false);
window.show();
}else{
alert("请选择行后再修改!");
}
}
})
}
if(i==2){
buttons.push({
text: '删除',
width:40,
handler: function(b) {
var s = grid.getSelectionModel().getSelections();
if(s==""){
alert("请选择行后再删除!");
}else if(confirm('确认要删除此记录吗?')){
var r = s[0].data.id;
$.post('http://localhost:8080/extjs/DeleUserServlet?id='+r,function(){
store.load({ params: { start: 0, limit: pageSize} });
});
// alert("删除成功!");
}
}
})
}} store = new Ext.data.JsonStore({ url: 'http://localhost:8080/extjs/UserServlet',// url:'index.json',
totalProperty:'totalCount',
root: 'bugs',
baseParams:{
str:""
},
fields: ['id', 'userid', 'username','usergender','useraction','userbirthplace','userbirth']
});
store.on('beforeload',function(){
// alert(str);
Ext.apply(this.baseParams,{
str:str
});
});
store.on("load",function(){
for(var i=0; i<store.getCount(); i++){
//alert(store.getAt(i).get("userid"));
}
});
grid = new Ext.grid.GridPanel({
store: store,
tbar:buttons,
bbar : new Ext.PagingToolbar({
pageSize : pageSize,
store : store,
displayInfo : true,
displayMsg : '第 {0} 条到 {1} 条记录，一共 {2} 条',emptyMsg : "没有记录"
}),
columns: [
{
header : '用户ID',
width : 175,
sortable : true,
dataIndex: 'id',
hidden:true
},{
header : '用户编号',
width : 75,
sortable : true,
dataIndex: 'userid'
},
{
header : '用户名',
width : 75,
sortable : true,
dataIndex: 'username'
},
{
header : '性别',
width : 100,
sortable : true,
dataIndex: 'usergender'
},
{
header : '部门',
width : 75,
sortable : true,
dataIndex: 'useraction'
},
{
header : '籍贯',
width : 85,
sortable : true,
dataIndex: 'userbirthplace'
},
{
header : '出生日',
width : 85,
sortable : true,
dataIndex: 'userbirth'
}
],
stripeRows: true,
height: 500,
width: 1000,
stateful: true,
stateId: 'grid'
});
store.load({ params: { start: 0, limit: pageSize} });
grid.render('grid-example');
});
解决方案
Extjs如何与数据库交互（四）
Extjs如何与数据库交互（三）