extjs3.2.1 -- 简单的curd操作
Ext.onReady(function(){ if(Ext.isIE){ Ext.enableGarbageCollector=false; } Ext.BLANK_IMAGE_URL = site_url+"extjs/resources/images/default/s.gif"; Ext.QuickTips.init(); Ext.form.Field.prototype.msgTarget = 'side'; // Ext.state.Manager.setProvider(new Ext.state.CookieProvider()); var grid; var formpanel = new Ext.form.FormPanel({ width:375, height:270, plain:true, layout:"form", defaultType:"textfield", labelWidth:75, baseCls:"x-plain", waitMsgTarget:true, //锚点布局- defaults:{anchor:"95%",msgTarget:"side"}, buttonAlign:"center", bodyStyle:"padding:0 0 0 0", items:[ { name:"id", xtype:"hidden" },{ name:"name", fieldLabel:"姓名", allowBlank:false, blankText:"不允许为空" }] }); function addUser(){ var win = new Ext.Window({title:"添加会员",width:500,height:400,items:formpanel, buttons:[{ text:"保存信息", minWidth:70, handler:function() { if(formpanel.getForm().isValid()) { formpanel.getForm().submit({ waitTitle:"提示", waitMsg: '正在保存。。。', url: site_url + "Panel/Add", method: 'post', success: function(){ formpanel.getForm().reset(); win.hide(); vstore.reload(); }, failure:function(form,action) { Ext.Msg.show({ title: "错误信息", msg:"命名重复", buttons:Ext.MessageBox.OK, icon: Ext.MessageBox.ERROR }); } }); } } },{ text:"重置", minWidth:70, qtip:"重置数据", handler:function() { formpanel.getForm().reset(); } },{ text:"取 消", minWidth:70, handler:function() { win.hide(); } }] }); win.show(); } function editUser(){ if (grid.selModel.hasSelection()) { var records = grid.selModel.getSelections();//得到被选择的行的数组 var recordsLen = records.length;//得到行数组的长度 if (recordsLen > 1) { Ext.Msg.alert("系统提示信息", "请选择其中一项进行编辑!"); }//一次只给编辑一行 else { var win = new Ext.Window({title:"添加会员",width:500,height:400,items:formpanel, buttons:[{ text:"保存信息", minWidth:70, handler:function() { if(formpanel.getForm().isValid()) { formpanel.getForm().submit({ waitTitle:"提示", waitMsg: '正在保存。。。', url: site_url + "Panel/Save", method: 'post', success: function(){ win.hide(); vstore.reload(); }, failure:function(form,action) { Ext.Msg.show({ title: "错误信息", msg:"命名重复", buttons:Ext.MessageBox.OK, icon: Ext.MessageBox.ERROR }); } }); } } },{ text:"重置", minWidth:70, qtip:"重置数据", handler:function() { formpanel.getForm().reset(); } },{ text:"取 消", minWidth:70, handler:function() { win.hide(); } }] }); win.show(); var record = grid.getSelectionModel().getSelected();//获取选择的记录集 formpanel.getForm().loadRecord(record); } } else { Ext.Msg.alert("提示", "请先选择要编辑的行!"); } } function deleteUser(){ var store = vstore; var baseUrl =site_url; if (grid.selModel.hasSelection()) { var records = grid.selModel.getSelections();//得到被选择的行的数组 var recordsLen = records.length;//得到行数组的长度 var deleteIds = ""; for (var i = 0; i < recordsLen; i++) { var id = records[i].get("id"); if(id == '') return; if (i != 0) { deleteIds += "," + id; } else { deleteIds = id; } } Ext.MessageBox.confirm('系统提示信息', '确定要删除所选的记录吗?', function(btn){ if (btn == 'yes') { var myCon = new Ext.data.Connection(); Ext.MessageBox.wait('正在删除数据中, 请稍候……'); //出现一个等待条 myCon.request({ url: baseUrl + 'Panel/Remove', method: "POST", params: { 'deleteIds': deleteIds }, //callback : Function (Optional) options, success : Boolean ,response : Object callback: function(options, success, response){ Ext.MessageBox.hide(); successmsg = Ext.util.JSON.decode(response.responseText).success; if (successmsg) { Ext.Msg.alert("提示信息", "成功删除数据!", function(){ vstore.reload(); }, this); } else { num = Ext.util.JSON.decode(response.responseText).num; Ext.MessageBox.alert("系统提示信息", "不能删除数据,因为有<font color=red>"+num+"</font>种产品与它联系!<br>若要删除,请先删除与其联系的产品."); } } }, this); }//if..yes }, this); } else { Ext.Msg.alert("提示", "请先选择要删除的行!"); } } function searchMember(){ vstore.load({ params:{ start:0, limit:20, name:Ext.get('keywords').dom.value//取得搜索表单文本域的值,发送到服务端 } }); } vstore = new Ext.data.JsonStore({ autoDestroy:true, url:site_url+'Panel/_list', root:'data', totalProperty: 'totalCount', idProperty:'id', fields:['id','name'] }); grid = new Ext.grid.GridPanel({ title:"会员管理", store:vstore, width:600, height:400, tbar:[{text:"添加",handler:addUser},'-',{text:"编辑",handler:editUser},'-',{text:"删除",handler:deleteUser},'->','名称',{xtype:'textfield',id:"keywords",name:"keywords"},{xtype:'button',text:'搜索',handler:searchMember}], columns:[{ header:"ID", dataIndex:"id", width:60, sortable:true },{ header:"名称", dataIndex:"name", width:100, sortable:true }], bbar: new Ext.PagingToolbar({ pageSize: 20, store: vstore, displayInfo: true, displayMsg: '显示第 {0} 条到 {1} 条记录,一共 {2} 条', emptyMsg: "没有记录" }) }); grid.render('product-class-div'); vstore.load({params:{start:0, limit:20,name:Ext.get('keywords').dom.value}}); //分页条件参数 vstore.on('beforeload',function(){ Ext.apply( this.baseParams, { name:Ext.get('keywords').dom.value } ); }); });