《双陈记》情侣博客

位置:主页 > 前端设计 > ExtJS学习笔记(一)

ExtJS学习笔记(一)

最近打算学习一下传说中的ExtJS框架,每天学习一点点,做个学习笔记,加深些印象。
ExtJS简介:
先简单介绍一下传说的ExtJS是神马东东,ExtJS是一个灰常NB的Ajax框架,用来开发带有华丽外观的富客户端应用,效果那是相当的华丽丽啊。是开发管理系统之类UI的必备杀器啊!Ext是用javascript编写的,是一个与后台技术无关的前端ajax框架。因此,可以把Ext用在.Net、Java、Php等各种开发语言开发的应用中;Ext是还是面向对象的。

ExtJS获取:
ExtJS的获取最官方的获取方法显然是去ExtJS的官方网站了,地址:http://www.sencha.com/,去下载ExtJS。ExtJS最新版本为ExtJS4.0。自我感觉学习的话应该从2.0或3.0开始学起吧。

ExtJS环境搭建:
下载完后,解压。这时可以参考网上的教程,了解一下ExtJS的目录结构和文件释义。然后在目录中找出最需要的几个文件:根目录下找到ext-all.js(最主要的Ext代码库文件),adapter/ext/目录下找到ext-base.js(EXT的适配器),语言文件了名字叫“ext-lang-zh_CN.js”,还有存放样式表的文件夹resources文件夹。
拷贝以上找到的文件到一个新的项目文件夹内,ExtJS环境搭建就基本搭建好了。正所谓,工欲善其事必先利其器,接下来就需要一个好的ExtJS编辑器,开发ExtJS编辑器有很多,神马VS,DW,Notepad++,spket,eclipse等等,推荐spket ide 下载地址:spket.com,选择下载spket ide,安装此编辑器需要java环境,下载安装便是。接下来便是配置spket ide了,配置一个有ExtJS代码提示的强烈工具。

spket ide简单配置步骤:打开spket ,在弹出的对话框中设置开发目录,确定后,进入spket的主界面,点击菜单栏的Windows的菜单,选择preferences选项,在弹出的对话框中,单击左侧的SpKet,在下拉选项中选中JavaScript Profiles。然后在右侧顶部,单击NEW,在弹出对话框中输入ExtJS,点击OK,然后在选中刚才新添加的ExtJS,单击右侧的Add Library,在下拉选项中选择ExtJS,点击ok。然后单击右侧Add File,选中ExtJS根目录下的ext.jsb2单击OK。最后新建一个工程,建立一个html文件,载入相关ExtJS库文件,就可以开始ExtJS的神奇之旅了,有代码提示功能,很是爽快!

第一个ExtJS的例子:
还是经典的Hello World!

<html>
<head>
<title>Extjs MessageBox</title>
<link rel=“Stylesheet” type=“text/css” href=“../resources/css/ext-all.css” />
<script type=“text/javascript” src=“../adapter/ext/ext-base-debug.js”></script>
<script type=“text/javascript” src=“../ext-all-debug.js”></script>
</head>
<body>
<script type=“text/javascript”>
Ext.onReady(function() {
Ext.MessageBox.alert(‘Hello’, ‘Hello world’);
});
</script>
</body>
</html>

这样第一个ExtJS的例子就搞定了。



无觅相关文章插件

已经有10位童鞋留言了,还不来盖楼!

  1. ExtJS做界面确实很省事,不过做特效的话还是JQuery好用。

  2. 跟你一块学习学习啊,呵呵!!

  3. 一直研究DWZ这个框架,extjs感觉功能强,界面不好看.

  4. 好喜欢这个主题啊。。。。。情侣博客。。。。我喜欢

  5. :!: 这段时间天天忙毕业设计,终于有空上会儿网,瞅瞅你们的东西啦~、

love730.com
To:双陈记

 疑问 冷笑 悲伤 坏蛋 感叹 微笑 脸红 大笑 吃惊 惊讶 困惑 酷 大声笑 恼火 古怪

您还可以输入300个字插入图片