ExtJs学习目录
对于大多数做后台开发人员来说,要制作一个漂亮的页面实在是一件困难的事情,好的美感+CSS的良好应用,然后通过一大堆JS实现一些很炫的效果,如果能够完成,就是个全才了。但我相信有很多人员不能完成,不过也不必担心,前人已经为我们造好了,这就是所谓控件。笔者是从事.NET开发的,相信使用过.NET的人都从.NET提供的服务端控件中享受过便利。但是事实上,随着开发经验的积累,开发人员们越来越不愿意使用服务端控件,或者说他们更喜欢在客户端通过异步通讯实现和后台的交互。
总所周知jquery和extjs就是两款非常优秀的js库,而这两个框架我都接触过,Jquery确实是很强大,它的语法很简洁,所谓“多学一点Jquery,少写一行js代码”,jQuery UI 是功能很强大的客户端框架,要详细了解的童鞋可以浏览官网http://jquery.com/。
ExtJs也是刚接触不到两周,感觉也是很强大,他提供了丰富的客户端控件,只要应用得当,同样可以制作出很炫的效果(当然是没有美工的前提下,毕竟这里的空间都是统一的样式比较单调)。
Extjs的官方网站是http://www.extjs.com,目前最高版本是4.1。可以单击这里下载各种ExtJS版本。下载来的压缩包里边包含压缩后的extjs库,调试时用到的库,具有可读性的源代码,文档和例子。在开始之前,不妨先看下examples文件夹下的例子,对extjs有一个感性的认识,如果你觉得例子里边的效果让你心动,那么就一起开始extjs的学习之旅吧。
我这里使用的是ExtJs-3.4.0,其结构如下
其中,提供了比较详细的文档(docs)和实例(examples);
废话不多说,直接来个实例先,我也是初学,希望大家有好的方法和资料推荐一些,相互交流,共同成长。
学习程序都是从Hello,World开始的,这里也客串一下吧!
打开vs2010 ,新建一个空的MVC项目,然后新建一个HelloController,并新建相应视图,如下
然后添加ExtJs类库,这里存放在COntent下面,
先看视图
添加引用
<link rel="stylesheet" type="text/css" href="http://www.cnblogs.com/Content/ext-3.4.0/resources/css/ext-all.css" /> <script type="text/javascript" src="http://www.cnblogs.com/Content/ext-3.4.0/adapter/ext/ext-base.js"></script> <script src="http://www.cnblogs.com/Content/ext-3.4.0/ext-all.js" type="text/javascript"></script>
做好准备,我们就可以在使用ExtJS了,vs对ExtJS也有较好的智能提示。
第一个实例——Hello,World
视图Code
<%@ Page Language="C#" Inherits="System.Web.Mvc.ViewPage<dynamic>" %> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> <link rel="stylesheet" type="text/css" href="http://www.cnblogs.com/Content/ext-3.4.0/resources/css/ext-all.css" /> <script type="text/javascript" src="http://www.cnblogs.com/Content/ext-3.4.0/adapter/ext/ext-base.js"></script> <script src="http://www.cnblogs.com/Content/ext-3.4.0/ext-all.js" type="text/javascript"></script> <title>ExtJs第一堂课</title> <script language="javascript" type="text/javascript"> Ext.onReady(function () { //Ext.Msg.alert("The First ExtDemo", "Hello,World!"); Ext.Msg.alert("Every Body!Welcome To the ExtJs!"); //ExtJs客户端演示HelloWorld Ext.get("ClientDemo").on("click", function () { Ext.Msg.alert("The First ExtDemo", "Hello,World!"); }); /*ExtJs+Ajax演示HelloWorld*/ Ext.get("ExtJsAjaxDemo").on("click", function () { var url = "/Hello/GetString"; //需要请求的页面url Ext.Ajax.request({ url: url, method: "POST", success: function (response, option) { var message = response.responseText; Ext.Msg.alert("已接受从服务端传来的数据",message); }, failure: function (response, option) { response = Ext.util.JSON.decode(response.responseText); core.alert.error(response.msg); } }); }); }) </script> </head> <body> <div> <input type="button" id="ClientDemo" value="ExtJs客户端演示HelloWorld" /> <input type="button" id="ExtJsAjaxDemo" value="ExtJs+Ajax演示HelloWorld" /> </div> </body> </html>
Controller中Code
#region 返回一个字符串 public string GetString() { return "First ExtJs Dedmo——Hello,World!"; } #endregion
效果展示
备注:由于限制上传大小,extjs包已经剔除。