前言
- 介紹基于 EXT.NET (版本2.2) 混合ExtJs 語(yǔ)法實(shí)現(xiàn)各種功能時(shí),實(shí)現(xiàn)方式(具體就是代碼寫在哪). 簡(jiǎn)單分為前臺(tái)和后臺(tái). 為方便描述, 自定義如下.
- 用
C#語(yǔ)法寫的代碼稱為 后臺(tái)代碼. - 用
JavaScript寫的代碼稱為 前臺(tái)代碼. - 在
aspx界面視圖中寫 稱為前臺(tái). 包括<script runat="server" type="text/C#"內(nèi) - 在 控制器中稱為
后臺(tái).
- 用
-
aspx 和 MVC4 NET 架構(gòu)
image.png
前臺(tái).
JavaScript 包括Ext語(yǔ)法.
- 正常的js方法
- 可以使用 前臺(tái)代碼 . 除了正常的JavaScript 方法外,
ExtJs框架引用:
///頂部Ext命名控件
<%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>
/// body 或其他區(qū)域引入Ext, 這樣就可以使用對(duì)象了. 注意如果 Namespace 不指定默認(rèn)為 App. 此處指定為"", 這樣, 所有的Ext對(duì)象用ID直接訪問(wèn).
<body>
<ext:ResourceManager runat="server" Namespace="" />
- 類似于JQuery 的界面初始加載DOM生成后就會(huì)初始的代碼. 用于獲取數(shù)據(jù)等.
//1.1 界面加載后方法, 類似于$.ready(function(){})
Ext.onReady(function () {
})
- aspx界面自帶的
后臺(tái). Ext.NET. C# 語(yǔ)法
- 界面開始前方法 ,
<script runat="server">
protected override void OnLoad(EventArgs e)
{
base.OnLoad(e);
if (!X.IsAjaxRequest)
{
LoadFunc(ViewBag.LoginUser.UserID, ..);
}
}
- aspx界面 自帶的后臺(tái)語(yǔ)法, 用標(biāo)簽形式引入獲得Js對(duì)象, 傳遞數(shù)據(jù)是一種方式.
<script type="text/javascript"> var Model = {}; Model = <%=Ext.Net.JSON.Serialize(ViewBag.Model)%>; </script>
//2.2 正常的C# 方法.
//2.3 DirectMethod 方法
- 方法上加上
[DirectMethod]注解的方法. - 如上方式介紹完后之后, 重點(diǎn)注意的是, 在前臺(tái)(aspx)中寫 后臺(tái)代碼 的目的或者說(shuō)是適用場(chǎng)景, :
用C#代碼訪問(wèn)界面控件, 包含大量語(yǔ)法提示. 方法中也可以通過(guò)回調(diào)js代碼, 設(shè)調(diào)用js方法完成相應(yīng)功能, 如下代碼說(shuō)明.
private void CreateGpl(System.Data.DataTable _rptData, GridPanel _gp, Store _store)
{
//清除舊數(shù)據(jù)與記錄集
_store.Reader.Clear();
_gp.SelectionModel.Clear();
_gp.ColumnModel.Columns.Clear();
//_store.Model.Clear();
if (_rptData.Rows.Count == 0)
{
X.Msg.Alert("提示", "無(wú)數(shù)據(jù)顯示.").Show();
_gp.Render();
return;
}
//1. 序號(hào)列
_gp.ColumnModel.Columns.Add(new RowNumbererColumn
{
Text = "序號(hào)",
Width = 45
});
List<ModelField> modelFields = new List<ModelField>();
foreach (System.Data.DataColumn _dataColumn in _rptData.Columns)
{
var columnName = _dataColumn.ColumnName;
var _column = new SummaryColumn();
_column.DataIndex = columnName;
_column.Text = columnNames[1];
_column.Align = Alignment.Right;
_column.SummaryType = SummaryType.Sum;
_column.Renderer = new Renderer("return Other.FormatMoney(value," + dataPres + ")");
_column.SummaryRenderer = new Renderer("return Other.FormatMoney(value," + dataPres + ")");
_gp.ColumnModel.Columns.Add(_column);
}
}
modelFields.Add(_modelField);
}
_store.Fields.AddRange(modelFields);
_store.DataSource = _rptData.DefaultView;
_store.DataBind();
_store.LoadData(_rptData);
// 重繪
//SumStore.Reload();
_gp.Render();
}
-
DirectEvent方法
<ext:Button ID="QueryData" runat="server" Text="查詢" Icon="Zoom">
<Listeners>
<Click Handler="Ext.net.Mask.show({ msg : '正在查詢中...' });" />
</Listeners>
<DirectEvents>
<Click OnEvent="QueryData_Click" >
<ExtraParams>
<ext:Parameter Name = "month" Value = "Ext.Date.format(dfmonth.getValue(), 'Ymd')" Mode="Raw"/>
<ext:Parameter Name = "keyWord" Value = "textName.getValue()" Mode="Raw"/>
<ext:Parameter Name = "orgId" Value = "ddfOrgName.getValue()" Mode="Raw"/>
</ExtraParams>
</Click>
</DirectEvents>
對(duì)應(yīng)后臺(tái)代碼:
/// <summary>
/// 查詢事件
/// </summary>
/// <param name="sender"></param>
/// <param name="e"></param>
public void QueryData_Click(object sender, DirectEventArgs e)
{
QueryData.Disabled = true;
try
{
var OrgID = e.ExtraParams["orgId"];
var months = e.ExtraParams["month"];
var keyWords = e.ExtraParams["keyWord"];
BindData(OrgID, months, keyWords);
QueryData.Disabled = false;
}
catch (Exception ex)
{
QueryData.Disabled = false;
X.Msg.Alert("異常", ex.Message);
}
X.Mask.Hide();
}
特別注意, 需要正常訪問(wèn)控件及使用, 需要修改頁(yè)面的這個(gè)條件:
<script type="text/javascript">
Ext.net.ResourceMgr.isMVC = false;
</script>
---------------------------------------分割線---------------------------------------------
進(jìn)階
DirectEvent和 DirectMethod
- 這兩個(gè)屬于
Ext.NET的特色, 展開講都很多的類型. 這篇文章足夠細(xì)致 , 參考:
http://www.cnblogs.com/yc-755909659/p/3755323.html
適用總結(jié):DirectEvent類似于給控件增加事件及回調(diào), 在控件中或者統(tǒng)一在ext:resourseMgr中注冊(cè), 傳遞參數(shù)的方式及回調(diào)處理.
directMethod屬于在js中調(diào)用C#方法, 更加智能,回調(diào)等方式更加優(yōu)雅. 數(shù)據(jù)處理.
注意的是頁(yè)面無(wú)關(guān), 就是不需要取界面值傳遞, 可以使用靜態(tài)方法. 非靜態(tài)方法, Ext.NET控件在提交時(shí)會(huì)提交很多數(shù)據(jù).
