在過去的系統設計中我們經常使用到表達式欄位作為計算欄位的功能，在AjaxGridView和AjaxFormView中，我們需要通過Js的方法，在AjaxGridView的BeforeEdit和AfterEdit以及AjaxFormView的OnFocus和OnLeave屬性中實現計算計算欄位的功能。下面我們透過bFormViewbOrders.aspx分別完成AjaxGridView: Quantity *UnitPrice=amount, amount為虛擬欄位不能輸入AjaxFormView: 出貨日期為訂單日期+7天兩個功能。

Ø AjaxGridView: Quantity *UnitPrice=amount, amount為虛擬欄位不能輸入

1. 在開始之前，首先我們修改一下sOrders這個server端。將對應Detail的InfoCommand的語法修改為：

select [Order Details].*, [Order Details].UnitPrice * Quantity as amount, Products.ProductName FROM [Order Details] left join Products on [Order Details].ProductID=Products.ProductID

修改完成後，重新建置sOrders這個工程。並且找到VS上的“工具”->“UnLoadAppDomain”

2. 接著，我們回到bFormViewbOrders.aspx找到agvDetail元件，這裡我們將原先不存在amount欄位添加到Columns中，我們打開Columns點擊加入，設定如下圖，提示我們將這個欄位調整到Quantity下方。注意：這裡我們需要將amount欄位設定為ReadOnly類型。

3. 我們分別找到colUnitPrice以及colQuantity的AfterEdit屬性寫入unitPriceAfterEdit以及quantityAfterEdit。這個設定表示在UnitPrice或者Quantity編輯後滑鼠離開後，分別觸發unitPriceAfterEdit以及quantityAfterEdit兩個Js方法。

4. 現在我們將網頁切換到，在中的javascript區域將如下程式加入：

function unitPriceAfterEdit(value)

{

var unitPrice = value.value;

var quantity = value.record.get("Quantity");//取得記錄中的Quantity這個欄位值

if (isNaN(parseInt(quantity)))

value.record.set("amount", 0);

else

value.record.set("amount", unitPrice * quantity);

}

function quantityAfterEdit(value)

{

var unitPrice = value.record.get("UnitPrice");//取得記錄中的UnitPrice這個欄位值

var quantity = value.value;

if (isNaN(parseInt(unitPrice)))

value.record.set("amount", 0);

else

value.record.set("amount", unitPrice * quantity);

}

5. 最後我們一起來瀏覽一下效果，當輸入單價同時輸入數量時，系統自動帶出金額欄位

Ø AjaxFormView: 出貨日期為訂單日期+7天我們分別透過OrderDate的OnLeave屬性，以及ShippedDate的OnFocus屬性來完成出貨日期的變化

1. 我們分別在OrderDate的OnLeave屬性，以及ShippedDate的OnFocus屬性設定setShippedDateFrmOrderDate以及setShippedDateSelf，這裡表示的意義是當輸入了OrderDate離開輸入框的時候自動產生出貨日期，或者在滑鼠點入出貨日期時重新根據OrderDate進行計算。

2. 現在我們將網頁切換到，在中的javascript區域將如下程式加入：

function setShippedDateFrmOrderDate(field)

{

var value = new Date(field.value);

value.setDate(value.getDate()+7);

var formPanel = field.findParentBy(function(container){

if(container.id == 'AjaxLayout1') {

return true;

}

});

if(formPanel) {

var baseForm = formPanel.getForm();

var values = baseForm.getValues();

var anField = baseForm.findField('ShippedDate');

if(anField){

anField.setValue(value);

}

function setShippedDateSelf(field)

{