Ext JS4学习笔记1——环境的搭建

2012-10-11

• 首先还是表达一下自己写笔记的原因吧：

　　算起来到公司已经有差不多两个月了吧，虽然还没有毕业也不知道开发这条道路能走多远。这段时间又很多感触，也学到了不少，也经常在博客园看大神们的帖子。突然想写点东西的原因有三：

     其一，窃以为既然在学习搞开发，那就要有个专业的样子虽然技术不行也要写点自己在开发的道路上的经验和心得吧，这样既方便自己以后查阅也可以锻炼自己的语言组织和逻辑能力。

     其二、我觉得学习任何东西都需要总结合提炼后才会真正成为自己的东西，因为我们在学习的过程中总是为了解决问题而去学习的，这样一来我们通过各种手段得到的资料最终成功的将这个问题解决，但是那些知识在脑袋里是杂乱无章的，也许当时能理清但是过一段时间过后就想不起来了。原因就是它没有真正变成我们自己的东西，所以我想借这个博客来总结一下自己的学习心得，权当整理笔记嘛。

     其三、这是一个私人原因，我自己感觉是一个很怀旧的人，总想在我成长的道路上留下点什么。现在这是我逐渐离开象牙塔融入这个社会的过程，我想这是我人生中一个重要的转折点把，不管以后能在这条道路上走多远，我希望自己能好好体会人生的每一段时光，因为它们对于我来说都是独一无二的。不管悲也好喜也好我只想记录自己成长的点点滴滴，一代追忆而已。

 基本原因已经表达完毕，至于这段时间的生活感想以后有时间单独写吧。下面开始正式进入Ext JS4的学习之旅吧.....

这篇博客的主要目的就是环境的搭建，大家都知道任何开发都有自己的环境。这是我第一次接触Ext JS刚开始以为它也像其他的API一样有个安装包，加载到VS上去才行的。下载好后解压一看居然没有.exe文件，一问才晓得直接把文件拷到工程文档里就可以了。下面具体说：

首先在官网上下载Ext JS4.0.7 (http://www.sencha.com/products/extjs/download/),好像已经有4.1 Beta 1版本了吧。解压后可以看到有很多文件夹，就不一一说了，只说几个我感觉常用的，

docs目录：API文档目录；

locale:本地化文件目录；

examples：实例文件目录；

resources：Ext JS4的资源目录，包含了样式定义文件及需要的图片文件；

bootstrap.js:会根据Url地址自动加载ext-all.js或ext-all-debug.js文件。

ext-all.js:EXt JS的库文件；ext-all-debug.js:调试应用程序时使用的Ext JS的文件库；

开发平台可以再VS中，也可以在Ext Designer中，这是一个所见即所得的创建Ext JS界面的软件。感觉更siverlight的Blend一样。

准备工作已经做好了，现在可以进入学习了打开VS新建一个网站，输入工程名称Ext Study。

在C盘中打开C:\inetpub\wwwroot\Ext study 将resources、bootstrap.js、ext-all.js、locale、ext-all-debug.js文件拷进去后在vs的解决方案资源管理器中刷新一次，就可以看见这几个文件了。

最后新建一个html页命名为“Hello”在head中加载本地化脚本、ext-all.js、bootstrap.js如下:

 

<title>Hello</title>
    <link rel="stylesheet" type="text/css" href="resources/css/ext-all.css"/>
    <script type="text/javascript" src="bootstrap.js"> </script>
    <script type="text/javascript" src="locale/ext-lang-zh_CN.js"> </script>

 

环境就搭建好了，我们可以输入一段脚本测试一下在head中继续添加如下代码:

 <script type="text/javascript">
        Ext.onReady(function () {
          Ext.MessageBox.confirm("提示信息", "确认删除记录？", function (btn) { alert(btn); });
          }
</script>

保存运行效果如下：

搭建环境到此结束。