添加記錄篇裡實作在分頁欄裡添加一個按鈕,當點該按鈕後彈出一個添加窗體,正确輸入資料并送出成功後,窗體并不關閉(可以自己定義),但窗體下面的grid清單會自動增加剛剛添加的資料,視覺效果非常理想.
首先看看效果圖.在這個效果圖裡面不僅僅設定了添加按鈕,而且還添加了一個重新整理按鈕
在上面的效果圖裡面的分頁欄裡可以看見,已經将按鈕添加到分頁欄裡面,Ext2.2以前的版本隻能夠将按鈕添加到工具欄,當然也不是說一定不可以,如果你願意找麻煩,你就自己擴充Ext2.2以前的版本也是能夠實作的.
現在當我們點重新整理按鈕時,頁面就能夠重新加載資料庫的資料,你可以在伺服器端加斷點測試下
在重新整理按鈕旁邊的就是添加按鈕,當點這個按鈕後,就彈出一個窗體用來添加資料,看看下面的效果圖就可以明白
上面這個效果圖就是在點添加按鈕後彈出的添加窗體,在沒有關閉該窗體之前不能夠對下面的清單再進行操作,如果你喜歡非模式視窗,你可以在Ext.Window元件裡面更改modal:true,這個屬性,可以設定為false再測試下.
這個窗體的添加事件以及擷取資料的方式包括在增加資料後動态重新整理清單的方式都已經寫出來,并且加了詳細的注釋,清單資料顯示的背景代碼包括資料表都和上一篇完全一樣,隻是這裡沒有在背景實作具體添加的代碼,這和正常的asp.net開發沒有差別,你隻要正确的傳回json資料就可以了,在提高篇的前幾篇了已經詳述了如果連接配接背景資料庫以及如何傳回json資料的方式.
下面隻是把用戶端的實作完整的貼出來供大家參考.
[複制到剪貼闆] CODE: <%@ Page Language="C#" AutoEventWireup="true" CodeFile="gridDelete.aspx.cs" Inherits="gridDelete" %>
<!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" target="_blank" rel="external nofollow" />
<link rel="Stylesheet" type="text/css" href="ExtJS/resources/css/xtheme-green.css" target="_blank" rel="external nofollow" />
<script type="text/javascript" src="ExtJS/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="ExtJS/ext-all.js"></script>
<script type="text/javascript" src="ExtJS/ext-lang-zh_CN.js"></script>
<style type="text/css">
.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>
<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
({
[url]http://www.cnblogs.com/mogen_yin/admin/%22jsonGrid.aspx?Param=add[/url]",//添加 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" /> Ext2.2全新功能版系列之--添加記錄',
bbar:pagingBar
});
}
</script>
<script type="text/javascript">
Ext.onReady(ready);
</script>
</div>
</form>
</body>
</html>