1、Ext是什么？

extjs是集UI和ajax框架与一身的，界面又好看，又有很强的ajax交互功能，适合不会做漂亮页面的程序员用的，缺点就是太大了，要导入近800KB左右的js和css文件，这对于web应用来说是一个比较大的开销

2、常见的一段代码和他们的效果

Ext.onReady(function(){

   Ext.Msg.alert("Title","Hi baby.");

});
  Ext.onReady(function() {

          v = new eoms.form.Validation({form:'theform'});

        });
Ext.onReady(function(){

	 	ref = new Ext.LoadMask(Ext.getBody(), {msg:"正在刷新数据请稍后..." }); 	

	Ext.MessageBox.buttonText.ok = "确定";

	Ext.MessageBox.buttonText.cancel = "取消";

 				 var menubar = new Ext.Toolbar({

			 	 cls : 'oli-panel-header',

			 	items:['当前位置:', '-',

				 	 	{

							id:'bbbzd1',

							text:'发起考试',

							iconCls: 'bbbzd1',

							handler:function(){try{top.ScreenCtl()}catch(e){}}

						},'->',

					{

						id:'save',

						iconCls: 'save',

						text:'保存',

						handler:function(){save();}

					}, '-',

					{

						id:'addnew',

						iconCls: 'addnew',

						text:'继续添加',

						handler:function(){addNew();}

					}, '-',

					{

						id:'back',

						iconCls: 'back',

						text:'返回',

						handler:function(){back()}

					},'-'

					]

			 	 });

			     menubar.render('riskAlarmBar');

	});

上述效果图类似下面的，一般的系统中，刚进入就是 一个列表的页面，列表上面有标题，右上角有按钮，类似如下的

3.具体的使用方法

要使用ExtJS，先要得到ExtJS库文件，ExtJS库文件可以到ExtJS官网下载，地址是www.extjs.com/products/gxt/download.php，把下载得到的ZIP压缩文件解压，可以得到以下内容,

　adapter：负责将里面提供第三方底层库（包括Ext自带的底层库）映射为Ext所支持的底层库。

 　　build：  压缩后的ext全部源码(里面分类存放)。

 　　docs：  API帮助文档。

 　　exmaples：提供使用ExtJs技术做出的小实例。

 　　resources：Ext UI资源文件目录，如CSS、图片文件都存放在这里面。

 　　source： 无压缩Ext全部的源码(里面分类存放) 遵从Lesser GNU （LGPL） 开源的协议。

 　　Ext-all.js：压缩后的Ext全部源码。

 　　ext-all-debug.js：无压缩的Ext全部的源码(用于调试)。

　　ext-core.js：压缩后的Ext的核心组件，包括sources/core下的所有类。

　　ext-core-debug.js：无压缩Ext的核心组件，包括sources/core下的所有类。

得到ExtJS库文件后，就可以将extjs应用到页面当中了。应用extjs需要在页面中引入extjs的样式及extjs库文件，样式文件为resources/css/ext-all.css，extjs的js库文件主要包含两个，adapter/ext/ext-base.js及ext-all.js，其中ext-base.js表示框架基础库，ext-all.js是 extjs的核心库。adapter表示适配器，也就是说可以有多种适配器，因此，可以把adapter/ext/ext-base.js换成 adapter/jquery/ext-jquery-adapter.js，或adapter/prototype/ext-prototype- adapter.js等。

因此，要使用ExtJS框架的页面中一般包括下面几句：

一般情况下我们就使用下面的三个：

 <link rel="stylesheet" type="text/css" href="F:/extjs/ext-all-2.2.css" />

<script type="text/javascript" src="F:/extjs/ext-base-2.2.js"></script>

<script type="text/javascript" src="F:/extjs/ext-all-2.2.js"></script>

在ExtJS库文件及页面内容加载完后，ExtJS会执行Ext.onReady中指定的函数，因此可以用，一般情况下每一个用户的ExtJS应用都是从Ext.onReady开始的，使用ExtJS应用程序的代码大致如下：

<script type="text/javascript">

function fn(){

alert("Ext已经加载");

}

Ext.onReady(fn);

</script>

或者：

<script type="text/javascript">

function fn(){

alert("Ext已经加载");

}

Ext.onReady(function(){

alert("Ext已经加载");

});

</script>

下面我们写一个简单的代码程序：弹出警告对话框

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>

 <head>

  <title> ext_exsample </title>

 </head>

 <link rel="stylesheet" type="text/css" href="F:/extjs/ext-all-2.2.css" />

<script type="text/javascript" src="F:/extjs/ext-base-2.2.js"></script>

<script type="text/javascript" src="F:/extjs/ext-all-2.2.js"></script>

<script type="text/javascript">

Ext.onReady(

function(){

Ext.MessageBox.alert("标题","内容");

}

);

</script>

 <body>

 </body>

</html>

效果如下：

例子二：弹出窗体

<script>

Ext.onReady(function () {

//弹出警告对话框.

//Ext.MessageBox.alert("hello", "Hello ,Hyey.wl Come to ExtJS World!");

//弹出Window窗体.

var win = new Ext.Window({ title: "Hello", width: 300, height: 200, html: '<h1>Hello Easy ExtJS Open Source Window</h1>' });

win.show();

});

</script>

效果如下：

这只是一个简单的实例，要想做出复杂的功能还需要学习很多知识，在后续中将介绍ExtJS类库和组件介绍，希望大家继续关注，一起研究，共同进步！

Ext入门的第一个程序（1）的更多相关文章

  1. Hibernate 入门的第一个程序

    一. Hibernate介绍     Hibernate是基于对象/关系映射(ORM,Object/Relational Mapping)的一个解决方案.ORM方案的思想是将对象模型表示的对象映射到关 ...

  2. windows驱动编程入门（第一个程序）

    1. 工具 vc6.0 WINDDK 3790.1830 Dbgview 驱动加载工具InstDrv32位/64位中文版 2. 代码 first.c /// /// @file first.c /// ...

  3. 【 D3.js 入门系列 — 1 】 第一个程序 HelloWorld

    记得以前刚上大一学 C 语言的时候,写的第一个程序就是在控制台上输出 HelloWorld .当时很纳闷,为什么要输出这个.老师解释说所有学编程入门的第一个程序都是在屏幕上输出 HelloWorld, ...

  4. java第一个程序——Hello World

    Hello World 如果没有下载jdk以及配置环境变量的萌新请自行百度,教程非常的详细(参考:https://jingyan.baidu.com/article/6dad5075d1dc40a12 ...

  5. SLAM+语音机器人DIY系列：（二）ROS入门——4.如何编写ROS的第一个程序hello_world

    摘要 ROS机器人操作系统在机器人应用领域很流行,依托代码开源和模块间协作等特性,给机器人开发者带来了很大的方便.我们的机器人“miiboo”中的大部分程序也采用ROS进行开发,所以本文就重点对ROS ...

  6. Java入门——编写并运行第一个程序

    Java入门——编写并运行第一个程序 摘要:本文主要介绍如何使用Java语言编写并通过DOS运行简单的程序. 编写简单的程序 在D盘新建一个文本文档,输入如下代码: class Hello { pub ...

  7. CodeIgniter框架入门教程——第一课 Hello World！

    本文转载自:http://www.softeng.cn/?p=45 今天开始,我将在这里连载由我自己编写的<CodeIgniter框架入门教程>,首先,这篇教程的读着应该是有PHP基础的编 ...

  8. unix 网路编程（卷一）第一个程序编译过程

    unix卷一去年暑假买的到现在才开始看无比惭愧,而且惭愧第一个程序就断断续续弄了几天,要好好写程序了,马上要找工作了,下面介绍下把本书第一个程序跑起来的过程: 搜各种博客 我用系统的是ubuntu 1 ...

  9. 【C语言探索之旅】 第三课：你的第一个程序

    内容简介 1.课程大纲 2.第一部分第三课:你的第一个程序 3.第一部分第四课预告:变量的世界 课程大纲 我们的课程分为四大部分,每一个部分结束后都会有练习题,并会公布答案.还会带大家用C语言编写三个 ...

随机推荐

  1. 15_RHEL7挂载NTFS分区

    1.下载ntfs-3g wget https://tuxera.com/opensource/ntfs-3g_ntfsprogs-2015.3.14.tgz 2.安装 tar -zxvf ntfs-3 ...

  2. 阿里云的esc

    云服务器ecs作用如下:1.完全管理权限:对云服务器的操作系统有完全控制权,用户可以通过连接管理终端自助解决系统问题,进行各项操作:2.快照备份与恢复:对云服务器的磁盘数据生成快照,用户可使用快照回滚 ...

  3. 在 iOS 应用中直接跳转到 AppStore 的方法--备用

    找到应用程序的描述链接,比如:http://itunes.apple.com/gb/app/yi-dong-cai-bian/id391945719?mt=8 然后将 http:// 替换为 itms ...

  4. 关于存储的--b

    iphone沙箱模型的有四个文件夹,分别是什么,永久数据存储一般放在什么位置,得到模拟器的路径的简单方式是什么. documents,tmp,app,Library. (NSHomeDirectory ...

  5. BZOJ 1483 梦幻布丁

    Description \(N\)个布丁摆成一行,进行\(M\)次操作.每次将某个颜色的布丁全部变成另一种颜色的,然后再询问当前一共有多少段颜色.例如颜色分别为\(1,2,2,1\)的四个布丁一共有\ ...

  6. [BZOJ 2243] [SDOI 2011] 染色 【树链剖分】

    题目链接:BZOJ - 2243 题目分析 树链剖分...写了200+行...Debug了整整一天+... 静态读代码读了 5 遍 ,没发现错误,自己做小数据也过了. 提交之后全 WA . ————— ...

  7. Journey of Android for Mac

    下了决心要学Java,几个同事都建议我去学Android,自己觉得能做点应用放手机上玩玩也比较有动力. 沈逸有篇文章里面写道: 搞C的看不起搞C++的. 搞C++的看不起搞java的. 搞java的看 ...

  8. Delphi 的运算符列表，运算符及优先级表格 good

    Delphi 的运算符列表 分类 运算符 操作 操作数 结果类型 范例 算术运算符 + 加 整数,实数 整数,实数 X + Y - 减 整数,实数 整数,实数 Result - 1 * 乘 整数,实数 ...

  9. Hibernate 事物隔离级别 深入探究

    目录 一.数据库事务的定义 二.数据库事务并发可能带来的问题 三.数据库事务隔离级别 四.使用Hibernate设置数据库隔离级别 五.使用悲观锁解决事务并发问题 六.使用乐观锁解决事务并发问题 Hi ...

  10. scheme和common lisp 区别

    Scheme and Common Lisp use different names for some of the basic system functions. Many Lisp program ...