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>