前言
- 介绍基于 EXT.NET (版本2.2) 混合ExtJs 语法实现各种功能时,实现方式(具体就是代码写在哪). 简单分为前台和后台. 为方便描述, 自定义如下.
- 用
C#语法写的代码称为 后台代码. - 用
JavaScript写的代码称为 前台代码. - 在
aspx界面视图中写 称为前台. 包括<script runat="server" type="text/C#"内 - 在 控制器中称为
后台.
- 用
-
aspx 和 MVC4 NET 架构
image.png
前台.
JavaScript 包括Ext语法.
- 正常的js方法
- 可以使用 前台代码 . 除了正常的JavaScript 方法外,
ExtJs框架引用:
///顶部Ext命名控件
<%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>
/// body 或其他区域引入Ext, 这样就可以使用对象了. 注意如果 Namespace 不指定默认为 App. 此处指定为"", 这样, 所有的Ext对象用ID直接访问.
<body>
<ext:ResourceManager runat="server" Namespace="" />
- 类似于JQuery 的界面初始加载DOM生成后就会初始的代码. 用于获取数据等.
//1.1 界面加载后方法, 类似于$.ready(function(){})
Ext.onReady(function () {
})
- aspx界面自带的
后台. Ext.NET. C# 语法
- 界面开始前方法 ,
<script runat="server">
protected override void OnLoad(EventArgs e)
{
base.OnLoad(e);
if (!X.IsAjaxRequest)
{
LoadFunc(ViewBag.LoginUser.UserID, ..);
}
}
- aspx界面 自带的后台语法, 用标签形式引入获得Js对象, 传递数据是一种方式.
<script type="text/javascript"> var Model = {}; Model = <%=Ext.Net.JSON.Serialize(ViewBag.Model)%>; </script>
//2.2 正常的C# 方法.
//2.3 DirectMethod 方法
- 方法上加上
[DirectMethod]注解的方法. - 如上方式介绍完后之后, 重点注意的是, 在前台(aspx)中写 后台代码 的目的或者说是适用场景, :
用C#代码访问界面控件, 包含大量语法提示. 方法中也可以通过回调js代码, 设调用js方法完成相应功能, 如下代码说明.
private void CreateGpl(System.Data.DataTable _rptData, GridPanel _gp, Store _store)
{
//清除旧数据与记录集
_store.Reader.Clear();
_gp.SelectionModel.Clear();
_gp.ColumnModel.Columns.Clear();
//_store.Model.Clear();
if (_rptData.Rows.Count == 0)
{
X.Msg.Alert("提示", "无数据显示.").Show();
_gp.Render();
return;
}
//1. 序号列
_gp.ColumnModel.Columns.Add(new RowNumbererColumn
{
Text = "序号",
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>
对应后台代码:
/// <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();
}
特别注意, 需要正常访问控件及使用, 需要修改页面的这个条件:
<script type="text/javascript">
Ext.net.ResourceMgr.isMVC = false;
</script>
---------------------------------------分割线---------------------------------------------
进阶
DirectEvent和 DirectMethod
- 这两个属于
Ext.NET的特色, 展开讲都很多的类型. 这篇文章足够细致 , 参考:
http://www.cnblogs.com/yc-755909659/p/3755323.html
适用总结:DirectEvent类似于给控件增加事件及回调, 在控件中或者统一在ext:resourseMgr中注册, 传递参数的方式及回调处理.
directMethod属于在js中调用C#方法, 更加智能,回调等方式更加优雅. 数据处理.
注意的是页面无关, 就是不需要取界面值传递, 可以使用静态方法. 非静态方法, Ext.NET控件在提交时会提交很多数据.
网友评论