Ext.NET开发小结

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>   





评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值