extjs基础知识入门 - 面向对象网,web开发,Extjs,学习,对象 - 面向对象技术开发

面向对象技术开发

会员投稿 投稿指南 站长资讯通告:
您的位置: 首页 > Web开发 > Extjs > 正文

extjs基础知识入门

来源: www.bianceng.cn 阅读:

相信很多人对使用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});

使用ie或者ff打开Hello.htm,可以看到一个弹出的对话框,和js的alert对话框一样,但是漂亮了许 多。

我们看看代码,在html页面中首先引用extjs的相关库文件,注意引用顺序,接下来是引用我们自己的 js文件。我们简单看下,Ext.onReady 是在文档加载完之后触发的,它有一个参数是一个函数类型,该函 数在事件出发的时候被调用。在这里我们用了匿名的函数,当然也可以把函数在外部定义好,然后把函数 的名字作为参数传递进来。Ext.MessageBox.alert是一个弹出消息的对话框函数,第一个参数是标题,第 二个参数是对话框的内容。 Ext.Message类下还有模拟js的prompt对话框和comfirm对话框的方法,我们 改动下daben.js看看confirm方法的效果:

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    Ext.MessageBox.confirm("comfirm","模拟js的comfirm对话框",function(btn){
10        alert("点击了"+btn+"按钮");
11    });
12});

\

光看对话框并不是很有趣,实际的web程序中,需要向服务器提交数据并根据服务器的响应来更新页面 中的内容,我们来看看extjs是如何实现的。下边的例子中,我们将在页面上放置一个编辑框和一个按钮 ,当点击按钮之后,服务器将编辑框中输入的内容转化为大写并显示在页面的一个div中。打开vs2008, 新建一个web应用程序ExtjsDemo,删掉自动添加的default.aspx文件。添加我们的hello.htm和daben.js 文件以及我们要用到的extjs库,添加完成后如图所示:

\

Tags:
相关文章列表: