Ext.NET开发小结
页面头部一定要引入：
<%@Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>Body部分一定要添加<ext:ResourceManager ID="ResourceManagerID“ runat=”server” />
不然无法解析页面一、 弹窗对话框
（1） 前台弹出对话框 Ext.Msg.alert("提示标题", "提示内容");（2） Ext.Msg.confirm("提示", "确定要XXXX吗?", function(result) {
if (result == "yes") {
//单击是按钮触发事件
} else {
//单击否按钮触发事件
}
});（3） 后台弹出一般对话框
X.Msg.Alert("提示", "请返回选择要绑定的用户").Show();//带有回调函数的提示，SetWindowOpen方法是客户端的js函数，程序会自动执行它，这个提示框不一定会显示出来，但是处理方式上很灵活，因为客户端的函数还可以写成再次回传到后台，自己把握
X.Msg.Alert("提示", "内容", new JFunction { Fn = "SetWindowOpen()" }).Show();（4） 后台的确认提示及回调函数处理
（5） X.Msg.Confirm("提示", "内容？", new MessageBoxButtonsConfig
{
Yes = new MessageBoxButtonConfig
{
Handler = "mainpage.CreateModel()",
Text = "是"
},
No = new MessageBoxButtonConfig
{
//Handler = "xxx 方法",
Text = "否"
}
}).Show();
这是后台的一个弹出确认框提示，针对每个按钮都可以在Handler上配置事件,
主要，它的里面是个方法，这个方法可以带类名，比如
public partial class mainpage
{
[DirectMethod]
public void CreateModel()
{
//…..
}
}
但一定要主要，因为需要回调后台方法，所有该方法必须有DirectMethod进行标记，不然不识别。
（1）、 传统asp.net是放到if (!IsPostBack) { //… },主要起到防止页面回发再次绑定，对于Ext.NET这种防止回发绑定的情况出现，应当放到X.IsAjaxRequest里面：
if (!X.IsAjaxRequest)
{
//…
}
三、 前台JS调用后台方法
（1） 请用Ext.net.DirectMethods.FunctionName去处理
FunctionName为后台方法，且必须是public类型的，而且需要用[DirectMethod]方法进行标记：
Ext.net.DirectMethods.FunctionName(
{
success: function(flag) {
//...
}
});Success部分也是个回调函数，这个回调函数的函数体部分为function，而function的参数是后台方法FunctionName的返回值，所有，我们可以针对后台不同的返回值进行相关的判断处理。
当然，如果这个后台的FunctionName函数需要从前台传递一个或多个参数过去，可以写到回调函数前面，比如
Ext.net.DirectMethods.FunctionName(param1,param2,..,paramn,
{
success: function(flag) {
//...
}
});
但是一定要用英文逗号（“,”）隔开，且能够在后台隐式转换成后台方法的对应参数的类型。这里有个技巧,如果传递多个参数比便，我们可以再前台用js拼合参数（中间用一些符号加以连接，比如$ ,|,@,&等等），变成一个参数，然后到后台再进行字符串的拆分，就说到这，组合度还是很灵活的。
（2） 关于button按钮的单击事件
① .普通个前台js事件方法
<ext:Button ID="Button4" runat="server" Text="刷新" Icon="ArrowRefresh" Width="60">
<Listeners>
<Click handler=”functionProcdure” />
/Listeners>
</ext:Button>
functionProcdure 是具体的函数过程；<ext:Button ID="Button4" runat="server" Text="刷新" Icon="ArrowRefresh" Width="60">
<Listeners>
<Click handler=”={ functionname }” />
/Listeners>
</ext:Button>
Functionname是具体的函数名<ext:Button ID="Button4" runat="server" Text="刷新" Icon="ArrowRefresh" Width="60">
<Listeners>
<Click Handler="Ext.net.DirectMethods.functionName()” />
/Listeners>
</ext:Button>
可以直接通过Ext.net.DirectMethods调用后台的方法
<ext:Button ID="Button4" runat="server" Text="刷新" Icon="ArrowRefresh" Width="60" OnClientClick="Showwin()"/>
直接写OnClientClick事件调用JS里面方法,JS里面代码为：
function Showwin()
{
Ext.getCmp('Window1').show();
}<ext:Button ID="Button4" runat="server" Text="刷新" Icon="ArrowRefresh"
ondirectclick="Button4_DirectClick"/>
直接写ondirectclick事件调用后台方法。
后台代码为：
protected void Button4_DirectClick(object sender, DirectEventArgs e)
{
this.Window1.Show();
}
写DirectEvents事件调用后台方法
<ext:Button ID="Button4" runat="server" Text="刷新" Icon="ArrowRefresh">
<DirectEvents>
<Click OnEvent="Button4_Click" />
</DirectEvents>
</ext:Button>
后台代码为：
protected void Button5_Click(object sender, DirectEventArgs e)
{
this.Window1.Show();
}
另外注意:控件的隐藏属性为Hidden="true"，而非Visible="false",后者会
找不到控件。
例如 <ext:Window ID="Window1" runat="server" Width="450" Height="280" Title="Move Window" Padding="6" Visible="false" Hidden="true" >
1. store的使用方法
store是独立出来的控件，一般放在框架的最外层，也就是form的下一级
事例代码：
<ext:Store ID="storePage" runat="server" OnRefreshData="AllPageDataBind" AutoLoad="true">
<Reader>
<ext:JsonReader>
<Fields>
<ext:RecordField Name="id" />
<ext:RecordField Name="classid" />
<ext:RecordField Name="parentconsum" />
<ext:RecordField Name="sonconsum" />
<ext:RecordField Name="addTime" Type="Date" />
<ext:RecordField Name="addUser" />
</Fields>
</ext:JsonReader>
</Reader>
<Proxy>
<ext:PageProxy AutoDataBind="true" />
</Proxy>
</ext:Store>
其中开头的 OnRefreshData="AllPageDataBind" AutoLoad="true" 以及末尾的<Proxy>
<ext:PageProxy AutoDataBind="true" />
</Proxy>
是提供后台绑定数据的方法。后台代码为
protected void AllPageDataBind(object sender, StoreRefreshDataEventArgs e)
{
//绑定store数据。
}
另外，<ext:RecordField Name="id" />
为分别绑定数据源的相关字段。接下来要用GridPanel容器与store控件关联起来。例如：
<ext:GridPanel ID="gridPageManagePanel" StoreID="storePage" StripeRows="true" runat="server" Region="Center" TrackMouseOver="true" Border="false">
</ext:GridPanel>
其中StoreID就是你所要关联的Store的ID属性，Region为容器所处的位置，方便排版。在GridPanel里面的代码为：
<ColumnModel>
<Columns>
<ext:RowNumbererColumn Align="Center" Header="序号" Width="35" />
<ext:Column Align="Center" Header="消费项目" DataIndex="sonconsum" />
<ext:Column Align="Center" Header="所属大类" DataIndex="parentconsum" />
<ext:DateColumn Align="Center" Header="添加时间" DataIndex="addTime"
Width="150" Format="yyyy-MM-dd hh:mm:ss" />
<ext:Column Align="Center" Header="添加人" DataIndex="addUser" />
<ext:CommandColumn Align="Center" Header="操作" Width="120">
<Commands>
<ext:GridCommand Icon="ApplicationEdit" Text="编辑" CommandName="Edit" />
<ext:CommandSeparator />
<ext:GridCommand Icon="ApplicationDelete" Text="删除" CommandName="Del" />
</Commands>
</ext:CommandColumn>
</Columns>
</ColumnModel>
ColumnModel为页面上显示数据源的容器，
<ext:RowNumbererColumn Align="Center" Header="序号" Width="35" />
为自带的自增一的序列。
接下的列分别绑定数据源的相关字段，时间用DateColumn列，使用Format="yyyy-MM-dd hh:mm:ss"方法把时间转换成标准时间格式。
<ext:CommandColumn Align="Center" Header="操作" Width="120">
<Commands>
<ext:GridCommand Icon="ApplicationEdit" Text="编辑" CommandName="Edit" />
<ext:CommandSeparator />
<ext:GridCommand Icon="ApplicationDelete" Text="删除" CommandName="Del" />
</Commands>
</ext:CommandColumn>
这段为对数据源的操作，可以通过listens响应事件，并在JS里面写相关事件操作它们。
接下来的代码是：
<LoadMask ShowMask="true" />
<BottomBar>
<ext:PagingToolbar ID="PagingToolBar1" runat="server" PageSize="10" StoreID="storePage">
</ext:PagingToolbar>
</BottomBar>
<SelectionModel>
<ext:RowSelectionModel ID="SelectedRowModel1" runat="server" SingleSelect="true" />
</SelectionModel>
<Listeners>
<RowClick Handler="rowSelect()" />
<RowDblClick Handler=" rowdbSelect()"/>
<Command Handler="editContract(command,record);" />
<RowContextMenu Handler="e.preventDefault(); #{RowContextMenu}.dataRecord = this.store.getAt(rowIndex);#{RowContextMenu}.showAt(e.getXY());" />
</Listeners>
其中，<LoadMask ShowMask="true" />为加载数据时出现圆形加载进度条。
PagingToolbar为自带的分页控件，通过StoreID="storePage"绑定数据源。
SelectionModel中SingleSelect="true"提供单行选择支持，也可以在SelectionModel里面写单行响应Listeners事件，如
<Listeners>
<RowSelect Handler="if (#{Panel2}.isVisible()) {#{storePage2}.reload();}" Buffer="250" />
</Listeners>
最后的Listeners响应的是整个GridPanel的事件RowClick 单击事件，RowDblClick 双击事件，RowContextMenu Handler右击菜单事件，Command Handler就是刚才提到的操作栏响应事件，通过command参数把各项操作区分开来。另外，我们要注意GridPanel一些自带方法的用法，如上文GridPanel的ID为gridPageManagePanel，则有如下代码示例：
gridPageManagePanel.reload(); 刷新GridPanel。
gridPageManagePanel.hasSelection(); 判断GridPanel是否有选中行。
gridPageManagePanel.getSelectionModel().getSelected().data.id; 获取选中行的字段为id的数据，id为数据集的字段名，可作相应更改。
gridPageManagePanel.getSelectionModel().clearSelections(); 取消选中行选中。数据集的数据不仅可以传递到前台JS,同样也可以传递到后台。请看如下代码。
<ext:Store ID="storePage2" runat="server" OnRefreshData="AllPageDataBind" AutoLoad="true">
<Reader>
<ext:JsonReader>
<Fields>
<ext:RecordField Name="id" />
<ext:RecordField Name="name" />
<ext:RecordField Name="parentconsum" />
<ext:RecordField Name="price" />
<ext:RecordField Name="isself" />
<ext:RecordField Name="addUser" />
<ext:RecordField Name="addTime" Type="Date" />
<ext:RecordField Name="classid" />
</Fields>
</ext:JsonReader>
</Reader>
<BaseParams>
<ext:Parameter Name="id" Value="Ext.getCmp('#{GridPanel1}') && #{GridPanel1}.getSelectionModel().hasSelection() ? #{GridPanel1}.getSelectionModel().getSelected().id : -1"
Mode="Raw" />
</BaseParams>
<Listeners>
<LoadException Handler="Ext.Msg.alert('Products - Load failed', e.message || response.statusText);" />
</Listeners>
<Proxy>
<ext:PageProxy AutoDataBind="true" />
</Proxy>
</ext:Store>在数据源A里锁定数据源B的选中行，从而实现联动的效果。主要代码如下
<BaseParams>
<ext:Parameter Name="id" Value="Ext.getCmp('#{GridPanel1}') && #{GridPanel1}.getSelectionModel().hasSelection() ? #{GridPanel1}.getSelectionModel().getSelected().id : -1"
Mode="Raw" />
</BaseParams>
该段代码设置了一个名字为id的参数，值为数据源A有选中行的情况下为数据源A的id字段的值。没选中值则为-1。
在后台绑定数据源A的代码中，可以获得id参数的值，从而能实现选中数据源A的数据的时候，数据源B和id字段相关的内容自动显示出来。代码如下：
string id;
protected void AllPageDataBind(object sender, StoreRefreshDataEventArgs e)
{
id = e.Parameters["id"];
}
有了这个id，在绑定数据源B的时候添加where子句，就能实现上述效果。五、 简单控件的使用方法
1.文本框
<ext:TextField ID="txtmemebernum" runat="server" FieldLabel="会员编号" MaxLength="9" AnchorHorizontal="92%" />
FieldLabel就是文本框前的label提示标签，所以我们不用再另建label来写提示信息。
2.数字框
<ext:NumberField ID="txtdiscount" runat="server" EmptyText="比如9(9折)" MaxLength="4" FieldLabel="会员折扣" Width="200" />
只能填写数字。
3.时间框
<ext:DateField ID="txtbirthday" runat="server" FieldLabel="出生日期" AllowBlank="false" AnchorHorizontal="92%" />
4.选择框
<ext:ComboBox ID="ComboBoxClass" runat="server" Width="150" Editable="false" EmptyText="—请选择—">
<Items>
<ext:ListItem Value="-1" Text="—请选择—" />
<ext:ListItem Value="10" Text="可用" />
<ext:ListItem Value="20" Text="禁用" />
</Items>
</ext:ComboBox>
5.单选框
<ext:RadioGroup ID="rdoInmportant" runat="server" ItemCls="x-check-group-base" FieldLabel="是否重点" Width="120" Height="22">
<Items>
<ext:Radio runat="server" ID="Radio3" BoxLabel="否" LabelWidth="60" Checked="true" />
<ext:Radio runat="server" ID="Radio2" BoxLabel="是" LabelWidth="60" />
</Items>
</ext:RadioGroup>
6.组合框，因为一个空间只能占一行，要想两个空间占一行，需要用到组合框。
<ext:CompositeField ID="CompositeField2" runat="server" FieldLabel="客户折扣" AnchorHorizontal="92%">
<Items>
<ext:TextField ID="TextField1" runat="server" Width="40" Text="0." ReadOnly="true" StyleSpec="color:green;" />
<ext:NumberField ID="txtdiscount" runat="server" EmptyText="比如9(9折)" MaxLength="4" FieldLabel="会员折扣" Width="200" />
</Items>
</ext:CompositeField>
注意：要用table排版请加Content，例如：
<Content>
<table>
<tr>
<td style="width:50%;">
<p><span class="x-label-text">Subscription ID:</span>
<span style="color:red">*</span></p>
<ext:TextField ID="TextField1" runat="server" Text="123-456789" Width="230" />
</td>
</tr>
</table>
</Content>
7. ext:KeyNav和ext:KeyMap用来控制键盘输入相应事件。ext:KeyNav只能控制键盘部分特殊按键，如小键盘上下左右，而ext:KeyMap能控制大部分按键。代码如下：
<ext:KeyNav ID="KeyNav1" runat="server" Target="={document.body}">
<Left Handler="move(Window1, 'left');" />
</ext:KeyNav>
<ext:KeyMap ID="KeyMap1" runat="server" Target="={document.body}">
<ext:KeyBinding>
<Keys>
<ext:Key Code="A" />
</Keys>
<Listeners>
<Event Handler="move(Window1, 'left');" />
</Listeners>
</ext:KeyBinding>
Alert.Show("啊啊啊啊");