grid系列--删除
來源：http://www.cnblogs.com/wenjl520/archive/2008/12/23/1325655.html
?
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server"><title>無標題頁</title><link rel="Stylesheet" type="text/css" href="ExtJS/resources/css/ext-all.css" mce_href="ExtJS/resources/css/ext-all.css" /><link rel="Stylesheet" type="text/css" href="ExtJS/resources/css/xtheme-green.css" mce_href="ExtJS/resources/css/xtheme-green.css" /><mce:script type="text/javascript" src="ExtJS/adapter/ext/ext-base.js" mce_src="ExtJS/adapter/ext/ext-base.js"></mce:script><mce:script type="text/javascript" src="ExtJS/ext-all.js" mce_src="ExtJS/ext-all.js"></mce:script><mce:script type="text/javascript" src="ExtJS/ext-lang-zh_CN.js" mce_src="ExtJS/ext-lang-zh_CN.js"></mce:script><mce:style type="text/css"><!--.panel_icon { background-image:url(images/first.gif)}.center_icon { background-image:url(images/house.png)}--></mce:style><style type="text/css" mce_bogus="1"> .panel_icon { background-image:url(images/first.gif)}.center_icon { background-image:url(images/house.png)}</style>
</head>
<body><form id="form1" runat="server"><div><mce:script type="text/javascript"><!--function ready(){//添加下面這句，有助于當鼠標放在Ext自帶的圖標上時能夠顯示提示的功能Ext.QuickTips.init();var url = "jsonGrid.aspx?Param=select";var sm = new Ext.grid.CheckboxSelectionModel();var cm = new Ext.grid.ColumnModel([ sm,new Ext.grid.RowNumberer({header:"編號",width:50}),{header:"編號",dataIndex:"ID",width:10,hidden:true},{header:"標題",dataIndex:"TypeCName",width:100,editor:new Ext.form.TextField()},{header:"英文名稱",dataIndex:"TypeEName",width:100,editor:new Ext.form.TextField()},{header:"狀態",dataIndex:"DelFlag",width:100,renderer:function(value){if(value==false) {return "顯示";} else {return "隱藏";}}},{header:"添加日期",dataIndex:"AddDate",width:100,renderer:Ext.util.Format.dateRenderer('Y年m月d日')}]);cm.defaultSortable = true; var fields = [{name:"ID"},{name:"TypeCName"},{name:"TypeEName"},{name:"DelFlag"},{name:"AddDate"}];var store = new Ext.data.Store({proxy:new Ext.data.HttpProxy({url:url}),reader:new Ext.data.JsonReader({totalProperty:"totalPorperty",root:"root",fields:fields})});store.load({params:{start:0,limit:15}});var pagingBar = new Ext.PagingToolbar({displayInfo:true,emptyMsg:"沒有數據顯示",displayMsg:"顯示從{0}條數據到{1}條數據，共{2}條數據",store:store,pageSize:15,items:[' ',{enableToggle: true,text: '刷新',cls: 'x-btn-text-icon details',icon:"images/plugin.gif",toggleHandler: function(btn, pressed){//動態加重新載數據列表Ext.getCmp("MenuGridPanel").store.reload();}}, '-', {enableToggle: true,//TypeTable實體類 ID PID TypeEName TypeCName DelFlag AddDate text: '添加',cls: 'x-btn-text-icon details',icon:"images/plugin.gif",toggleHandler: function(btn, pressed){var win = new Ext.Window({title:"添加記錄窗口",width:257,height:200,layout:'form',modal:true,resizable:false,iconCls :"center_icon", items:[{xtype:"form",height:200,labelPad : 0,// 標簽與字段錄入框之間的空白bodyStyle : 'padding-top:3px',frame : true,defaultType : 'textfield',labelAlign : 'right',labelWidth : 55,defaults : // 容器中組件默認統一配置選項 { allowBlank : false,width : 150// 字段寬度 },items :[{fieldLabel:"標題",id:"TypeCName",maxLength:50},{fieldLabel:"英文名稱",id:"TypeEName",maxLength:50},{xtype:"datefield",fieldLabel:"添加日期",id:"AddDate",renderer:Ext.util.Format.dateRenderer('Y年m月d日 h：m：s')},{fieldLabel:"狀態",id:"DelFlag",maxLength:4}]}],buttons:[{xtype:"button",text:"確定提交",cls:"x-btn-text-icon",icon:"images/add.gif",handler:function(){//這里獲取添加表單的數據 var typeCName = Ext.getCmp("TypeCName").getValue();var typeEName = Ext.getCmp("TypeEName").getValue();var addDate = Ext.getCmp("AddDate").getValue();var delFlag = Ext.getCmp("DelFlag").getValue();//同時可以對上面獲取的數據添加驗證Ext.Ajax.request({http://www.cnblogs.com/mogen_yin/admin/%22jsonGrid.aspx?Param=add",//添加 url 具體在哪個頁面實現添加功能params:{ParamName:"good",TypeCNameParam:typeCName},//客戶端頁面向服務器斷傳遞數據，前面是參數名稱，后面是參數值,多個參數用逗號分隔開success:function(respose,option){//如果在服務器端正確處理了數據并且返回了正確的值得就執行該函數的語句//將服務器端正確返回的json字符串轉換橫Ext對象，然后就能夠使用var result = Ext.util.JSON.decode(respose.responseText);//當確定添加成功后再執行下面的語句，動態加載數據列表Ext.getCmp("MenuGridPanel").store.reload();},failure:function(){//如果在服務器端處理數據發生了異常，就執行該函數的語句}});}},{xtype:"button",text:"關閉退出",cls:"x-btn-text-icon",icon:"images/delete.gif",handler:function(){win.destroy();}}],buttonAlign:"center"});win.show();}}, ' ', '-', {enableToggle: true,//TypeTable實體類 ID PID TypeEName TypeCName DelFlag AddDate text: '編輯',cls: 'x-btn-text-icon details',icon:"images/plugin.gif",toggleHandler: function(btn, pressed){ var TypeENameValue;var TypeCNameValue;var DelFlagValue;var AddDateValue;var IDValue;var rows = Ext.getCmp("MenuGridPanel").getSelections();if(rows.length>=1){IDValue = rows[0].json.ID;TypeENameValue = rows[0].json.TypeEName;TypeCNameValue = rows[0].json.TypeCName;DelFlagValue = rows[0].json.DelFlag;AddDateValue = rows[0].json.AddDate;}else{Ext.Msg.alert("提示消息","請選擇一行數據然后才能夠編輯。<br/>如果選擇多行數據，默認情況下只對第一行有效！");return false;}var win = new Ext.Window({title:"編輯修改記錄窗口",width:257,height:200,layout:'form',modal:true,resizable:false,iconCls :"center_icon", items:[{xtype:"form",height:200,labelPad : 0,// 標簽與字段錄入框之間的空白bodyStyle : 'padding-top:3px',frame : true,defaultType : 'textfield',labelAlign : 'right',labelWidth : 55,defaults : // 容器中組件默認統一配置選項 { allowBlank : false,width : 150// 字段寬度 },items :[{fieldLabel:"標題",id:"TypeCName",maxLength:50,value:TypeCNameValue},{fieldLabel:"英文名稱",id:"TypeEName",maxLength:50,value:TypeENameValue},{xtype:"datefield",fieldLabel:"添加日期",value:AddDateValue,id:"AddDate",renderer:Ext.util.Format.dateRenderer('Y年m月d日 h：m：s')},{fieldLabel:"狀態",id:"DelFlag",maxLength:5,value:DelFlagValue}]}],buttons:[{xtype:"button",text:"確定修改",cls:"x-btn-text-icon",icon:"images/add.gif",handler:function(){//這里獲取表單的數據 var typeCName = Ext.getCmp("TypeCName").getValue();var typeEName = Ext.getCmp("TypeEName").getValue();var addDate = Ext.getCmp("AddDate").getValue();var delFlag = Ext.getCmp("DelFlag").getValue();//同時可以對上面獲取的數據添加驗證Ext.Ajax.request({http://www.cnblogs.com/mogen_yin/admin/%22jsonGrid.aspx?Param=edit",//添加 url 具體在哪個頁面實現編輯修改功能params:{ParamName:"good",TypeCNameParam:typeCName},//客戶端頁面向服務器斷傳遞數據，前面是參數名稱，后面是參數值,多個參數用逗號分隔開success:function(respose,option){//如果在服務器端正確處理了數據并且返回了正確的值得就執行該函數的語句//將服務器端正確返回的json字符串轉換橫Ext對象，然后就能夠使用var result = Ext.util.JSON.decode(respose.responseText);//當確定添加成功后再執行下面的語句，動態加載數據列表Ext.getCmp("MenuGridPanel").store.reload();},failure:function(){//如果在服務器端處理數據發生了異常，就執行該函數的語句}});}},{xtype:"button",text:"關閉退出",cls:"x-btn-text-icon",icon:"images/delete.gif",handler:function(){win.destroy();}}],buttonAlign:"center"});win.show();}}, ' ' , '-', {enableToggle: true,//TypeTable實體類 ID PID TypeEName TypeCName DelFlag AddDate text: '刪除',cls: 'x-btn-text-icon details',icon:"images/plugin.gif",toggleHandler: function(btn, pressed){ var TypeENameValue;var TypeCNameValue;var DelFlagValue;var AddDateValue;var IDValue;var rows = Ext.getCmp("MenuGridPanel").getSelections();if(rows.length>=1){IDValue = rows[0].json.ID;TypeENameValue = rows[0].json.TypeEName;TypeCNameValue = rows[0].json.TypeCName;DelFlagValue = rows[0].json.DelFlag;AddDateValue = rows[0].json.AddDate;}else{Ext.Msg.alert("提示消息","請選擇一行數據然后才能夠刪除。<br/>如果選擇多行數據，默認情況下只刪除第一行。<br/>如果需要刪除多條數據，請選擇批量刪除！");return false;}var win = new Ext.Window({title:"確定刪除窗口",width:257,height:200,layout:'form',modal:true,resizable:false,iconCls :"center_icon", items:[{xtype:"form",height:200,labelPad : 0,// 標簽與字段錄入框之間的空白bodyStyle : 'padding-top:3px',frame : true,defaultType : 'textfield',labelAlign : 'right',labelWidth : 55,defaults : // 容器中組件默認統一配置選項 { allowBlank : false,width : 150// 字段寬度 },items:[{fieldLabel:"標題",id:"TypeCName",maxLength:50,value:TypeCNameValue},{fieldLabel:"英文名稱",id:"TypeEName",maxLength:50,value:TypeENameValue},{xtype:"datefield",fieldLabel:"添加日期",value:AddDateValue,id:"AddDate",renderer:Ext.util.Format.dateRenderer('Y年m月d日 h：m：s')},{fieldLabel:"狀態",id:"DelFlag",maxLength:5,value:DelFlagValue}]}],buttons:[{xtype:"button",text:"確定刪除",cls:"x-btn-text-icon",icon:"images/add.gif",handler:function(){//這里獲取表單的數據 var typeCName = Ext.getCmp("TypeCName").getValue();var typeEName = Ext.getCmp("TypeEName").getValue();var addDate = Ext.getCmp("AddDate").getValue();var delFlag = Ext.getCmp("DelFlag").getValue();//同時可以對上面獲取的數據添加驗證Ext.Ajax.request({http://www.cnblogs.com/mogen_yin/admin/%22jsonGrid.aspx?Param=edit",//添加 url 具體在哪個頁面實現編輯修改功能params:{ParamName:"good",TypeCNameParam:typeCName},//客戶端頁面向服務器斷傳遞數據，前面是參數名稱，后面是參數值,多個參數用逗號分隔開success:function(respose,option){//如果在服務器端正確處理了數據并且返回了正確的值得就執行該函數的語句//將服務器端正確返回的json字符串轉換橫Ext對象，然后就能夠使用var result = Ext.util.JSON.decode(respose.responseText);//當確定添加成功后再執行下面的語句，動態加載數據列表Ext.getCmp("MenuGridPanel").store.reload();},failure:function(){//如果在服務器端處理數據發生了異常，就執行該函數的語句}});}},{xtype:"button",text:"關閉退出",cls:"x-btn-text-icon",icon:"images/delete.gif",handler:function(){win.destroy();}}],buttonAlign:"center"});win.show();}}, ' ' ] });var grid = new Ext.grid.GridPanel ({id:"MenuGridPanel",renderTo:document.body,layout:"fit",frame:true,border:true,width:700,height:450,autoScroll:true, store:store,sm:sm,cm:cm,viewConfig:{forceFit: true},title:'<img style="height:auto; width:auto;" src="images/first.gif" mce_src="images/first.gif" /> Ext2.2全新功能版系列之--確定刪除',bbar:pagingBar});}// --></mce:script> <mce:script type="text/javascript"><!--Ext.onReady(ready);// --></mce:script></div></form>
</body>
</html>
總結
以上是生活随笔為你收集整理的grid系列--删除的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： DWR的学习文档（Hello World
- 下一篇： Mac OS X如何重装(如何重新安装)