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. Java学习----对象与对象之间的关系

    1.依赖 对象之间最弱的一种关联方式,是临时性的关联.代码中一般指由局部变量,函数参数,返回值建立的对于其他对象的调用关系. public class A { // 方法一 public void t ...

  2. 人人网FED CSS编码前端开发规范

    文件相关规范 1.文件名必须由小写字母.数字.中划线-组成 2.文件必须用utf-8编码 3.文件引入可通过外联或内联方式引入: 3.1 外联方式:<link rel=”stylesheet” ...

  3. POJ1007-DNA Sorting-ACM

    DNA Sorting Time Limit: 1000MS   Memory Limit: 10000K Total Submissions: 83442   Accepted: 33584 Des ...

  4. CSS远程加载字体

    CSS 远程加载字体的方法,做网站CSS的都知道,用户浏览网站时,网页上的字体是加载本地的.换言之,如果网站使用了用户电脑所没有安装的字体,那显示字体就会被默认字体所代替了,自然效果就大受影响了. 上 ...

  5. Django socketio 安装

    如果你还没有安装过 gevent,首先需要安装 libevent, 编译安装 libevent 需要安装 Pyhton 开发库. 在Debain上可以运行如下指令: $ sudo apt-get in ...

  6. google 论文

    从google历年所有论文的汇总来看,TOP5的分别是人工智能和机器学习.算法理论.人机交互与视觉.自然语言处理.机器感知,大家从一个侧面看出goolge research的重点了吧. Google所 ...

  7. [BestCoder Round#26] Apple 【组合数学】

    题目链接:HDOJ - 5160 题目分析 第一眼看上去,要求统计所有不同排列对答案的贡献.嗯...完全没有想法. 但是,如果我们对每个数字单独考虑,计算这个数字在总答案中的贡献,就容易多了. 对于一 ...

  8. 关于 Boolean 的转换

    前端经常喜欢这样写 if else if(value) { //do something } javascript 能智能的把任何类型的 value 转换成 boolean 来进行 if 判断 转换是 ...

  9. LA 3998 Prime k-tuple

    题意:如果K个相邻素数p1,p2,p3.....pk满足pk-p1=s,称这些素数组成一个距离为s的素数K元组,输入a,b,k,s,输出区间[a,b]内距离为s的素数k元组的个数. 思路:先打到500 ...

  10. struts2接收参数——域模型、DTO

    在开始介绍域模型之前我们要明白一点,为什么通过域模型我们可以把参数这么方便的在后台接收. 那是因为 通过参数拦截器(params interceptor)自动的把前台传过来的参数给域对象(domain ...