这两天越来越觉得Ext.Net很强大,如果运用熟练可以极大的提高编程效率。如果你也要学习Ext.Net,推荐你看一下《Ext.Net Web 应用程序开发教程》。

Ext.Net与ExtJS代码比较

上一篇中我们创建了一个使用Ext.Net创建了一个window窗口,代码非常简单:

<ext:Window runat="server"
ID="win"
Title="示例窗口"
Width="300"
Height="200"
AutoShow="true">
</ext:Window>

如果我们使用ExtJS代码来创建这个窗口,代码会是什么样的呢?请看下面:

Ext.create("Ext.window.Window", {
id:"win2",
title: "示例窗口2",
height: 200,
width: 300,
autoShow: true
});

看这两段代码是不是很像,Ext.Net只是将ExtJS的配置属性进行了封装,作为空间的属性,可以在Visual Studio中进行非常友好的智能提示,效率提升不止一倍啊。

另外,Ext.Net还支持控件的嵌套定义,跟ExtJS中的items配置项、buttons配置项一样,请看下面的代码:

<ext:Window runat="server"
ID="win"
Title="示例窗口"
Width="300"
Height="200"
Layout="FitLayout"
AutoShow="true">
<Items>
<ext:FormPanel runat="server" ID="extForm" BodyPadding="5">
<Items>
<ext:TextField runat="server" ID="txtName" FieldLabel="姓名"></ext:TextField>
<ext:NumberField runat="server" ID="txtAge" FieldLabel="年龄"></ext:NumberField>
</Items>
<Buttons>
<ext:Button runat="server" ID="btnSave"
Icon="DatabaseSave" Text="保存">
</ext:Button>
</Buttons>
</ext:FormPanel>
</Items>
</ext:Window>

这仍然是我们的window,新的效果如下:

很酷吧,接下来我们一起看看它的事件机制。

Ext.Net的事件处理

Ext.Net中的事件分为客户端事件和服务器端事件,客户端事件需要页面中JS来处理,服务器端事件则会无刷新的提交给服务器,在服务器处理完成并将结果显示在页面中。

拿我们上面窗口中的保存按钮为例,我们来介绍一下如何处理客户端事件。

客户端事件处理

首先,我们来添加一个客户端的单击事件:

<ext:Button runat="server" ID="btnSave"
Icon="DatabaseSave" Text="保存">
<Listeners>
<Click Handler="Ext.MessageBox.alert('提示', '保存按钮被单击')" />
</Listeners>
</ext:Button>

跟ExtJS中的写法一样,使用listeners来添加事件。当我们在Listeners标签中输入左尖括号以后,visual studio 会提示我们所有可用的事件:

这种编程方式实在是太快了,效率完全可以达到ExtJS熟练的水平(题外话,套用一句广告词:根本停不下来……)。

Handler 属性保存一段JS代码,如果要添加一个处理方法,则需要使用Fn属性:

<ext:Button runat="server" ID="btnSave"
Icon="DatabaseSave" Text="保存">
<Listeners>
<Click Fn="fnSave" />
</Listeners>
</ext:Button>

注意,使用Fn属性的时候,需要确保我们的页面中已经定义了fnSave方法:

function fnSave() {
//此处添加保存的处理逻辑
Ext.MessageBox.alert('提示', '保存按钮被单击')
}

此处只使用了click事件,完整是事件列表可以参考ExtJS API文档。

服务器端事件处理

既然使用了Ext.Net服务器控件,恐怕大家更希望使用服务器端事件吧。Ext.Net服务器事件需要在DirectEvents中定义,它是Ext.Net独有的。DirectEvents将被回发到服务器进行处理,并将处理结果展示在页面中(如果有更新页面的话)。

来看一下DirectEvents

<ext:Button runat="server" ID="btnSave"
Icon="DatabaseSave" Text="保存">
<DirectEvents>
<Click OnEvent="btnSave_DirectClick"></Click>
</DirectEvents>
</ext:Button>

对应的服务器处理方法如下:

protected void btnSave_DirectClick(object sender, DirectEventArgs e)
{
X.MessageBox.Alert("提示", "保存按钮被单击").Show();
}

如果我们需要在执行服务器端处理的时候显示遮罩层,可以在Click中添加配置节点:

<ext:Button runat="server" ID="btnSave"
Icon="DatabaseSave" Text="保存">
<DirectEvents>
<Click OnEvent="btnSave_DirectClick">
<

EventMask ShowMask="true" Msg

="正在加载..." />
</Click>
</DirectEvents>
</ext:Button>

另外,Ext.Net Direct Events还可以传递自定义参数:

<ext:Button runat="server" ID="btnSave"
Icon="DatabaseSave" Text="保存">
<DirectEvents>
<Click OnEvent="btnSave_DirectClick">
<ExtraParams>
<

ext:Parameter Name="param1" Value

="自定义参数值" />
</ExtraParams>
<EventMask ShowMask="true" Msg="正在加载..." />
</Click>
</DirectEvents>
</ext:Button>

在服务器端的处理方法中,我们可以轻易的获取到这个参数值:

protected void btnSave_DirectClick(object sender, DirectEventArgs e)
{

string param1 = e.ExtraParams["param1"

];
X.MessageBox.Alert("提示", "保存按钮被单击,传入的参数值:" + param1).Show();
}

Ext.Net中的DirectEvents所支持的事件类型同样可以参考ExtJS的API文档

Ext.Net学习笔记02:Ext.Net用法概览的更多相关文章

  1. 【Ext.Net学习笔记】02:Ext.Net用法概览、Ext.Net MessageBus用法、Ext.Net布局

    Ext.Net用法概览 Ext.Net还是很强大,如果运用熟练可以极大的提高编程效率.如果你也要学习Ext.Net,原文博主推荐书籍:<Ext.Net Web 应用程序开发教程>,是英文的 ...

  2. 【Ext.Net学习笔记】03:Ext.Net DirectEvents用法详解、DirectMethods用法详解

    Ext.Net通过DirectEvents进行服务器端异步的事件处理.[Ext.Net学习笔记]02:Ext.Net用法概览.Ext.Net MessageBus用法.Ext.Net布局 中已经简单的 ...

  3. 【Ext.Net学习笔记】06:Ext.Net GridPanel的用法(GridPanel 折叠/展开行、GridPanel Selection、 可编辑的GridPanel)

    GridPanel 折叠/展开行 Ext.Net GridPanel的行支持折叠/展开功能,这个功能个人觉得还说很有用处的,尤其是数据中包含图片等内容的时候. 下面来看看效果: 使用行折叠/展开功能之 ...

  4. 【Ext.Net学习笔记】05:Ext.Net GridPanel的用法(包含Filter、Sorter、Grouping、汇总(Summary)的用法)

    GridPanel是用来显示数据的表格,与ASP.NET中的GridView类似. GridPanel用法 直接看代码: <ext:GridPanel runat="server&qu ...

  5. 【Ext.Net学习笔记】04:Ext.Net中使用数据、Ext.Net Store的用法、Ext.Net ComboBox用法

    之前的几篇文章都是介绍Ext.Net较为基础的东西,今天的这一篇将介绍数据的一些用法,包括XTemplate绑定数据.Store(Modal.Proxy).ComboBox的用法等. XTemplat ...

  6. Ext.Net学习笔记22:Ext.Net Tree 用法详解

    Ext.Net学习笔记22:Ext.Net Tree 用法详解 上面的图片是一个简单的树,使用Ext.Net来创建这样的树结构非常简单,代码如下: <ext:TreePanel runat=&q ...

  7. Ext.Net学习笔记23:Ext.Net TabPanel用法详解

    Ext.Net学习笔记23:Ext.Net TabPanel用法详解 上面的图片中给出了TabPanel的一个效果图,我们来看一下代码: <ext:TabPanel runat="se ...

  8. Ext.Net学习笔记19:Ext.Net FormPanel 简单用法

    Ext.Net学习笔记19:Ext.Net FormPanel 简单用法 FormPanel是一个常用的控件,Ext.Net中的FormPanel控件同样具有非常丰富的功能,在接下来的笔记中我们将一起 ...

  9. Ext.Net学习笔记20:Ext.Net FormPanel 复杂用法

    Ext.Net学习笔记20:Ext.Net FormPanel 复杂用法 在上一篇笔记中我们介绍了Ext.Net的简单用法,并创建了一个简单的登录表单.今天我们将看一下如何更好是使用FormPanel ...

随机推荐

  1. Bootstrap之表格checkbox复选框全选 [转]

    转自: http://blog.csdn.net/shangmingchao/article/details/49761315 效果图: HTML中无需添加额外的一列来表示复选框,而是由JS完成,所以 ...

  2. 处理Google Play的相关方法

    1.打开Google play软件的详细页面 Intent intent = new Intent(); intent.setAction(Intent.ACTION_VIEW); intent.se ...

  3. FlexSlider插件的详细设置参数 http://www.woothemes.com/flexslider/

    http://www.woothemes.com/flexslider/ FlexSlider插件的详细设置参数 $(window).load(function() { $('.flexslider' ...

  4. 【HTML】Advanced2:Conditional Comments

    1.try and figure out what is sensible for you to support. Are your web site visitors likely to be us ...

  5. 判断两棵树是否相等 leecode

    很简单 提交代码 https://oj.leetcode.com/problems/same-tree/ iven two binary trees, write a function to chec ...

  6. PHP中的empty()和isset()的比较

  7. nyoj 678 最小K个数之和

    最小K个数之和 时间限制:1000 ms  |  内存限制:65535 KB 难度:2   描述 输入n个整数,输出其中最小的K个数之和.例如输入4,5,1,1,6,2,7,3,3这9个数字,当k=4 ...

  8. 四、XML映射配置文件

    MyBatis的XML配置文件包含了影响MyBatis行为甚深的设置和属性信息.XML文档的高层级结构如下: ----configuration配置 --------properties属性 ---- ...

  9. iOS 基础知识

    1获取系统语言设置 NSUserDefaults *userDefault = [NSUserDefaults standardUserDefaults]; NSArray *languages = ...

  10. C socket demo

    一.服务端-server.c #include <stdio.h> #include <sys/socket.h> #include <arpa/inet.h> # ...