extjs学习笔记（一）一些基础知识

　2009-10-11 00:00:00　来源：WEB开发网　　　

核心提示：相信很多人对使用js进行客户端的编程比较头大，其实现在已经有了很多优秀的js库，extjs学习笔记（一）一些基础知识，可以大大简化js编程的工作量，其中，新建一个文本文件，文件名改为Hello.htm，jquery和extjs就是两款非常优秀的js库，我在项目中已经频繁使用了jquery

相信很多人对使用js进行客户端的编程比较头大，其实现在已经有了很多优秀的js库，可以大大简化js编程的工作量，其中，jquery和extjs就是两款非常优秀的js库。我在项目中已经频繁使用了jquery，这次主要是学习使用extjs，但现有的教程基本都是针对2.0的，而且后台用到的语言也很少是.net平台下的C#，所以我打算针对3.0版，后台使用C#，记录下自己的学习过程，希望能和志同道合的朋友一起探讨，共同进步。

extjs的官方网站是http://www.extjs.com，目前最高版本是3.0.2，但是只有3.0.0的才没有任何下载限制，可以点击这里下载3.0版的。下载来的压缩包里边包含压缩后的extjs库，调试时用到的库，具有可读性的源代码，文档和例子。在开始之前，不妨先看下examples 文件夹下的例子，对extjs有一个感性的认识，如果你觉得例子里边的效果让你心动，那么就一起开始extjs的学习之旅吧。

首先明确下我们需要引用的文件，包括adpter/ext/ext-base-debug.js,ext-all-debug.js和整个 resource文件夹，当然，多数情况下，我们还需要ext-lang-zh_CN.js进行中文的本地化，该文件在src/locale目录下。因为是学习阶段，所以我们使用了debug版本，在实际的项目中，发布的时候要使用压缩后的版本以减小文件体积。接下来，我们就秉承编程界的一贯传统，开始我们的第一个Hello world程序。

新建一个文本文件，文件名改为Hello.htm，用文本编辑器打开，写下如下代码：

Hello.htm

　1<html> 　2<head> 　3<meta　http-equiv="Content-Type"　content="text/html;charset=utf-8"　/> 　4<title>Extjs　hello　world　dialog</title> 　5<link　rel="stylesheet"　type="text/css"　href="extjs/resources/css/ext-all.css"　/> 　6<script　type="text/javascript"　src="extjs/ext-base-debug.js"></script> 　7<script　type="text/javascript"　src="extjs/ext-all-debug.js"></script> 　8<script　type="text/javascript"　src="extjs/ext-lang-zh_CN.js"></script> 　9<script　type="text/javascript"　src="js/daben.js"></script> 10</head> 11<body> 12<div　id="hello"></div> 13</body> 14</html> 　　daben.js的内容如下： 1/**//* 2　*作者：大笨 3　*日期：2009-10-10 4　*版本：1.0 5　*博客地址：http://yage.blogs.com 6　*/ 7Ext.onReady(function(){ 8　　　　Ext.MessageBox.alert("信息","Hello　world"); 9});