extjs4页面和数据库交互

Question

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